《你不知道的JavaScript》：弄清生成器与迭代器的区别
《你不知道的JavaScript》：弄清生成器与迭代器的区别
这篇将整理下生成器与迭代器的区别。这两个东西初学的时候我是混淆的，尤其《你不知道的Javascript》书中没有进行基础的介绍，我看了之后还特地翻了下其他资料才弄清，所以在本书看到生成器与迭代器时，要先把两者弄清，才能看的下去。
迭代器
迭代器的出现有其原因，在《你不知道的JavaScript》：迭代器Iterator的背景梳理中也讲到：因为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语句的返回值。
-------------------------------- 热门文章 --------------------------------
设计模式>>>