成為 JavaScript 生成器的專家，掌握 JavaScript Generators：五個實用案例
它們不僅僅是一個花哨的功能，我們將探索它們的多種強大用例，包括創(chuàng)建引人入勝的動畫、通過互聯(lián)網(wǎng)流式傳輸視頻、節(jié)省內存等。
如果你從未聽說過它們，可能會錯過很多有趣的東西。
什么是 Generators？
Generators 是一種神奇的函數(shù)，它們可以在任意時刻暫停和恢復執(zhí)行，而不是連續(xù)執(zhí)行。
使用星號 * 標記函數(shù)為生成器，yield 在 .next() 調用時按需生成值，直到生成器完成為止。
這就像一個物理發(fā)電機，它不是一次性生成所有的電，而是隨著時間推移逐漸生成。
你可以使用 for..of 循環(huán)來替代直接調用 .next()，這對于生成大量數(shù)據(jù)的生成器非常有用：
function* numberGenerator() {
let num = 1;
while (true) {
yield num++;
}
}
for (let value of numberGenerator()) {
if (value > 5) break;
console.log(value);
}
// 輸出：1, 2, 3, 4, 5惰性求值
“只在必要時計算”。
與 JavaScript 中的常規(guī)函數(shù)不同，常規(guī)函數(shù)會完全執(zhí)行并返回結果。
假設你想要一個數(shù)字序列，但不確定需要多少個。生成器可以幫助你：
function* sequenceGenerator() {
let num = 1;
while (true) {
yield num++;
}
}
const generator = sequenceGenerator();
console.log(generator.next().value); // 1
console.log(generator.next().value); // 2
// 你可以根據(jù)需要繼續(xù)獲取下一個值使用生成器，你只在需要時獲取下一個數(shù)字。
更好的內存利用
生成器不會在內存中保存所有結果，而是動態(tài)生成。
想象一下，你需要一個包含一百萬個數(shù)字的序列。使用常規(guī)函數(shù)，你需要將這些數(shù)字存儲在一個數(shù)組中，消耗大量內存。
生成器效率更高：
function* bigSequence() {
let i = 0;
while (i < 1000000) {
yield i++;
}
}
const generator = bigSequence();
console.log(generator.next().value); // 0
console.log(generator.next().value); // 1
// 繼續(xù)按需生成下一個值，而不是一次性生成所有值處理異步任務
你知道嗎？Babel 會將 async/await 轉換為生成器，以便在不支持原生 async/await 的 JavaScript 版本中使用。
Babel 將以下代碼：
轉換為：
打字動畫
打字動畫可以吸引用戶的注意力，使你的網(wǎng)站更加美觀。
它們通過模擬人類的打字行為，為網(wǎng)站增添個性和特色，從而創(chuàng)造更具人性化的體驗，并建立獨特的品牌形象。
使用遞歸和 setTimeout() 可能是實現(xiàn)的一個不錯的方式：
function typeWriter(text, i = 0) {
if (i < text.length) {
document.body.innerHTML += text.charAt(i);
setTimeout(() => typeWriter(text, i + 1), 100);
}
}
typeWriter('Hello, World!');但是，在這種情況下，生成器更能大顯身手：
function* typeWriterGenerator(text) {
let i = 0;
while (i < text.length) {
yield text.charAt(i++);
}
}
const generator = typeWriterGenerator('Hello, World!');
const interval = setInterval(() => {
const next = generator.next();
if (next.done) {
clearInterval(interval);
} else {
document.body.innerHTML += next.value;
}
}, 100);因為我們可以隨時生成值，所以可以使用 setInterval() 以時間間隔生成字符。
異步處理
注意：這與前面提到的 async/await 的基礎不同。這里我們談論的是異步生成器。
我們可以這樣使用異步生成器：
這個工具在 Web 應用中以結構化、可讀的方式流式傳輸數(shù)據(jù)非常強大——看看這個為類似 YouTube 的視頻共享應用緩沖和流式傳輸數(shù)據(jù)的函數(shù)：
要消費這個異步生成器，我們使用 for await..of 循環(huán)：
redux-saga
redux-saga 是一個用于管理應用程序中副作用的庫，擁有超過 100 萬的每周下載量。
生成器在這個庫中扮演了重要角色，處理 Redux 操作以簡化測試和錯誤處理。
看看這個簡單的 saga：
每當 USER_FETCH_REQUESTED 操作被派發(fā)時，redux-saga 運行生成器，它依次調用 fetchData() 以執(zhí)行異步網(wǎng)絡請求。
關于 return 的說明
在生成器函數(shù)中返回值時會發(fā)生什么？讓我們看看：
function* footballPlayers() {
yield 'Messi';
yield 'Ronaldo';
return 'Neymar';
}
for (const player of footballPlayers()) {
console.log(player);
}
// 輸出：Messi, Ronaldo為什么 Neymar 不包含在生成的值中？
我們使用 .next() 來看看 done 屬性是否有關系：
const players = footballPlayers();
console.log(players.next()); // { value: 'Messi', done: false }
console.log(players.next()); // { value: 'Ronaldo', done: false }
console.log(players.next()); // { value: 'Neymar', done: true }結果顯示，return 不是生成的值，因此 for..of 不會處理它。
你還記得我們的第一個例子嗎？
function* numberGenerator() {
let num = 1;
while (num <= 3) {
yield num++;
}
return 'done';
}
const generator = numberGenerator();
for (const value of generator) {
console.log(value);
}
// 輸出：1, 2, 3你可以看到，生成器只生成值，直到 done 為 true。
因此，return 會完成生成器并終止函數(shù)（就像其他函數(shù)一樣）。
最后總結
JavaScript 生成器為控制流、內存效率和異步處理提供了強大的解決方案。它們通過動態(tài)動畫、流式數(shù)據(jù)和管理副作用增強了 Web 開發(fā)。
讓我們擁抱生成器的多功能性，編寫優(yōu)雅高效的 JavaScript 代碼。
