摘要：迭代器模式迭代器模式是指提供一種方法順序訪問一個(gè)聚合對象中的各個(gè)元素，而不需要暴露該對象的內(nèi)部表示?？傻鷧f(xié)議和迭代器協(xié)議。生成器函數(shù)是可以作為迭代器工廠的函數(shù)，當(dāng)它被執(zhí)行時(shí)會返回一個(gè)新的對象，該對象符合可迭代協(xié)議和迭代器協(xié)議。

迭代器模式是指提供一種方法順序訪問一個(gè)聚合對象中的各個(gè)元素，而不需要暴露該對象的內(nèi)部表示。

迭代器分為內(nèi)部迭代器和外部迭代器。內(nèi)部迭代器只需一次初始調(diào)用，而外部迭代器必須顯式地請求迭代下一個(gè)元素，這樣我們就可以手動控制迭代過程。

實(shí)現(xiàn)一個(gè)內(nèi)部迭代器：

Array.prototype.innerIterator = function(callback){
    for (let i = 0, len = this.length; i < len; i++) {
        callback && callback.call(this[i], this[i], i)
    }
};
[1,2,3].innerIterator(function(item, index){
    console.log("item:", item, "index:", index)
})
// item: 1 index: 0
// item: 2 index: 1
// item: 3 index: 2

實(shí)現(xiàn)一個(gè)外部迭代器：

Array.prototype.outerInterator = function(){
    let index = 0;
        return {
            next: () => {
                return index < this.length ?
                {value: this[index++], done: false}:
                {value: undefined, done: true}
            }
    }
}
let iterator = [1,2,3].outerInterator();

for(let next; (next = iterator.next()) && !next.done;) {
    console.log("item", next.value)
}
// item 1
// item 2
// item 3

了解了迭代器模式，再來看看 ES6 中補(bǔ)充的迭代協(xié)議。可迭代（iterable）協(xié)議和迭代器（iterator）協(xié)議。

可迭代協(xié)議：
一個(gè)可迭代對象（或其原型上），必須有一個(gè) Symbol.iterator 的屬性，該屬性所對應(yīng)的值為返回一個(gè)對象的無參函數(shù)，被返回對象符合迭代器協(xié)議。當(dāng)可迭代對象需要迭代時(shí)，調(diào)用該方法。

一些數(shù)據(jù)類型內(nèi)置了 @@iterator 方法，有自己默認(rèn)的迭代行為。（String, Array, TypedArray, Map , Set 等都是內(nèi)置可迭代對象， 因?yàn)樗鼈兊脑蛯ο蠖加幸粋€(gè) @@iterator 方法.）（[Symbol.iterator]、@@iterator 可以認(rèn)為是一回事）

let iterator = ("hi")[Symbol.iterator]()
var a = iterator.next();
// a { value: "h", done: false }

迭代器協(xié)議：
一個(gè)迭代器必須實(shí)現(xiàn)了 next() 方法，該方法是返回一個(gè)對象的無參函數(shù)。被返回的對象有兩個(gè)必要的屬性：done 和 value。

Array.prototype.Iteration = function(){
    let index = 0;
        return {
            [Symbol.iterator](){return this},
            next: () => {
                return index < this.length ?
                {value: this[index++], done: false}:
                {value: undefined, done: true}
            }
    }
};
let Iteration = [2, 3, 4].Iteration();
for(let value of Iteration) {
    console.log("value", value)
}
// value 2
// value 3
// value 4

不能發(fā)現(xiàn)，Iteration 同時(shí)滿足可迭代協(xié)議和迭代協(xié)議。又因?yàn)槭强傻模?b>for...of 是可以直接使用，而且這個(gè)和外部迭代器十分相似。

一旦一種數(shù)據(jù)結(jié)構(gòu)有了 @@iterator 方法后， 就認(rèn)為是可迭代的。ES6 中許多新的方法就是基于此的 解構(gòu)賦值、擴(kuò)展運(yùn)算符、yield*，還有 for..of、Array.from()等。

知道了以上知識，也就知道了為什么對象不可以直接使用 for...of 了。不過我們可以在對象原型上添加 @@iterator 方法，使之成為可迭代的。

Object.prototype.Iteration = function(){
    let keys = Object.keys(this), index = 0;
        return{
            [Symbol.iterator](){return this},
            next: () => {
                let current = index++;
                return current < keys.length?
                {value: [keys[current], this[keys[current]]], done: false}:
                {value: undefined, done: true};
            }
        }
}
let iterator = {"a": 1, "b": 2, "c": 3}.Iteration();
    for(let [key, value] of iterator) {
        console.log("key:", key, "value:", value)
}
// key: a value: 1
// key: b value: 2
// key: c value: 3

像以上的的對象都是我們自己手動實(shí)現(xiàn)的，符合可迭代協(xié)議和迭代協(xié)議的對象。看起來很麻煩，還好這些工作已經(jīng)有函數(shù)替我們做了，那就是生成器函數(shù)。

生成器函數(shù)是可以作為迭代器工廠的函數(shù)，當(dāng)它被執(zhí)行時(shí)會返回一個(gè)新的 Generator 對象，該對象符合可迭代協(xié)議和迭代器協(xié)議。

現(xiàn)在我們用生成器函數(shù)使得對象符合迭代協(xié)議：

Object.prototype.Iteration = function *(){
    for(let [key, value] of Object.entries(this)){
        yield [key, value]
    }
}
for(let [key, value] of {"a": 1, "b": 2, "c": 3}.Iteration()) {
    console.log("key:", key, "value:", value)
}
// key: a value: 1
// key: b value: 2
// key: c value: 3

在這里生成器只是作為迭代器而已，其實(shí)它還是消息雙向傳遞系統(tǒng)。也正是這些特性的存在，使得異步流程控制又向前邁了一大步。