Generator 函数简单介绍 ( yield 关键字)

详细文档：ECMAScript 6 Generator 函数的语法（阮一峰）

初识 Generator 函数

Generator 函数有多种理解角度。语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。

执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。

形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。

function* helloWorldGenerator() {
	yield 'hello'
	yield 'world'
	return 'end'
}

const hw = helloWorldGenerator()
console.log(hw.next())	// { value: 'hello', done: false }
console.log(hw.next())	// { value: 'world', done: false }
console.log(hw.next())	// { value: 'end', done: true }
console.log(hw.next())	// { value: undefined, done: true }

上面代码定义了一个 Generator 函数helloWorldGenerator，它内部有两个yield表达式（hello和world），即该函数有三个状态：hello，world 和 return 语句（结束执行）。

然后，Generator 函数的调用方法与普通函数一样，也是在函数名后面加上一对圆括号。不同的是，调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，也就是遍历器对象（Iterator Object）。

下一步，必须调用遍历器对象的next方法，使得指针移向下一个状态。也就是说，每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止。换言之，Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。

上面代码一共调用了四次next方法：

• 第一次调用，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属性是一个布尔值，表示是否遍历结束。

yield 关键字

由于 Generator 函数返回的遍历器对象，只有调用next方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。

遍历器对象的next方法的运行逻辑如下：

（1）遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值；

（2）下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式；

（3）如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值；

（4）如果该函数没有return语句，则返回的对象的value属性值为undefined；

function* helloWorldGenerator() {
	console.log('在 hello 状态之前执行的操作')
	yield 'hello'
	console.log('在 hello 状态到 word 状态之间执行的操作')
	yield 'world'
	console.log('在 word 状态之后执行的操作')
	return 'end'
}

const hw = helloWorldGenerator()
console.log(hw.next())
console.log(hw.next())
console.log(hw.next())
console.log(hw.next())

// 输出结果如下：
// 在 hello 状态之前执行的操作
// { value: 'hello', done: false }
// 在 hello 状态到 word 状态之间执行的操作
// { value: 'world', done: false }
// 在 word 状态之后执行的操作
// { value: 'end', done: true }
// { value: undefined, done: true }

与 Iterator 接口的关系

任意一个对象的Symbol.iterator方法，等于该对象的遍历器生成函数，调用该函数会返回该对象的一个遍历器对象。

由于 Generator 函数就是遍历器生成函数，因此可以把 Generator 赋值给对象的Symbol.iterator属性，从而使得该对象具有 Iterator 接口。

const obj = {}
obj[Symbol.iterator] = function* () {
	yield 1
	yield 2
	yield 3
}

console.log([...obj])	// [ 1, 2, 3 ]

上面代码中，Generator 函数赋值给Symbol.iterator属性，从而使得myIterable对象具有了 Iterator 接口，可以被...运算符遍历了。

next 方法的参数

yield表达式本身没有返回值，或者说总是返回undefined。next方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值。

function* fnGenerator() {
	const res = yield 2
	console.log(res)
	return 'end'
}

const fn = fnGenerator()
console.log(fn.next())
console.log(fn.next(20))
console.log(fn.next())

// 输出如下
// { value: 2, done: false }
// 20
// { value: 'end', done: true }
// { value: undefined, done: true }

注意，由于next方法的参数表示上一个yield表达式的返回值，所以在第一次使用next方法时，传递参数是无效的。V8 引擎直接忽略第一次使用next方法时的参数，只有从第二次使用next方法开始，参数才是有效的。从语义上讲，第一个next方法用来启动遍历器对象，所以不用带有参数。

for...of 循环

for...of循环可以自动遍历 Generator 函数运行时生成的Iterator对象，且此时不再需要调用next方法。

function* foo() {
	yield 1
	yield 2
	yield 3
	return 'end'
}

for (let n of foo()) {
	console.log(n)
}

// 输出结果如下：
// 1
// 2
// 3

上面代码使用for...of循环，依次显示 3 个yield表达式的值。这里需要注意，一旦next方法的返回对象的done属性为true，for...of循环就会中止，且不包含该返回对象，所以上面代码的return语句返回的end，不包括在for...of循环之中。

function* fibonacci() {
	let [prev, curr] = [0, 1]
	for (;;) {
		yield curr
		;[prev, curr] = [curr, prev + curr]
	}
}

// 打印最大值小于 100 的所有斐波拉切数列
for (let n of fibonacci()) {
	if (n > 100) break;
	console.log(n)
}

// 输出结果如下：
// 1
// 1
// 2
// 3
// 5
// 8
// 13
// 21
// 34
// 55
// 89

利用for...of循环，可以写出遍历任意对象（object）的方法。原生的 JavaScript 对象没有遍历接口，无法使用for...of循环，通过 Generator 函数为它加上这个接口，就可以用了。

// 该 Generator 函数功能等同于 Object.entries()
function* objEntries(obj) {
	let propKeys = Object.keys(obj)
	for (let propKey of propKeys) {
		yield [propKey, obj[propKey]]
	}
}

let person = { name: '张三', gender: '男', age: 22 }

for (let [key, value] of objEntries(person)) {
	console.log(`${key}: ${value}`)
}

// 输出结果如下：
// name: 张三
// gender: 男
// age: 22

另一种方案（设置对象的 Symbol.iterator 接口）：

// 通过 Generator 函数
function* objEntriesIterator() {
	let propKeys = Object.keys(this)
	for (let propKey of propKeys) {
		yield [propKey, this[propKey]]
	}
}

let person = { name: '张三', gender: '男', age: 22 }
person[Symbol.iterator] = objEntriesIterator

for (let [key, value] of person) {
	console.log(`${key}: ${value}`)
}

// 输出结果如下：
// name: 张三
// gender: 男
// age: 22

除了for...of循环以外，扩展运算符（...）、解构赋值和Array.from方法内部调用的，都是遍历器接口。这意味着，它们都可以将 Generator 函数返回的 Iterator 对象，作为参数。

function* numbers() {
	yield 1
	yield 2
	return 3
	yield 4
}

// 扩展运算符
console.log([...numbers()])	// [ 1, 2 ]

// 结构赋值
let [ a, b, c, d ] = numbers()
console.log(a, b, c, d)	// 1 2 undefined undefined

// Array.from()
console.log(Array.from(numbers()))	// [ 1, 2 ]

注意

• yield表达式只能用在 Generator 函数里面，用在其他地方都会报错；