迭代器模式

顺序访问一个集合，基本上是数组形式的，对象不是有序的列表无法顺序访问。使用者无需知道集合的内部结构。

举例：

 <p>jquery</p>
    <p>jquery</p>
    <p>jquery</p>

let arr = [1, 2, 3];
let nodeList = document.getElementsByTagName('p'); //是一个类数组，但不是数组
let $p = $('p');

//要遍历这三个不同数据类型的变量，需要三中遍历方式

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

//第二
for (let i = 0; i < nodeList.length; i++) {
    console.log(nodeList[i]);
}

//第三
$p.each(function (key, p) {
    console.log(key, p);
})

现在写一个方法能同时遍历以上三种数据。

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;
    }
}

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

    //生成遍历器
    getIterator() {
        return new Iterator(this);
    }
}

let container = new Container([1,2,3,4,5,6]);
let iterator = container.getIterator();
while(iterator.hasNext()){
    console.log(iterator.next());
}

// 1
// 2
// 3
// 4
// 5
// 6

以上是自己手写的一个迭代器，ES6中已经有封装好的迭代器。

ES6中的Iterator语法：
ES6语法中，有序集合的数据类型（Array Map Set String TypedArray argument NodeList）有很多种（注意：object不是有序集合，可以用Map代替），这时需要一个统一的遍历接口访问这些有序集合中的数据，ES6中的Iterator可以做到。

有序集合的数据类型需要有[Symbol.iterator]属性，这个属性的值是函数，执行这个函数会返回一个迭代器，这个迭代器有next方法可顺序迭代子元素，这是ES6中帮我们封装好的，上面例子中的的next是我们自己写的。

可运行Array.prototype[symbol.iterator]测试。

可以这么写：

function each(data){
    //生成遍历器
    let iterator = data[Symbol.iterator]();
    let item = {done:false};
    while(!item.done){
        item = iterator.next();
        if(!item.done){
            console.log(item.value);
        }
    }
}

each(arr);
each(nodeList);
each($p);

但是！！！
Symbol.iterator并不是人人都知道的，也不是每个人都需要封装一个 each 方法，因此，ES6提供了一个新的方法 for...of 来遍历：

function each(data){
   for (const item of data) {
       console.log(item);
   }
}

each(arr);
each(nodeList);
each($p);

for...in是用来遍历对象的，for...of 是遍历迭代器的。

ES6 Iterator 和 Generator

Iterator 的价值不限于上述几个类型的遍历，还有Generator函数的使用。Generator返回的数据符合Iterator接口遍历的要求，所以Generator函数也可以使用Iterator语法。

function* helloGenerator(){
    yield 'hello';
    yield 'happy';
    yield 'chen';
}

let hello = helloGenerator();
console.log(hello[Symbol.iterator]);
console.log(hello[Symbol.iterator]());
// [Function: [Symbol.iterator]]
// Object [Generator] {}

当然也可以用for…of。

function* foo(){
    yield 1;
    yield 2;
    yield 3;
    yield 4;
    yield 5;
    yield 6;
}

//当然也可以用for...of
for (const v of foo()) {
    console.log(v);
}
// 1
// 2
// 3
// 4
// 5
// 6