ES6語法之Generator

Vultr 發(fā)布于2019-08-22 14:04 / 555人閱讀

摘要：不同的是，調(diào)用函數(shù)后，該函數(shù)并不執(zhí)行，返回的也不是函數(shù)運行結(jié)果，而是一個指向內(nèi)部狀態(tài)的指針對象，也就是上一章介紹的遍歷器對象。下一步，必須調(diào)用遍歷器對象的方法，使得指針移向下一個狀態(tài)。

Generator 函數(shù)

每當(dāng)函數(shù)被調(diào)用時，JavaScript 引擎就會在函數(shù)頂部啟動，并運行每行代碼，直到到達(dá)底部。無法中途停止運行代碼，并稍后重新開始。一直都是這種“運行到結(jié)束”的工作方式.

如果我們希望能夠中途暫停運行函數(shù)，則需要使用 ES6 中新提供的一種函數(shù)，叫做 generator（生成器）函數(shù)！我們來看一個示例：

function* getEmployee() {
    console.log("the function has started");

    const names = ["Amanda", "Diego", "Farrin", "James"];

    for (const name of names) {
        yield name;
    }

    console.log("the function has ended");
}

注意到 function 關(guān)鍵字后面的星號（即 *）了嗎？星號表示該函數(shù)實際上是生成器！

關(guān)鍵字 yield 是 ES6 中新出現(xiàn)的關(guān)鍵字。只能用在生成器函數(shù)中。yield 會導(dǎo)致生成器暫停下來。函數(shù)體內(nèi)部使用yield表達(dá)式，定義不同的內(nèi)部狀態(tài)（yield在英語里的意思就是“產(chǎn)出”）。

現(xiàn)在看看當(dāng)我們嘗試運行該函數(shù)時，會發(fā)生什么：

getEmployee();

// this is the response I get in Chrome:
getEmployee {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window}

結(jié)果是控制臺中沒有輸出我們所期待的，怎么回事呢？

事實上，生成器被調(diào)用時，它不會運行函數(shù)中的任何代碼，而是創(chuàng)建和返回迭代器。該迭代器可以用來運行實際生成器的內(nèi)部代碼。

Generator 函數(shù)的調(diào)用方法與普通函數(shù)一樣，也是在函數(shù)名后面加上一對圓括號。不同的是，調(diào)用 Generator 函數(shù)后，該函數(shù)并不執(zhí)行，返回的也不是函數(shù)運行結(jié)果，而是一個指向內(nèi)部狀態(tài)的指針對象，也就是上一章介紹的遍歷器對象（Iterator Object）。

下一步，必須調(diào)用遍歷器對象的next方法，使得指針移向下一個狀態(tài)。也就是說，每次調(diào)用next方法，內(nèi)部指針就從函數(shù)頭部或上一次停下來的地方開始執(zhí)行，直到遇到下一個yield表達(dá)式（或return語句）為止。換言之，Generator 函數(shù)是分段執(zhí)行的，yield表達(dá)式是暫停執(zhí)行的標(biāo)記，而next方法可以恢復(fù)執(zhí)行。

const generatorIterator = getEmployee();
 generatorIterator.next();
 //{value: "Amanda", done: false}
 
 generatorIterator.next();
 //{value: "Diego", done: false}
 
 generatorIterator.next();
 //{value: "Farrin", done: false}

 generatorIterator.next();
 //{value: "James", done: false}
 
 generatorIterator.next();
 //{value: "undefined", done: true}

我們可以使用關(guān)鍵字 yield 從生成器中獲取數(shù)據(jù)。我們還可以將數(shù)據(jù)發(fā)送回生成器中。方式是使用 .next() 方法：

yield表達(dá)式本身沒有返回值，或者說總是返回undefined。next方法可以帶一個參數(shù)，該參數(shù)就會被當(dāng)作上一個yield表達(dá)式的返回值。

 function* createSundae() {
    const toppings = [];

    toppings.push(yield);
    toppings.push(yield);
    toppings.push(yield);

    return toppings;
}
var it = createSundae();
it.next("hot fudge");
it.next("sprinkles");
it.next("whipped cream");
it.next().value();
// ["sprinkles","whipped cream",undefined]

使用數(shù)據(jù)調(diào)用 it.next("hot fudge");會將該數(shù)據(jù)發(fā)送到生成器函數(shù)中上次離開的地方。它會將 yield 關(guān)鍵字替換為你提供的數(shù)據(jù)。