ES6 从入门到精通 # 15：生成器 Generator 的用法

Posted 2022-08-16 凯小默

说明

ES6 从入门到精通系列（全23讲）学习笔记。

generator 函数

可以通过 yield 关键字将函数挂起，为了改变执行流提供了可能，同时为了做异步编程提供了方案

跟普通函数的区别：

1. function 后面，函数名之前有个 * 号
2. 只能在函数内部使用 yield 表达式，让函数挂起

function * func() 
	yield 3;
	yield 1;
	yield 2;

// 返回一个遍历器，可以调用 next()
let kaimo = func();
console.log(kaimo)
console.log(kaimo.next())
console.log(kaimo.next())
console.log(kaimo.next())
console.log(kaimo.next())

总结：generator 函数是分段执行的，yield 语句是暂停执行，而 next() 恢复执行

function * func() 
	console.log("start")
	let x = yield 3;
	console.log("x-->", x)
	let y = yield 1;
	console.log("y-->", y)
	let z = yield 2;
	console.log("z-->", z)
	return x + y + z;

let kaimo = func();
console.log(kaimo.next(10))
console.log(kaimo.next(20))
console.log(kaimo.next(30))
console.log(kaimo.next(40))
console.log(kaimo.next(50))

这里的 let x = yield 2; 表达式里的 x 不是 yield 2 返回值，它是 next() 调用恢复当前 yield 执行传入的实参。所以这里的 x 是 20。

使用场景

为不具备 iterator 接口的对象提供遍历操作

function * objectEntries(obj) 
	// 获取对象的所有keys保存到数组 [name, value]
	const propKeys = Object.keys(obj);
	for(const propkey of propKeys) 
		yield [propkey, obj[propkey]]
	

const kaimo = 
	name: "凯小默",
	value: "kaimo313"

kaimo[Symbol.iterator] =  objectEntries(kaimo);
console.log(kaimo);

遍历：

for(let [key, value] of kaimo[Symbol.iterator]) 
	console.log(key, value)