ES6 Beginner to Mastery #15: Generator Usage

说明

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

generator 函数

可以通过 yield keyword suspends the function,为了改变执行流提供了可能,同时为了做异步编程提供了方案

difference from ordinary functions：

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() call to restore the current yield 执行传入的实参.所以这里的 x 是 20.

使用场景

为不具备 iterator An object of the interface provides traversal operations

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)
}