《你不知道的JavaScript》：弄清生成器与迭代器的区别

这篇将整理下生成器与迭代器的区别。这两个东西初学的时候我是混淆的，尤其《你不知道的Javascript》书中没有进行基础的介绍，我看了之后还特地翻了下其他资料才弄清，所以在本书看到生成器与迭代器时，要先把两者弄清，才能看的下去。

迭代器

迭代器的出现有其原因，在上篇文章(前文链接)中也讲到：因为ES6开始数据结构新增了Set和Map，再加上已有的Array和Object，此外用户还可以自行组合它们来形成组合数据结构，复杂的数据结构导致循环遍历难度加大，为简化和统一循环方式，ES6就给出了迭代器(Iterator)这个接口来提供统一访问机制for..of。

先用ES5语法模拟一个迭代器：

function createIterator(item){
    var i = 0;

    return {    // 返回一个迭代器对象
        next: function () {  //迭代器对象一定有next()方法
            var done = (i>item.length);
            var value = !done ? item[i++] : undefined;

            return {    //next()方法返回结果对象
                value: value,
                done: done
            }
        }
    }
}

var it = createIterator([10, 2, 3, 4, 5]);
console.log(it.next().value);       // 10
console.log(it.next().value);       // 2
console.log(it.next().value);       // 3
console.log(it.next().value);       // 4
console.log(it.next().value);       // 5
console.log(it.next().value);       // undefined

上例这样挨个访问值当然可以，但我们更常用的方法是用循环来访问值，对于这样的情况，用满足ES5语法的循环该这么写(暂时先忘记ES6的for-of循环新特性)：

while(!it.next().done){
    console.log(it.next().value);
}

这样子比较麻烦，但循环起来也是比用单纯for循环引用变量来的清晰明了些，不过出于习惯我还是会用普通for循环。想要让我改变习惯，看下面ES6给出的新东西。

前面说过，ES6中为迭代器提供了统一的访问机制for…of…，ES6中原生的迭代器有Array、Set、Map和String，for..of能够遍历它们是因为它们具有Symbol.iterator属性，该属性指向该数据结构的默认迭代器方法，当使用for...of..迭代该数据结构时，js引擎就会调用其Symbol.iterator方法，从而返回相应的默认迭代器。举例：

var arr = [10, 2, 3, 4, 5];     //数组是一个迭代器

// 使用for..of..来遍历迭代器
for(var v of arr){
    console.log(v); // 10  2  3  4  5
}

//也可以使用ES6提供的next()方法手工遍历
var it = arr[Symbol.iterator]();
console.log(it.next().value);       // 10 
console.log(it.next().value);       // 2
console.log(it.next().value);       // 3

所以可以为上面的createIterator函数返回的对象添加Symbol.iterator方法，人为将其改造成迭代器，从而使其可以使用for..of来遍历：

function createIterator(item){
    var i = 0;

    return {    // 返回一个迭代器对象
        //看，模仿原生迭代器添加Symbol.iterator方法
        [Symbol.iterator]: function () { return this; },
        next: function () {  //迭代器对象一定有next()方法
            var done = ( i >= item.length );
            var value = !done ? item[i++] : undefined;

            return {    //next()方法返回结果对象
                value: value,
                done: done
            }
        }
    }
}
//执行函数后返回一个人造迭代器对象
var it = createIterator([10, 2, 3, 4, 5]);
for(var v of it){   // 使用迭代器的循环机制遍历
    console.log(v);
}

可以看到这是完全可以的。只要在返回的对象中添加Symbol.iterator属性，就可以达到ES6设定的迭代器成立条件。

所以我认为，一个数据结构只要有Symbol.iterator方法和next()方法，就可以认为它是迭代器，是可迭代的(iterable)。

可迭代对象(iterable)

在ES6中，所有的集合对象(数组、Set集合和Map集合)和字符串都是可迭代对象，可迭代对象都绑定了默认的迭代器。for..of循环之所以能够遍历可迭代对象，正是利用了可迭代对象上的默认迭代器。大致过程是：for-of循环每执行一次都会调用可迭代对象的next()方法，并将迭代器返回的结果对象的value属性存储在变量中，循环将继续执行这一过程直到返回对象的done属性的值为true。

如果只需要迭代数组或集合中的值，用for..of循环代替普通for循环是个好选择。

访问默认迭代器

所有的可迭代对象，必定会有一个Symbol.iterator方法，通过调用可迭代对象的Symbol.iterator方法就能获取默认迭代器，这一过程是由JS引擎完成的。具体示例前文有举过，可以再看下：

var arr = [10, 2, 3, 5];    // 数组是个可迭代对象

var it = arr[Symbol.iterator]();    // 调用可迭代对象的Symbol.iterator方法可以获取默认迭代器，将迭代器引用赋给it变量
console.log(it.next());     // {value: 10, done: false}
console.log(it.next());     // {value: 2, done: false}
console.log(it.next());     // {value: 3, done: false}
console.log(it.next());     // {value: 5, done: false}
console.log(it.next());     // {value: undefined, done: true}

在这段代码中，通过Symbol.iterator获取了数组values的默认迭代器，并用它遍历数组中的元素。在JavaScript引擎中执行for-of循环语句也是类似的处理过程。

所以可以用Symbol.iterator来检测对象是否为可迭代对象：

function isIterator(obj) {
    // return typeof obj[Symbol.iterator] === "function";   // 这种方法也可以选用
    return Object.prototype.toString.call( obj[Symbol.iterator] ) === "[object Function]";
}
console.log(isIterator([10, 2, 3, 4, 5]));      // true
console.log(isIterator(new Set()));             // true
console.log(isIterator(new Map()));             // true
console.log(isIterator("abc"));                 // true

生成器

生成器是一种返回迭代器的函数，通过function关键字后的星号(*)来表示，函数中会用到新的关键字yield。

function *createIterator(item) {
    for(let i=0; i<item.length; i++){
        yield item[i];
    }
}

var it = createIterator([10, 2, 4, 5, 6]);  // 生成器函数执行返回一个新的迭代器实例it
// 调用迭代器it的next()方法
console.log(it.next());   // {value: 10, done: false}
console.log(it.next());   // {value: 2, done: false}
console.log(it.next());   // {value: 4, done: false}
console.log(it.next());   // {value: 5, done: false}
console.log(it.next());   // {value: 6, done: false}
console.log(it.next());   // {value: undefined, done: true}
----------------------------------------
// 注意，以下代码与上面不在同一个执行流程中
// 或者使用迭代器统一遍历器 for...of 
for(var v of it){
    console.log(v);     // 10  2  4  5  6
}

从上例可以看到，使用了ES6的生成器，明显简化迭代器的创建过程，给生成器函数createIterator()传入一个item数组，函数内部，for循环不断从数组中生成新的元素放入迭代器中，每遇到一个yield语句循环都会停止；每次调用迭代器的next()方法，循环便继续运行并停止在下一条yield语句处。

生成器函数createIterator()执行后创建的迭代器赋值给变量it，变量it就作为这个迭代器的引用。既可以通过手工调用next()方法来执行迭代过程，也可以使用for..of..来完成迭代过程。

通过生成器给迭代器传参

在生成器函数内部使用yield关键字暂停，在该函数执行返回的迭代器上调用next()获得暂停时的返回值。其实next()方法可以接收参数，这个参数的值会代替生成器内部上一条yield语句的返回值。

// 生成器
function *createIterator() {
    var first = yield 2;
    var second = yield first * 3;
    yield second + 3;
}

// 创建迭代器实例
var it = createIterator();

// 启动迭代器
it.next();      // {value: 2, done: false}
it.next(4);     // {value: 12, done: false}
it.next(7);     // {value: 10, done: false}
it.next();      // {value: undefined, done: true}

最后总结下，迭代器是可迭代对象，具有Symbol.iterator方法和next()方法，可以通过for..of代替普通for循环来迭代，省去循环引用变量，简化了循环过程。而生成器是创建迭代器的函数，生成器函数内部有yield关键字来提供暂停接口，作为创建的迭代器调用next()方法执行的节点。生成器函数与普通函数的区别是前者在function关键字后有星号(*)，其他则和普通函数一样，可以传参和返回值。迭代器的next()方法可以传入参数，传入的参数值将会代替迭代器内上一条yield语句的返回值。

喜欢本文请扫下方二维码，关注微信公众号： 前端小二，查看更多我写的文章哦，多谢支持。