共计 3417 个字符，预计需要花费 9 分钟才能阅读完成。
基本概念
- 状态机，封装了多个内部状态；
- 返回一个遍历器对象，通过改对象可以一次遍历 Generator 函数内部的每一个状态
- 带 * 号，yeild 表达式定义不同的内部状态；
- 调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，也就是遍历器对象；
- Generator 函数是分段执行的，yield 表达式是暂停执行的标记，而 next 方法可以恢复执行；
- 暂停标志
-
next（）方法允许逻辑
- 遇到 yield 表达式，就暂停执行后面的操作，并将紧跟在 yield 后面的那个表达式的值，作为返回的对象的 value 属性值；
- 下一次调用 next 方法时，再继续往下执行，直到遇到下一个 yield 表达式；
- 没有再遇到新的 yield 表达式，就一直运行到函数结束，直到 return 语句为止，并将 return 语句后面的表达式的值，作为返回的对象的 value 属性值；
- 如果该函数没有 return 语句，则返回的对象的 value 属性值为 undefined；
-
yield 表达式只能用在 Generator 函数里面，用在其他地方都会报错。
var arr = [1, [[2, 3], 4], [5, 6]]; var flat = function* (a) {a.forEach(function (item) {if (typeof item !== 'number') {yield* flat(item); } else {yield item; //forEach()的参数是一个普通函数使用 yield 会报错，可以使用 for 循环解决这个问题 } }); }; for (var f of flat(arr)){console.log(f); }使用 for 循环改正
var arr = [1, [[2, 3], 4], [5, 6]]; var flat = function* (a) { var length = a.length; for (var i = 0; i < length; i++) {var item = a[i]; if (typeof item !== 'number') {yield* flat(item); } else {yield item;} } }; for (var f of flat(arr)) {console.log(f); }// 1, 2, 3, 4, 5, 6 - yield 表达式如果用在另一个表达式之中，必须放在圆括号里面；
- yield 表达式用作函数参数或放在赋值表达式的右边，可以不加括号
与 Iterator 的关系
可以把 Generator 赋值给对象的 Symbol.iterator 属性，从而使得该对象具有 Iterator 接口
var myIterable = {};
myIterable[Symbol.iterator] = function* () {
yield 1;
yield 2;
yield 3;
};
[...myIterable] // [1, 2, 3]next()方法的参数
yield 表达式本身没有返回值，或者说总是返回 undefined。next 方法可以带一个参数，该参数就会被当作上一个 yield 表达式的 返回值。
function* f() {for(var i = 0; true; i++) {
var reset = yield i;
if(reset) {i = -1;}
}
}
var g = f();
g.next() // { value: 0, done: false}
g.next() // { value: 1, done: false}
g.next(true) // {value: 0, done: false}Generator 函数从暂停状态到恢复运行，它的上下文状态（context）是不变的。通过 next 方法的参数，就有办法在 Generator 函数开始运行之后，继续向函数体内部注入值。也就是说，可以在 Generator 函数运行的不同阶段，从外部向内部注入不同的值，从而调整函数行为。
分析以下代码允许的结果：
function* foo(x) {var y = 2 * (yield (x + 1));
var z = yield (y / 3);
return (x + y + z);
}
var a = foo(5);
a.next() // Object{value:6, done:false}
a.next() // Object{value:NaN, done:false}
a.next() // Object{value:NaN, done:true}
var b = foo(5);
b.next() // { value:6, done:false}
b.next(12) // {value:8, done:false}
b.next(13) // {value:42, done:true}next()传参，参数代表上一次 yeild 表达式返回的值，因此第一次使用 next()传参是无效的；
function* dataConsumer() {console.log('Started');
console.log(`1. ${yield}`);
console.log(`2. ${yield}`);
return 'result';
}
let genObj = dataConsumer();
genObj.next();
// Started
genObj.next('a')
// 1. a
genObj.next('b')
// 2. b如果想第一次调用 next()方法就能够输入值，可以在 Genrator 函数外再包一层
function wrapper(generatorFunction) {return function (...args) {let generatorObject = generatorFunction(...args);
generatorObject.next();
return generatorObject;
};
}
const wrapped = wrapper(function* () {console.log(`First input: ${yield}`);
return 'DONE';
});
wrapped().next('hello!')// First input: hello!上述代码在 wrapper 函数中，首先调用一次 next 方法，再返回遍历器对象。当用户自己调用 next 方法时，看起来就像是第一次调用，但实际上，这是第二次调用 next 方法。
for…of 循环
for…of 循环可以自动遍历 Generator 函数时生成的 Iterator 对象，且此时不再需要调用 next 方法。
function* foo() {
yield 1;
yield 2;
yield 3;
yield 4;
yield 5;
return 6;
}
for (let v of foo()) {console.log(v);
}
// 1 2 3 4 5这里需要注意，一旦 next 方法的返回对象的 done 属性为 true，for…of 循环就会中止；
Generator 给对象添加 Iterator
- 方法一
function* objectEntries(obj) {let propKeys = Reflect.ownKeys(obj);
for (let propKey of propKeys) {yield [propKey, obj[propKey]];
}
}
let jane = {first: 'Jane', last: 'Doe'};
for (let [key, value] of objectEntries(jane)) {console.log(`${key}: ${value}`);
}
// first: Jane
// last: Doe- 方法二将 Generator 函数加到对象的 Symbol.iterator 属性上面。
function* objectEntries() {let propKeys = Object.keys(this);
for (let propKey of propKeys) {yield [propKey, this[propKey]];
}
}
let jane = {first: 'Jane', last: 'Doe'};
jane[Symbol.iterator] = objectEntries;
for (let [key, value] of jane) {console.log(`${key}: ${value}`);
}
// first: Jane
// last: Doe【完】
作者简介：郑佳欢，芦苇科技 web 前端实习生，公司作品：口红挑战网红小游戏、服务端渲染官网。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发，专注于前端领域框架、交互设计、图像绘制、数据分析等研究。访问 www.talkmoney.cn 了解更多