嘿，JavaScript 愛好者們！👋 你們準備好提升編碼技能了嗎？今天，我們要深入探討 生成器（Generators）——JavaScript 中一種特殊的函數。不要擔心，這不是火箭科學 🚀（但很接近）！讓我們去掉專業術語，直接進入重點。
什麼是生成器？ 🤔
簡單來說，生成器是可以暫停和恢復執行的函數。與從頭到尾執行的普通函數不同，生成器讓你擁有更多控制權。
怎麼做到的？使用 function* 語法和 yield 關鍵字的魔法。我們來看看它們的實際應用吧！
寫你的第一個生成器函數 🛠️
function* myFirstGenerator() {
yield "你好 🌟";
yield "生成器真棒！";
yield "再見 👋";
}
// 讓我們使用它！
const gen = myFirstGenerator();
console.log(gen.next()); // { value: '你好 🌟', done: false }
console.log(gen.next()); // { value: '生成器真棒！', done: false }
console.log(gen.next()); // { value: '再見 👋', done: false }
console.log(gen.next()); // { value: undefined, done: true }這裡發生了什麼？
yield關鍵字 作為函數中的暫停點。- 每次調用
gen.next()會將函數移動到下一個yield。 - 當沒有更多的
yield語句時，生成器返回{ done: true }。
實用案例 🎯
1. 無限數列生成器 ♾️
是否曾想過在不佔用過多記憶體的情況下生成無限的數字？生成器來拯救你了！
function* infiniteNumbers() {
let num = 1;
while (true) {
yield num++;
}
}
const numbers = infiniteNumbers();
console.log(numbers.next().value); // 1
console.log(numbers.next().value); // 2
console.log(numbers.next().value); // 3
// ... 以此類推2. 控制數據提取的迭代 📡
需要分批提取數據或延遲加載某些內容嗎？生成器可以幫忙：
function* fetchInChunks(data) {
for (let i = 0; i < data.length; i += 2) {
yield data.slice(i, i + 2);
}
}
const chunks = fetchInChunks([1, 2, 3, 4, 5, 6, 7, 8]);
console.log(chunks.next().value); // [1, 2]
console.log(chunks.next().value); // [3, 4]
console.log(chunks.next().value); // [5, 6]與生成器的委派互動 🤹♀️
生成器可以使用 yield* 調用其他生成器。讓我們讓它們一起運作：
function* innerGenerator() {
yield "我是內部生成器 🎯";
}
function* outerGenerator() {
yield "我是外部生成器 🌟";
yield* innerGenerator();
yield "回到外部生成器 👋";
}
const gen = outerGenerator();
for (const value of gen) {
console.log(value);
}輸出：
我是外部生成器 🌟
我是內部生成器 🎯
回到外部生成器 👋 為什麼要使用生成器？ 🤷♂️
- 延遲計算：僅在需要時生成值。
- 更佳的表現：不需要提前計算所有結果。
- 非同步流程：結合
async/await使用，能讓非同步代碼更乾淨。
給你的小挑戰！ 🤔💡
生成器函數可以是非同步的嗎？如果可以，你會怎麼使用它？
在評論區留下你的答案，或者在你的代碼中試試吧！🧑💻
總結 🎉
生成器一開始看起來可能有點棘手，但只要多加練習，它們就能成為你在 JavaScript 工具箱中的一個強大工具。從小開始，探索它們的可能性，然後你很快就會像專業人士一樣使用它們！💪
你對生成器有什麼酷的使用案例嗎？在下面的評論中與我們分享！讓我們一起學習。🙌
祝你編碼愉快！💻✨
原文出處：https://dev.to/jagroop2001/lets-learn-generators-in-javascript-4566
按讚的人：
共有 0 則留言
文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
熱門文章