它們不僅僅是一個花哨的功能，我們將探索它們的多種強(qiáng)大用例，包括創(chuàng)建引人入勝的動畫、通過互聯(lián)網(wǎng)流式傳輸視頻、節(jié)省內(nèi)存等。

如果你從未聽說過它們，可能會錯過很多有趣的東西。

什么是 Generators？

Generators 是一種神奇的函數(shù)，它們可以在任意時(shí)刻暫停和恢復(fù)執(zhí)行，而不是連續(xù)執(zhí)行。

使用星號 * 標(biāo)記函數(shù)為生成器，yield 在 .next() 調(diào)用時(shí)按需生成值，直到生成器完成為止。

這就像一個物理發(fā)電機(jī)，它不是一次性生成所有的電，而是隨著時(shí)間推移逐漸生成。

你可以使用 for..of 循環(huán)來替代直接調(diào)用 .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

惰性求值

“只在必要時(shí)計(jì)算”。

與 JavaScript 中的常規(guī)函數(shù)不同，常規(guī)函數(shù)會完全執(zhí)行并返回結(jié)果。

假設(shè)你想要一個數(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í)獲取下一個數(shù)字。

更好的內(nèi)存利用

生成器不會在內(nèi)存中保存所有結(jié)果，而是動態(tài)生成。

想象一下，你需要一個包含一百萬個數(shù)字的序列。使用常規(guī)函數(shù)，你需要將這些數(shù)字存儲在一個數(shù)組中，消耗大量內(nèi)存。

生成器效率更高：

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ù)按需生成下一個值，而不是一次性生成所有值

處理異步任務(wù)

你知道嗎？Babel 會將 async/await 轉(zhuǎn)換為生成器，以便在不支持原生 async/await 的 JavaScript 版本中使用。

Babel 將以下代碼：

轉(zhuǎn)換為：

打字動畫

打字動畫可以吸引用戶的注意力，使你的網(wǎng)站更加美觀。

它們通過模擬人類的打字行為，為網(wǎng)站增添個性和特色，從而創(chuàng)造更具人性化的體驗(yàn)，并建立獨(dú)特的品牌形象。

使用遞歸和 setTimeout() 可能是實(shí)現(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);

因?yàn)槲覀兛梢噪S時(shí)生成值，所以可以使用 setInterval() 以時(shí)間間隔生成字符。

異步處理

注意：這與前面提到的 async/await 的基礎(chǔ)不同。這里我們談?wù)摰氖钱惒缴善鳌?/p>

我們可以這樣使用異步生成器：

這個工具在 Web 應(yīng)用中以結(jié)構(gòu)化、可讀的方式流式傳輸數(shù)據(jù)非常強(qiáng)大——看看這個為類似 YouTube 的視頻共享應(yīng)用緩沖和流式傳輸數(shù)據(jù)的函數(shù)：

要消費(fèi)這個異步生成器，我們使用 for await..of 循環(huán)：

redux-saga

redux-saga 是一個用于管理應(yīng)用程序中副作用的庫，擁有超過 100 萬的每周下載量。

生成器在這個庫中扮演了重要角色，處理 Redux 操作以簡化測試和錯誤處理。

看看這個簡單的 saga：

每當(dāng) USER_FETCH_REQUESTED 操作被派發(fā)時(shí)，redux-saga 運(yùn)行生成器，它依次調(diào)用 fetchData() 以執(zhí)行異步網(wǎng)絡(luò)請求。

關(guān)于 return 的說明

在生成器函數(shù)中返回值時(shí)會發(fā)生什么？讓我們看看：

function* footballPlayers() {
  yield 'Messi';
  yield 'Ronaldo';
  return 'Neymar';
}

for (const player of footballPlayers()) {
  console.log(player);
}
// 輸出：Messi, Ronaldo

為什么 Neymar 不包含在生成的值中？

我們使用 .next() 來看看 done 屬性是否有關(guān)系：

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 }

結(jié)果顯示，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ù)一樣）。

最后總結(jié)

JavaScript 生成器為控制流、內(nèi)存效率和異步處理提供了強(qiáng)大的解決方案。它們通過動態(tài)動畫、流式數(shù)據(jù)和管理副作用增強(qiáng)了 Web 開發(fā)。

讓我們擁抱生成器的多功能性，編寫優(yōu)雅高效的 JavaScript 代碼。