JavaScript - Yield 運算子

Yield 運算子介紹

你好，有志者！今天，我們將踏上一段令人振奮的旅程，探索 JavaScript 的 yield 運算子。將 yield 想像成你代碼中的魔法暫停鍵。它就像告訴你的程序："嘿，在這裡休息一下，然後我們稍後再從這裡繼續。" 有趣吧？讓我們深入了解一下！

什么是 Yield 運算子？

Yield 運算子是 JavaScript 中的一個特殊關鍵字，用於生成器函數內部。我知道你現在在想什麼 - "生成器函數？那是什麼東西？" 不要擔心，我們會一步一步來！現在，只想像一個生成器函數是一種特殊的函數，它可以暫停和恢復執行。正是 yield 運算子使得這種暫停和恢復成為可能。

真實世界的比喻

想像你正在讀一本非常厚的書。當你需要休息時，你可能會用書籤來標記你的位置。Yield 運算子在你的代碼中就像那個書籤。它在函數中標記一個可以暫停的地點，然後稍後再回來。

Yield 運算子的語法

Yield 運算子的基本語法非常簡單：

yield expression;

在這裡，expression 是當函數暫停時你想要 "yield" 或返回的值。它是可選的，如果你不提供一個值，則會 yield undefined。

在生成器函數中使用 Yield 運算子

現在，讓我們來談論這些神秘的生成器函數。生成器函數是使用在 function 關鍵字後加上星號 (*) 定義的：

function* generatorFunction() {
yield 'Hello';
yield 'World';
}

當你調用一個生成器函數時，它不會立即運行其中的代碼。相反，它會返回一個生成器對象，你可以使用這個對象來控制函數的執行。

示例：返回一個值

讓我們看一個簡單的例子：

function* countToThree() {
yield 1;
yield 2;
yield 3;
}

const generator = countToThree();
console.log(generator.next().value); // 輸出：1
console.log(generator.next().value); // 輸出：2
console.log(generator.next().value); // 輸出：3

在這個例子中，每次我們在生成器上調用 next()，它會運行直到遇到一個 yield 語句，然後暫停並返回 yield 的值。這就像函數在說："這是下一個數字，下次調用我時再給你下一個！"

示例：返回 Undefined

如果我們不指定要 yield 的值，它將返回 undefined：

function* yieldUndefined() {
yield;
yield 'Hello';
yield;
}

const gen = yieldUndefined();
console.log(gen.next().value); // 輸出：undefined
console.log(gen.next().value); // 輸出：Hello
console.log(gen.next().value); // 輸出：undefined

這在你想在生成器中創造一個暫停點而不一定要返回值時非常有用。

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

這裡有點意思了。你可以實際上向 next() 方法傳遞一個值，這個值將被生成器函數接收：

function* conversation() {
const name = yield "What's your name?";
yield `Hello, ${name}!`;
const hobby = yield "What's your favorite hobby?";
yield `${hobby} sounds fun!`;
}

const talk = conversation();
console.log(talk.next().value);        // 輸出：What's your name?
console.log(talk.next('Alice').value); // 輸出：Hello, Alice!
console.log(talk.next().value);        // 輸出：What's your favorite hobby?
console.log(talk.next('Coding').value); // 輸出：Coding sounds fun!

這就像與你的代碼進行對話。生成器提一個問題，暫停以等待你的回答，然後根據你說的話繼續。是不是很酷？

實用示例：斐波那契數列生成器

讓我們把所有的知識結合起來，用一個實用的例子。我們將創建一個生成器函數，產生斐波那契數列：

function* fibonacciGenerator() {
let a = 0, b = 1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
}

const fib = fibonacciGenerator();
for (let i = 0; i < 10; i++) {
console.log(fib.next().value);
}

這個生成器會無限期地產生斐波那契數字。每次我們調用 next()，它都會 yield 序列中的下一個數字。我們在這裡使用一個 for 循環來獲取前 10 個數字，但我們可以繼續下去，直到我們想要停止！

結論

Yield 運算子是 JavaScript 中的強大工具，為控制代碼流程提供了新的可能性。它讓你可以創建可以暫停和恢復的函數，使得處理值序列更加方便。

記住，學會有效地使用 yield 和生成器需要練習。如果它們立即不能引起你的共鳴，不要氣餒 - 繼續實驗，你很快就會變得像專家一樣 yield！

方法表格

這裡是與生成器一起使用的主要方法的表格：

方法	描述
next()	返回生成器中的下一個值
return(value)	返回給定的值並結束生成器
throw(error)	將錯誤抛入生成器

快樂編程，未來的 JavaScript 巫師！記住，每個專家都曾經是個初學者。繼續練習，保持好奇心，在你意識到之前，你將會 yield 出编程的卓越成就！

Credits: Image by storyset