javascript迭代器和生成器（一）

在看过官方文档和《你不知道的javascript 中卷》之后，觉得还是应该写点什么总结一下，但是这个涉及到的点很多，感觉不太能够在单篇文章的篇幅之内能描述完全。

接下来我还是尽可能的描述一下，让大家理解过程，应用的地方有很多。

目录

自定义迭代器

生成器

---

自定义迭代器

比如迭代器，官网给出一个自定义迭代器的例子：

function makeRangeIterator(start = 0, end = Infinity, step = 1) {
    let nextIndex = start;
    let iterationCount = 0;

    const rangeIterator = {
       next: function() {
           let result;
           if (nextIndex < end) {
               result = { value: nextIndex, done: false }
               nextIndex += step;
               iterationCount++;
               return result;
           }
           return { value: iterationCount, done: true }
       }
    };
    return rangeIterator;
}

let it = makeRangeIterator(1, 10, 2);

let result = it.next();
while (!result.done) {
 console.log(result.value); // 1 3 5 7 9
 result = it.next();
}

console.log("Iterated over sequence of size: ", result.value); // 5

照着敲一下理解下，这里其实是为了讲解生成器做铺垫，已经构造出了返回的result对象中的两个属性，一个是value，一个是done。

官网给出的迭代器的解释：

迭代器和生成器

生成器

接下来我来重点解释下生成器：

来，我们开门见山，生成器就是一类特殊的函数，可以一次或多次启动和停止，并不一定非得要完成。

虽然自定义的迭代器是一个有用的工具，但由于需要显式地维护其内部状态，生成器函数提供了一个强大的选择：它允许你定义一个包含自有迭代算法的函数， 同时它可以自动维护自己的状态。

来看一下代码：

function* makeRangeIterator(start = 0, end = Infinity, step = 1) {
    for (let i = start; i < end; i += step) {
        yield i;
    }
}
var a = makeRangeIterator(1,10,2)
a.next() // {value: 1, done: false}
a.next() // {value: 3, done: false}
a.next() // {value: 5, done: false}
a.next() // {value: 7, done: false}
a.next() // {value: 9, done: false}
a.next() // {value: undefined, done: true}

好奇怪，这里出现来一个yield，这个是什么意思呢？yield大家暂时先理解为暂停并返回一个值的意思。

这里第一个a.next();启动生成器，执行到yield i暂停，并返回i，此时返回的对象里面的value是1

记住：每次调用next()，会返回一个新的Generator（生成器），但这个Generator只能迭代一次。

用形象化的语言描述：每次调用next()，就是提出一个问题，生成器要给我的下一个值是什么？而生成器返回的东西有两种返回方式，一种是yield返回，一种是return返回。

以第一次为例，回答问题：这里生成器返回给next(...)的东西为Generator对象{value: 1, done: false}，value值是yield表达式的值。

然后依次返回的Generator为

{value: 3, done: false}
{value: 5, done: false}
{value: 7, done: false}
{value: 9, done: false}

最后一次返回的value是undefined，done为true，表示结束。
{value: undefined, done: true}

最后的value为什么是undefined？因为函数结束了？？

生成器返回值来源就是两种，一种yield暂停返回值，一种是return返回值，这里循环结束只剩return了，因为函数没有显示返回，就是默认隐式返回undefined，所以这里是undefined。是不是最后一次返回的生成器对象value都是undefined呢？不是的，我们往下看吧！

理解了吗？接下来我们往下看来测试你是否理解了

function *foo(x) {
    var y = x * (yield "Hello"); // 暂停并返回"Hello"
    return y;
}

var it = foo(6); 

var res = it.next(); // {value:"Hello", done:false}
console.log(res.value); // "Hello"

res = it.next(7); // {value:42, done:true}
console.log(res.value); // 42

var it = foo(6);这里it是一个控制生成器的迭代器，当然你也可以理解为引用 it 指向生成器*foo(...)对象，每次构建这样的一个迭代器it，实际上就隐式的构建了生成器的一个实例，然后通过这个迭代器来控制这个生成器实例。

var res = it.next();留下一个问题，生成器*foo(...)要给我的下一个值是什么？去看生成器，yield "Hello"表达式回答了这个问题，执行到yield "Hello"的时候暂停，并返回value为"Hello"的Generator对象{value:"Hello", done:false}

res = it.next(7); 留下一个问题，生成器*foo(...)要给我的下一个值是什么？此时传入的7是赋值给了yield表达式，这里就是yield和next(...)的双向消息传递！！（关于双向消息传递我们下一个例子再讲）

此时没有yield来回答问题了，那么由 return 来回答！返回给next(...)的东西就由return返回。x为上一次的next传入的值6，yield表达式为本次next传入的7，所以y为42，return 42;

it.next(7)的执行返回的对象为{value:42, done:true}，因为函数结束了，done就为true。

记住：启动生成器时的第一个next()一定要用不带参数的next()，因为所有的浏览器都会丢弃传递给第一个next()的参数

看到这里，我想你应该理解了最后一次返回的时候value是undefined还是具体值的问题，就是看你生成器函数是否显式return，有就是你return的值，没有就是默认undefined.

相似例子说明：

function *foo(x) {
    var y = x * (yield); // 暂停并返回undefined
    return y;
}

var it = foo(6); 

var res = it.next(); // {value:undefined, done:false}
console.log(res.value); // "Hello"

res = it.next(7); // {value:42, done:true}
console.log(res.value); // 42

不同点就是只有yield，暂停并返回undefined。

如果你看懂了下一个例子，你就是理解了yield和next(...)的双向消息传递

function *foo() {
    var x = yield 2;
    ++z;
    var y = yield(x * z);
    console.log(x, y, z);
}

var z = 1;

var it1 = foo();
var it2 = foo();

var val1 = it1.next().value; // 2, yield表达式暂停并返回2
var val2 = it2.next().value; // 2, yield表达式暂停并返回2

val1 = it1.next(val2 * 10).value; // 40
val2 = it2.next(val1 * 5).value; // 600

it1.next(val2 / 2); // y:300   20  300  3
it2.next(val1 / 4); // y:10    200 10 3

val1 = it1.next(val2 * 10).value; //40

这里it1.next参数传进去val2*10=20，传进去20给yield表达式，然后赋值给x，所以x为20，然后++z，z为2，接着执行到下一个yield暂停，返回表达式的值yield(x * z)就是20*2=40，所以这里是40

val2 = it2.next(val1 * 5).value; // 600

这里it2.next传进去的是val1*5=200，传进去200给yield表达式，然后赋值给x，所以x为200，然后++z，z为3，接着执行到下一个yield暂停，返回表达式的值yield(x * z)就是200*3=600，所以这里是600

最后it1和it2迭代器再次next，这次就是执行到函数结束了，

it1的next执行后y为300，x，y，z分别为20， 300， 3

it2的next执行后y为10，x，y，z分别为200， 10， 3

最后生成器给出的值都为{value:undefined,done:true}，没有什么变量接收。

yield和next(...)双向消息传递就是这个next(...)传参数给上一次暂停的yield表达式，从而进行下一次计算，而执行到下一次yield的时候，暂停返回的生成器对象中的value键的值就是yield表达式的值。

yield ...和next(...)这一对组合起来，在生成器的执行过程中构成了一个双向消息传递系统。

知识扩展：

function * iterator02(end_value)
{
  for(let i = 0; i < end_value; i++)
  {
    yield i;
  }
}

for (let n of iterator02(10))
{
  console.log(n) ;
}

let numbers = [ ... iterator02(20) ] ;

let [a, b, c, ... others] = iterator02(8) ;

console.log(numbers) ;
console.log(a, b, c) ;
console.log(others) ;

运行结果：

记住：[...]语法，解构赋值语法，for循环和forEach等循环语法，实质就是iterator.next()，为什么这么说呢？

来看看，上面的例子稍微变一变！

function * iterator02(end_value)
{
  for(let i = 0; i < end_value; i++)
  {
    yield i;
  }
}
let a = iterator02(10);
let numbers = [...a];
console.log(a.next()); //这个是啥？？？

最后打印

{value: undefined, done: true}

明明才准备启动生成器，结果迭代已经执行完了，充分说明这[...a]语法是不断next()直到结束！

记住，凡是能迭代的，原理是iterator.next()去迭代的，都会有这个属性。

官网给的定义如下：

       为了实现可迭代，一个对象必须实现 @@iterator 方法，这意味着这个对象（或其原型链中的任意一个对象）必须具有一个带 Symbol.iterator 键（key）的属性。

===============Talk is cheap, show me the code================