摘要：從語法上，可以將函數理解為一個狀態機，它封裝了多個內部狀態。返回的遍歷器對象，可以依次遍歷函數內部的每一個狀態。

Generator函數是ES 6提供的一種異步編程解決方案。從語法上，可以將Generator函數理解為一個狀態機，它封裝了多個內部狀態。執行Generator函數會返回一個遍歷器對象，也就是說Generator函數除了是一個狀態機，還是一個遍歷器對象生成函數。返回的遍歷器對象，可以依次遍歷Generator函數內部的每一個狀態。

Generator最大的好處就是函數可以被暫停執行并保持上下文，這個運行方式在處理那些需要暫停的任務時非常有用，而被維持的上下文是為了在將來對運行環境進行恢復。

Generator函數以function *申明開頭，并在需要暫停運行的地方添加yield關鍵字

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

執行上面的myGenerator方法會創建一個Generator對象，我們可以通過next方法來控制函數執行。運行next方法會執行myGenerator函數中的代碼，直到碰到下一個yield表達式（執行完yield才暫停），此時yield后的表達式的值就被返回出去了，而且myGenerator的執行就暫停了,當我們再次運行next方法時，myGenerator會在上次暫停的地方接著向下運行。

const g = myGenerator()

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

yield是伴隨著Generator函數出現的，它允許我們返回多個值(多個狀態)。然而我們只能在Generator中才能使用它。如果我們嘗試在回調函數中用yield一個值，即使在Generator函數內部聲明的，也會拋出錯誤

yield*是用來在一個Generator函數內部調用另一個Generator函數的

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方法會返回一個遍歷器對象(可遍歷對象)，因此我們可以使用一個遍歷方法，例如for-of遍歷該對象內部的所有狀態（值）

for-of遍歷

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

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

解構運算實現遍歷

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

我們可以在Generator函數中增加return語句

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或者解構運算來遍歷遍歷器對象，則return后面的值將被忽略

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


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

ES6 Generator 探秘
ECMAScript 6 入門