Generator 函數基本用法以及原理探究

1. 基本使用

generator 函數是 ES6 提供的一種異步程式設計解決方案

一個基本的 generator 函數如下

/*
 * 特征
 * 1. 函數帶有 * 符号
 * 2. 函數内可以使用 yield 表達式
 * 3. 傳回值為 generator 執行個體 
 * 4. 傳回的執行個體可以調用 next 等一系列内置方法
*/
function* generatorFn() {
	yield 'hello';
	yield 'world';
	return 'ending';
}
const ge = generatorFn()  // generatorFn {} | 傳回generator執行個體
ge.next()
           

1.1. yield

yield 表達式是暫停标記；函數執行到此處會暫停

function* generatorFn() {
	const list = [{}]
	console.log(list) // 注意：調用 next 函數執行到這一行後，遇到 yield 表達式，則停止執行
	yield 'hello';
	yield 'world';
	return 'ending';
}
const ge = generatorFn()
ge.next() // 注意：要調用 next 方法才會開始執行
           

1.2. next

next

函數，是

generator

執行個體中的方法。

1. 啟動函數的執行
2. 可以将停止的

   generator

   函數恢複執行，直到遇見下一個

   yield

   表達式
3. 遇到 yield 會停止執行

function* generatorFn() {
	const list = [{}]
	console.log(list)
	yield 'hello';
	yield 'world';
	return 'ending';
}
const ge = generatorFn()
ge.next() // [{}];  { value: 'hello', done: false }