摘要：從語(yǔ)法上，可以將函數(shù)理解為一個(gè)狀態(tài)機(jī)，它封裝了多個(gè)內(nèi)部狀態(tài)。返回的遍歷器對(duì)象，可以依次遍歷函數(shù)內(nèi)部的每一個(gè)狀態(tài)。

Generator函數(shù)是ES 6提供的一種異步編程解決方案。從語(yǔ)法上，可以將Generator函數(shù)理解為一個(gè)狀態(tài)機(jī)，它封裝了多個(gè)內(nèi)部狀態(tài)。執(zhí)行Generator函數(shù)會(huì)返回一個(gè)遍歷器對(duì)象，也就是說(shuō)Generator函數(shù)除了是一個(gè)狀態(tài)機(jī)，還是一個(gè)遍歷器對(duì)象生成函數(shù)。返回的遍歷器對(duì)象，可以依次遍歷Generator函數(shù)內(nèi)部的每一個(gè)狀態(tài)。

Generator最大的好處就是函數(shù)可以被暫停執(zhí)行并保持上下文，這個(gè)運(yùn)行方式在處理那些需要暫停的任務(wù)時(shí)非常有用，而被維持的上下文是為了在將來(lái)對(duì)運(yùn)行環(huán)境進(jìn)行恢復(fù)。

Generator函數(shù)以function *申明開頭，并在需要暫停運(yùn)行的地方添加yield關(guān)鍵字

function* myGenerator(){
    // A
    yield "foo"
    // B
}

執(zhí)行上面的myGenerator方法會(huì)創(chuàng)建一個(gè)Generator對(duì)象，我們可以通過(guò)next方法來(lái)控制函數(shù)執(zhí)行。運(yùn)行next方法會(huì)執(zhí)行myGenerator函數(shù)中的代碼，直到碰到下一個(gè)yield表達(dá)式（執(zhí)行完yield才暫停），此時(shí)yield后的表達(dá)式的值就被返回出去了，而且myGenerator的執(zhí)行就暫停了,當(dāng)我們?cè)俅芜\(yùn)行next方法時(shí)，myGenerator會(huì)在上次暫停的地方接著向下運(yùn)行。

const g = myGenerator()

const state01 = g.next() // {value: "foo", done: false}
const state02 = g.next() // {value: undefined, done: true}

yield是伴隨著Generator函數(shù)出現(xiàn)的，它允許我們返回多個(gè)值(多個(gè)狀態(tài))。然而我們只能在Generator中才能使用它。如果我們嘗試在回調(diào)函數(shù)中用yield一個(gè)值，即使在Generator函數(shù)內(nèi)部聲明的，也會(huì)拋出錯(cuò)誤

yield*是用來(lái)在一個(gè)Generator函數(shù)內(nèi)部調(diào)用另一個(gè)Generator函數(shù)的

function* foo(){
    yield "foo"
}
function* bar(){
    yield "bar"
    yield* foo()
    yield "bar again"
}

const b = bar()
b.next() // {value: "bar", done: false}
b.next() // {value: "foo", done: false}
b.next() // {value: "bar again", done: false}
b.next() // {value: undefined, done: true}

由于Generator方法會(huì)返回一個(gè)遍歷器對(duì)象(可遍歷對(duì)象)，因此我們可以使用一個(gè)遍歷方法，例如for-of遍歷該對(duì)象內(nèi)部的所有狀態(tài)（值）

for-of遍歷

// 接上一個(gè)的例子
for (let e of bar()) {
    console.log(e)
}
/* 依次輸出
bar
foo
bar again
*/

注意，b對(duì)應(yīng)的遍歷器對(duì)象已經(jīng)遍歷完畢，因此下面的例子只會(huì)輸出undefined
for (let e of b) {
    console.log(e)
}
// undefined 

解構(gòu)運(yùn)算實(shí)現(xiàn)遍歷

console.log([...bar()]) // ["bar", "foo", "bar again"]

我們可以在Generator函數(shù)中增加return語(yǔ)句

function* myGenerator(){
    yield "foo"
    yield "bar"
    return "done"
}

var g = myGenerator()

g.next() // {value: "foo", done: false}
g.next() // {value: "bar", done: false}
g.next() // {value: "done", done: true}
g.next() // {value: undefined, done: true}

但是如果使用for-of或者解構(gòu)運(yùn)算來(lái)遍歷遍歷器對(duì)象，則return后面的值將被忽略

for(let e of myGenerator()) {
    console.log(e)
}
// foo
// bar


console.log([...myGenerator])
// ["foo", "bar"]

ES6 Generator 探秘
ECMAScript 6 入門