1 简介
1.1 基本概念
Generator 函数是 ES6 提供的一种异步编程解决方案， 语法行为与传统函数完全不同。 本章详细介绍 Generator 函数的语法和 API， 它的异步编程应用请看《 异步操作》 一章。
Generator 函数有多种理解角度。 从语法上， 首先可以把它理解成， Generator 函数是一个状态机， 封装了多个内部状态。
执行 Generator 函数会返回一个遍历器对象， 也就是说， Generator 函数除了状态机， 还是一个遍历器对象生成函数。 返回的遍历器对象， 可以依次遍历 Generator 函数内部的每一个状态。
形式上， Generator 函数是一个普通函数， 但是有两个特征。 一是， function关键字与函数名之间有一个星号； 二是， 函数体内部使用yield语句， 定义不同的内部状态（ yield 语句在英语里的意思就是“ 产出”）。
function* helloWorldGenerator() {
yield 'hello';
yield 'world';
return 'ending';
}
var hw = helloWorldGenerator();然后， Generator 函数的调用方法与普通函数一样， 也是在函数名后面加上一对圆括号。 不同的是， 调用 Generator 函数后， 该函数并不执行， 返回的也不是函数运行结果， 而是一个指向内部状态的指针对象， 也就是上一章介绍的遍历器对象（ Iterator Object）。
下一步， 必须调用遍历器对象的 next 方法， 使得指针移向下一个状态。 也就是说， 每次调用next方法， 内部指针就从函数头部或上一次停下来的地方开始执行， 直到遇到下一个yield语句（ 或return语句） 为止。 换言之， Generator 函数是分段执行的， yield语句是暂停执行的标记， 而next方法可以恢复执行。
hw.next()
// { value: 'hello', done: false }
hw.next()
// { value: 'world', done: false }
hw.next()
// { value: 'ending', done: true }
hw.next()
// { value: undefined, done: true }第一次调用， Generator 函数开始执行， 直到遇到第一个yield语句为止。 next方法返回一个对象， 它的value属性就是当前yield语句的值hello， done属性的值 false， 表示遍历还没有结束。
第二次调用， Generator 函数从上次yield语句停下的地方， 一直执行到下一个yield语句。 next方法返回的对象的value属性就是当前yield语句的值world， done属性的值 false， 表示遍历还没有结束。
第三次调用， Generator 函数从上次yield语句停下的地方， 一直执行到return语句（ 如果没有return 语句， 就执行到函数结束）。 next方法返回的对
象的value属性， 就是紧跟在return语句后面的表达式的值（ 如果没有return语句， 则value属性的值为 undefined）， done属性的值 true， 表示遍历已经结束。
第四次调用， 此时 Generator 函数已经运行完毕， next方法返回对象的value属性为 undefined， done属性为 true。 以后再调用next方法， 返回的都是这个值。
总结一下， 调用 Generator 函数， 返回一个遍历器对象， 代表 Generator 函数的内部指针。 以后， 每次调用遍历器对象的next方法， 就会返回一个有着value和done两个属性的对象。 value属性表示当前的内部状态的值， 是yield语句后面那个表达式的值； done属性是一个布尔值， 表示是否遍历结束。
ES6 没有规定， function关键字与函数名之间的星号， 写在哪个位置。 这导致下面的写法都能通过。
function * foo(x, y) {···}
function *foo(x, y) {···}
function* foo(x, y) {···}
function*foo(x, y) {···}1.2 yield 语句
由于 Generator 函数返回的遍历器对象， 只有调用next方法才会遍历下一个内部状态， 所以其实提供了一种可以暂停执行的函数。 yield语句就是暂停标志。
遍历器对象的next方法的运行逻辑如下。
（ 1） 遇到yield语句， 就暂停执行后面的操作， 并将紧跟在yield后面的那个表达式的值， 作为返回的对象的value属性值。
（ 2） 下一次调用next方法时， 再继续往下执行， 直到遇到下一个yield语句。
（ 3） 如果没有再遇到新的yield语句， 就一直运行到函数结束， 直到return语句为止， 并将return语句后面的表达式的值， 作为返回的对象的value属性值。
（ 4） 如果该函数没有return语句， 则返回的对象的value属性值为undefined。
需要注意的是， yield语句后面的表达式， 只有当调用next方法、 内部指针指向该语句时才会执行， 因此等于为 JavaScript 提供了手动的“ 惰性求值”（ Lazy Evaluation） 的语法功能。
function* gen() {
yield 123 + 456;
}Generator 函数可以不用yield语句， 这时就变成了一个单纯的暂缓执行函数。
function* f() {
console.log(' 执行了！ ')
}
var generator = f();
setTimeout(function() {
generator.next()
}, 2000);另外需要注意， yield语句不能用在普通函数中， 否则会报错。
(function() {
yield 1;
})()
// SyntaxError: Unexpected number下面是另外一个例子。
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;
}
}
};
for(var f of flat(arr)) {
console.log(f);
}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, 6console.log('Hello' + yield); // SyntaxError
console.log('Hello' + yield 123); // SyntaxError
console.log('Hello' + (yield)); // OK
console.log('Hello' + (yield 123)); // OKfoo(yield 'a', yield 'b'); // OK
let input = yield; // OK上一章说过， 任意一个对象的Symbol.iterator方法， 等于该对象的遍历器生成函数， 调用该函数会返回该对象的一个遍历器对象。
由于 Generator 函数就是遍历器生成函数， 因此可以把 Generator 赋值给对象的Symbol.iterator属性， 从而使得该对象具有 Iterator 接口。
var myIterable = {};
myIterable[Symbol.iterator] = function*() {
yield 1;
yield 2;
yield 3;
};
[...myIterable] // [1, 2, 3]Generator 函数执行后， 返回一个遍历器对象。 该对象本身也具有Symbol.iterator属性， 执行后返回自身。
function* gen() {
// some code
}
var g = gen();
g[Symbol.iterator]() === g
// true2 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方法提供参数， 返回结果就完全不一样了。 上面代码第一次调用b的next方法时， 返回x + 1 的值 6； 第二次调用next方法， 将上一次yield语句的值设为 12， 因此y等于 24， 返回y / 3 的值 8； 第三次调用next方法， 将上一次yield语句的值设为 13， 因此z等于 13， 这时x等于 5， y等于 24， 所以return语句的值等于 42。
注意， 由于next方法的参数表示上一个yield语句的返回值， 所以第一次使用next方法时， 不能带有参数。 V8 引擎直接忽略第一次使用next方法时的参数， 只有从第二次使用next方法开始， 参数才是有效的。 从语义上讲， 第一个next方法用来启动遍历器对象， 所以不用带有参数。
如果想要第一次调用next方法时， 就能够输入值， 可以在 Generator 函数外面再包一层。
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!再看一个通过next方法的参数， 向 Generator 函数内部输入值的例子。
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. b3 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下面是一个利用 Generator 函数和for...of循环， 实现斐波那契数列的例子。
function* fibonacci() {
let [prev, curr] = [0, 1];
for(;;) {
[prev, curr] = [curr, prev + curr];
yield curr;
}
}
for(let n of fibonacci()) {
if(n > 1000) break;
console.log(n);
}利用for...of循环， 可以写出遍历任意对象（ object） 的方法。 原生的 JavaScript 对象没有遍历接口， 无法使用for...of循环， 通过 Generator 函数为它加上这个接口， 就可以用了。
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: Doefunction* 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: Doefunction* numbers() {
yield 1
yield 2
return 3
yield 4
}
// 扩展运算符
[...numbers()] // [1, 2]
// Array.form 方法
Array.from(numbers()) // [1, 2]
// 解构赋值
let [x, y] = numbers();
x // 1
y // 2
// for...of 循环
for(let n of numbers()) {
console.log(n)
}
// 1
// 2Generator 函数返回的遍历器对象， 都有一个throw方法， 可以在函数体外抛出错误， 然后在 Generator 函数体内捕获。
var g = function*() {
try {
yield;
} catch(e) {
console.log(' 内部捕获 ', e);
}
};
var i = g();
i.next();
try {
i.throw('a');
i.throw('b');
} catch(e) {
console.log(' 外部捕获 ', e);
}
// 内部捕获 a
// 外部捕获 bthrow方法可以接受一个参数， 该参数会被catch语句接收， 建议抛出Error对象的实例。
var g = function*() {
try {
yield;
} catch(e) {
console.log(e);
}
};
var i = g();
i.next();
i.throw(new Error(' 出错了！ '));
// Error: 出错了！ (…)var g = function*() {
while(true) {
try {
yield;
} catch(e) {
if(e != 'a') throw e;
console.log(' 内部捕获 ', e);
}
}
};
var i = g();
i.next();
try {
throw new Error('a');
throw new Error('b');
} catch(e) {
console.log(' 外部捕获 ', e);
}
// 外部捕获 [Error: a]如果 Generator 函数内部没有部署try...catch代码块， 那么throw方法抛出的错误， 将被外部try...catch代码块捕获。
var g = function*() {
while(true) {
yield;
console.log(' 内部捕获 ', e);
}
};
var i = g();
i.next();
try {
i.throw('a');
i.throw('b');
} catch(e) {
console.log(' 外部捕获 ', e);
}
// 外部捕获 a如果 Generator 函数内部和外部， 都没有部署try...catch代码块， 那么程序将报错， 直接中断执行。
var gen = function* gen() {
yield console.log('hello');
yield console.log('world');
}
var g = gen();
g.next();
g.throw();
// hello
// Uncaught undefinedthrow方法被捕获以后， 会附带执行下一条yield语句。 也就是说， 会附带执行一次next方法。
var gen = function* gen() {
try {
yield console.log('a');
} catch(e) {
// ...
}
yield console.log('b');
yield console.log('c');
}
var g = gen();
g.next() // a
g.throw() // b
g.next() // c另外， throw命令与g.throw方法是无关的， 两者互不影响。
var gen = function* gen() {
yield console.log('hello');
yield console.log('world');
}
var g = gen();
g.next();
try {
throw new Error();
} catch(e) {
g.next();
}
// hello
// world这种函数体内捕获错误的机制， 大大方便了对错误的处理。 多个yield语句， 可以只用一个try...catch代码块来捕获错误。 如果使用回调函数的写法， 想要捕获多个错误， 就不得不为每个函数内部写一个错误处理语句， 现在只在 Generator 函数内部写一次catch语句就可以了。
Generator 函数体外抛出的错误， 可以在函数体内捕获； 反过来， Generator 函数体内抛出的错误， 也可以被函数体外的catch捕获。
function* foo() {
var x = yield 3;
var y = x.toUpperCase();
yield y;
}
var it = foo();
it.next(); // { value:3, done:false }
try {
it.next(42);
} catch(err) {
console.log(err);
}一旦 Generator 执行过程中抛出错误， 且没有被内部捕获， 就不会再执行下去了。 如果此后还调用next方法， 将返回一个value属性等于undefined、 done属性等于true的对象， 即 JavaScript 引擎认为这个 Generator 已经运行结束了。
function* g() {
yield 1;
console.log('throwing an exception');
throw new Error('generator broke!');
yield 2;
yield 3;
}
function log(generator) {
var v;
console.log('starting generator');
try {
v = generator.next();
console.log(' 第一次运行 next 方法 ', v);
} catch(err) {
console.log(' 捕捉错误 ', v);
}
try {
v = generator.next();
console.log(' 第二次运行 next 方法 ', v);
} catch(err) {
console.log(' 捕捉错误 ', v);
}
try {
v = generator.next();
console.log(' 第三次运行 next 方法 ', v);
} catch(err) {
console.log(' 捕捉错误 ', v);
}
console.log('caller done');
}
log(g());
// starting generator
// 第一次运行 next 方法 { value: 1, done: false }
// throwing an exception
// 捕捉错误 { value: 1, done: false }
// 第三次运行 next 方法 { value: undefined, done: true }
// caller done
2150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
