JavaScript - yield 運算子

JavaScript yield 運算子

在 JavaScript 中，yield 運算子用於非同步暫停和恢復生成器函式。在 JavaScript 中，生成器函式是可以暫停或恢復執行的特殊函式。生成器函式用 'function*' 語法定義。yield 關鍵字只能在包含它的生成器函式中使用。

yield 運算子暫停生成器函式的執行，並將它的運算元（表示式）返回給生成器的呼叫者。

語法

JavaScript 中 yield 運算子的語法如下：

yield expression;

引數

expression − 透過迭代器協議從生成器函式生成的返回值。如果省略 expression，則生成 'undefined'。

返回值

它返回傳遞給生成器 next() 方法的可選值，以恢復其執行。

生成器函式中的 yield 運算子

為了理解 yield 運算子，讓我們首先了解生成器函式的工作原理。

當呼叫生成器函式時，它返回一個生成器物件。當呼叫此生成器物件的 next() 方法時，它將恢復生成器函式的執行。當遇到 yield 表示式時，它會暫停執行並將 yield 關鍵字後的表示式返回給物件的呼叫者（next() 方法）。

生成器物件的 next() 方法返回一個包含兩個屬性的 迭代器物件 – value 和 done。value 是表示式的實際值，done 是一個布林值。如果生成器函式的執行已完全執行，則 done 屬性為 true，否則為 false。

下面是一個帶有 yield 關鍵字（運算子）的生成器函式的完整示例程式碼。

function* test() {
 // function code
 yield expression;
}
const genObj = test();
genObj.next();

在上面的語法中，'function*' 用於建立一個名為 test 的生成器函式，並且 yield 關鍵字用於從函式返回 'expression'。

呼叫生成器函式 test 並將返回的生成器物件賦值給變數 genObj。next() 方法恢復函式的執行，並在遇到 yield 表示式時返回迭代器物件。

讓我們執行下面的 JavaScript 程式碼片段：

function* test() {
    console.log("I'm before yield expression");
    yield 20;
}
const genObj = test();
console.log(genObj.next());

請注意，當我們呼叫 next() 方法時，它首先在控制檯中顯示訊息，然後顯示迭代器物件。

I'm before yield expression
{ value: 20, done: false }

示例：返回值

在下面的示例中，我們定義了 test() 生成器函式。我們在函式中使用了三次 yield 運算子分別返回一個數字、一個數組和一個字串。

之後，我們使用 `next()` 方法四次來恢復函式的執行。每當控制流遇到 `yield` 運算子時，它將停止執行並返回該值。

在輸出中，您可以看到它返回一個包含 `yield` 運算子運算元和布林值的的物件。

function* test() {
    yield 20;
    yield [1,2,3];
    yield "Hello World";
}
let res = test();
console.log(res.next());
console.log(res.next());
console.log(res.next());
console.log(res.next());

輸出

{ value: 20, done: false }
{ value: [ 1, 2, 3 ], done: false }
{ value: 'Hello World', done: false }
{ value: undefined, done: true }

示例：返回 undefined

當我們省略 `yield` 關鍵字後面的表示式時，它將返回 `undefined`。

function* test() {
    yield;
}

let res = test();
console.log(res.next());
console.log(res.next());

輸出

{ value: undefined, done: false }
{ value: undefined, done: true }

示例：向 `next()` 方法傳遞值

我們也可以向 `next()` 方法傳遞值。在下面的示例中，我們將 30 傳遞給第二個 `next()` 方法。它將 `yield` 的值計算為 30。變數 `result` 被賦值為 `yield` 的值，即 30。

function* test() {
    let result = yield 20;
    console.log("default value paased to next() method " + result);
}

let res = test();
console.log(res.next());
console.log(res.next(30));

輸出

{ value: 20, done: false }
default value paased to next() method 30
{ value: undefined, done: true }

示例

在下面的程式碼中，我們使用了迴圈，在每次操作中，我們使用 `yield` 運算子停止函式的執行。之後，我們使用 `next()` 方法啟動生成器函式的執行。

// Generator function
function* test() {
    for (let p = 0; p < 6; p += 2) {
        yield p;
    }
}
let res = test();
console.log(res.next());
console.log(res.next());
console.log(res.next());
console.log(res.next());

輸出

{ value: 0, done: false }
{ value: 2, done: false }
{ value: 4, done: false }
{ value: undefined, done: true }

在實際開發中，程式設計師使用 `yield` 運算子進行非同步操作、惰性求值、任務排程、迭代大型資料集、建立自定義迭代器等。

列印頁面