JavaScript设计模式之迭代器模式

2019-01-19 本文已影响0人 w候人兮猗

介绍

顺序访问一个集合(有序的:Array)
使用者无需知道集合的内部结构

实例

使用jQ演示

    <p>jq each</p>
    <p>jq each</p>
    <p>jq each</p>

    var arr = [1,2,3]
    var nodeList = document.getElementsByTagName('p')
    var $p = $('p')

    arr.forEach(function (item) {
        console.log(item);
    })

    var i , length = nodeList.length
    for (i = 0;i<length;i++){
        console.log(nodeList[i]);
    }

    $p.each(function (key,p) {
        console.log(key,p)
    })

上述的实例中，如果想遍历arr,a标签需要三种方式。这里定义一个迭代器模式的方法统一这三个方法

     //定义一个each 方法
    function each(data) {
        var $data = $(data) //生成迭代器
        $data.each(function (key,val) {
            console.log(key,val)
        })
    }
    
    each(arr)
    each(nodeList)
    each($p)

UML类图

image

代码演示

    class Container {
        constructor(list) {
            this.list = list
        }

        //生成遍历器
        getInterator() {
            return new Iterator(this.list)
        }
    }

    class Iterator {
        constructor(container) {
            this.list = container.list
            this.index = 0
        }

        next() {
            if (this.hasNext()) {
                return this.list[this.index++]
            }
            return null
        }

        hasNext() {
            if (this.index >= this.list.length) {
                return false
            }
            return true
        }
    }

    //test
    let arr = [1,2,3,4,5]
    let container = new Container(arr)
    let iterator = container.getInterator()
    while (iterator.hasNext()) {
        console.log(iterator.next())
    }

场景

jQuery each
ES6 Iterator

ES6 Iterator

Es6中，有序集合的数据类型很多，所以必须有一种迭代模式来遍历
使用`[Symbol.Iterator]属性
属性值是函数，执行函数返回一个迭代器
返回的迭代器有next()这个方法可顺序迭代子元素
image

     //首先 返回[Symbol.Iterator]
    function each(data) {
        let iterator = data[Symbol.iterator]()
        // console.log(iterator.next())
        // console.log(iterator.next())
        // console.log(iterator.next())
        // console.log(iterator.next())
        let item = {done:false}
        while (!item.done){
            item = iterator.next()
            if(!item.done){
                console.log(item.value)
            }
        }
    }
    let arr = [1,2,3,4]
    // let nodeList = document.getElementsByTagName('a')
    let m = new Map()
    m.set('a',100)
    m.set('b',100)
    m.set('c',100)

    each(arr)
    // each(nodeList)
    each(m)
    
    //console

image

实际上ES6已经实现了迭代器的方法for of

    function each2 (data){
        for (let item of data){
            console.log(item)
        }
    }
    
     each2(arr)
    // each(nodeList)
    each2(m)