ES6 Generator生成器函数执行输出逻辑疑问求解

为什么next()返回键值对格式 #

Generator函数的next()方法固定返回包含两个属性的对象：

• value：当前阶段返回的值，来自yield后面的表达式或者return语句的返回值
• done：布尔值，标识Generator函数是否已经执行完毕，没有更多的内容可以返回

逐行执行逻辑拆解 #

你给出的代码执行过程如下：

function *GeneratorFunction(i) { 
  while (i < 4) { 
    i += yield i; 
  } 
  return i;
}
var gen = GeneratorFunction(3);
console.log(gen.next(1));
console.log(gen.next(1));
console.log(gen.next(1));

1. 执行var gen = GeneratorFunction(3)时，Generator函数不会立即执行内部代码，仅返回一个迭代器对象，此时函数内部逻辑还未运行。
2. 执行第一个gen.next(1)：
   首次调用next()时传入的参数会被直接忽略，因为此时还没有遇到等待接收值的yield表达式。进入函数后i初始值为3，满足i < 4的循环条件，执行到i += yield i时，会先计算yield后面的i值为3，将该值作为返回的value，同时暂停函数执行，等待下一次next()传值。所以输出为{value: 3, done: false}。
3. 执行第二个gen.next(1)：
   本次传入的1会作为上一次暂停的yield i表达式的返回值，代入到i += yield i等价于执行i = 3 + 1，计算后i的值为4。回到while判断条件i < 4不成立，退出循环，执行return i，将4作为返回的value，同时Generator执行完毕，done变为true。所以输出为{value: 4, done: true}，也就是你标注第一个问号的输出。
4. 执行第三个gen.next(1)：
   Generator已经执行完毕后，所有后续的next()调用都不会再执行函数内的逻辑，固定返回value为undefined，done为true的结果。所以输出为{value: undefined, done: true}，也就是你标注第二个问号的输出。
5. 最后单独的undefined：这是运行环境（浏览器/Node.js控制台）的默认行为，console.log()函数本身的返回值就是undefined，控制台会自动打印每一行执行语句的返回值，你连续执行了三次console.log，最后会输出最后一个console.log的返回值也就是undefined，也就是你标注第三个问号的输出。

内容的提问来源于stack exchange，提问作者Farruk