Generators 是 JavaScript 中的一種特殊函數(shù)，它們可以暫停執(zhí)行并根據(jù)需要生成多個(gè)值。通過 yield 關(guān)鍵字，生成器函數(shù)可以在每次被調(diào)用時(shí)產(chǎn)生一個(gè)新值，這使得它們非常適合處理大量數(shù)據(jù)或需要延遲計(jì)算的場景。本文將詳細(xì)介紹 generators 的作用、用法以及與其他語言特性的配合使用。

1. 生成器函數(shù)的定義和使用

生成器函數(shù)是通過一個(gè)特殊的函數(shù)關(guān)鍵字 function* 來定義的。在生成器函數(shù)內(nèi)部，可以使用 yield 關(guān)鍵字來指定需要生成的值。以下是生成器函數(shù)的示例：

function* myGenerator() {
    yield 'Apple';
    yield 'Banana';
    yield 'Cherry';
}
const generator = myGenerator();
console.log(generator.next()); // 輸出: { value: 'Apple', done: false }
console.log(generator.next()); // 輸出: { value: 'Banana ', done: false }
console.log(generator.next()); // 輸出: { value: 'Cherry', done: false }
console.log(generator.next()); // 輸出: { value: undefined, done: true }

通過調(diào)用生成器函數(shù)，我們可以獲得一個(gè)生成器對象 generator。每次調(diào)用 generator.next() 都會(huì)返回一個(gè)包含 value 和 done 屬性的對象。

• value 表示下一個(gè)生成的值。
• done 表示是否還有更多的值需要生成。當(dāng)所有值都被生成后，done 為 true。

2. 暫停和恢復(fù)執(zhí)行

生成器函數(shù)的強(qiáng)大之處在于它們能夠暫停和恢復(fù)執(zhí)行，這意味著可以在需要時(shí)延遲計(jì)算或逐步處理大量數(shù)據(jù)，而不是一次性全部處理。以下示例展示了如何利用生成器函數(shù)處理大型數(shù)據(jù)集：

function* generateNumbers() {
    for (let i = 0; i <= 1000000; i++) {
        yield i;
    }
}
const numbersGenerator = generateNumbers();
for (let number of numbersGenerator) {
    console.log(number);
}

在上述示例中，我們定義了一個(gè)生成器函數(shù) generateNumbers()，它會(huì)生成一個(gè)從 0 到 1000000 的數(shù)字序列。通過 yield 關(guān)鍵字，每次循環(huán)都會(huì)產(chǎn)生一個(gè)新的數(shù)字，并在迭代過程中輸出到控制臺(tái)。通過這種方式，我們可以逐步處理巨大的數(shù)據(jù)集，避免一次性加載整個(gè)數(shù)據(jù)集導(dǎo)致的性能問題。

3. 與其他語言特性的配合使用

生成器函數(shù)在與其他 JavaScript 特性結(jié)合使用時(shí)，可以發(fā)揮更大的作用。

Iterator Protocol 迭代器協(xié)議 

由于生成器函數(shù)返回的是一個(gè)可迭代對象，因此可以通過 for...of 循環(huán)來逐個(gè)訪問生成的值。

function* shoppingList() {
    yield 'Milk';
    yield 'Eggs';
    yield 'Bread';
}
const myCart = shoppingList();
for (let item of myCart) {
    console.log(item);
}

解構(gòu)賦值 

可以通過在生成器函數(shù)中使用解構(gòu)賦值來獲取生成的值的特定部分：

function* personDetails() {
    yield ["John", "Doe"];
    yield ["Jane", "Smith"];
}
const fullNameGenerator = personDetails();
for (let [firstName, lastName] of fullNameGenerator) {
    console.log(firstName, lastName);
}

生成器和 Promise 的組合使用 

生成器函數(shù)與異步編程結(jié)合使用，可以實(shí)現(xiàn)更靈活的控制流，簡化異步操作的處理。下面我們分別介紹在生成器函數(shù)中如何使用 Promise 和 async/await 來處理異步編程。

使用 Promise：

function fetchTodos() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(['Todo 1', 'Todo 2', 'Todo 3']);
    }, 2000);
  });
}
function* todoGenerator() {
  yield fetchTodos();
}
let generator = todoGenerator();
let promise = generator.next().value;
promise.then(todos => {
  console.log(todos);  // ['Todo 1', 'Todo 2', 'Todo 3']
});

在上述代碼中，我們定義了一個(gè)異步函數(shù) fetchTodos()，它返回一個(gè) Promise 對象，在 2 秒鐘后會(huì) resolve 一個(gè)包含待辦事項(xiàng)的數(shù)組。然后，我們定義了一個(gè)生成器函數(shù) todoGenerator()，其中通過 yield 關(guān)鍵字將 fetchTodos() 函數(shù)作為生成器的值進(jìn)行暫停。

在生成器對象上調(diào)用 next() 方法后，我們可以獲取到 fetchTodos() 返回的 Promise 對象，然后可以使用 .then() 方法處理該 Promise 的結(jié)果。

使用 async/await：

function fetchTodo() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Todo');
    }, 2000);
  });
}
function* todoGenerator() {
  try {
    let result = yield fetchTodo();
    console.log(result); // 'Todo'
    console.log('Generator continues...');
    // 可以在生成器函數(shù)中根據(jù)需要使用多個(gè)異步操作
    let anotherResult = yield someAsyncOperation();
    console.log(anotherResult);
    // ...
  } catch (error) {
    console.error(error);
  }
}
async function main() {
  const generator = todoGenerator();
  try {
    while (true) {
      const { value, done } = generator.next();
      if (done) {
        break;
      }
      await value;
    }
  } catch (error) {
    console.error(error);
  }
}
main();

在上面的示例中：

1.fetchTodo() 函數(shù)返回一個(gè) Promise 對象，表示獲取待辦事項(xiàng)。生成器函數(shù) todoGenerator() 使用 yield 暫停執(zhí)行，并等待該 Promise 結(jié)果。

2.在 main() 函數(shù)中，我們創(chuàng)建了一個(gè)迭代器對象 generator，通過循環(huán)并使用 await 關(guān)鍵字來依次執(zhí)行生成器函數(shù)中的異步操作。

3.生成器函數(shù)中可以根據(jù)需要使用多個(gè)異步操作，使用 yield 暫停執(zhí)行并等待每個(gè)操作完成。捕獲可能的錯(cuò)誤，可以使用 try-catch 塊。

PS. 生成器函數(shù)本身并不返回 Promise 對象，因此我們需要將生成器函數(shù)與 main() 函數(shù)結(jié)合使用，以確保異步操作按照預(yù)期順序執(zhí)行。

總的來說，通過在生成器函數(shù)中結(jié)合 Promise、async/await 等異步編程特性，可以使生成器函數(shù)的控制流更加靈活、簡潔和可讀，從而提升異步編程的開發(fā)體驗(yàn)。

委托給另外一個(gè)Generator函數(shù)

委托（delegating）給另一個(gè) Generator 函數(shù)是 Generator 函數(shù)在使用上的一種常見用法，它允許一個(gè)生成器函數(shù)調(diào)用另一個(gè)生成器函數(shù)，并將后者的生成器值逐個(gè) yield 出來。這種委托機(jī)制可以簡化代碼結(jié)構(gòu)，提高可讀性，同時(shí)靈活地處理多個(gè)生成器之間的協(xié)作關(guān)系。

示例代碼：

function* generator1() {
  yield 1;
  yield 2;
}
function* generator2() {
  yield 'a';
  yield 'b';
}
function* combinedGenerator() {
  yield* generator1();  // 委托g(shù)enerator1()
  yield* generator2();  // 委托g(shù)enerator2()
  yield 'Final value';
}
let generator = combinedGenerator();
console.log(generator.next());  // { value: 1, done: false }
console.log(generator.next());  // { value: 2, done: false }
console.log(generator.next());  // { value: 'a', done: false }
console.log(generator.next());  // { value: 'b', done: false }
console.log(generator.next());  // { value: 'Final value', done: false }
console.log(generator.next());  // { value: undefined, done: true }

在上述代碼中，我們定義了三個(gè)生成器函數(shù)：generator1()、generator2() 和 combinedGenerator()。其中，combinedGenerator() 是我們將要?jiǎng)?chuàng)建的委托生成器函數(shù)。

在 combinedGenerator() 中，通過使用 yield* 表達(dá)式，我們可以將執(zhí)行權(quán)委托給其他生成器函數(shù)，即將 generator1() 和 generator2() 的生成器值依次逐個(gè) yield 出來。這樣，在使用 combinedGenerator() 生成的生成器對象上調(diào)用 next() 方法時(shí)，它會(huì)檢查當(dāng)前生成器函數(shù)是否有委托的生成器函數(shù)可供調(diào)用。

值得注意的是，通過委托給其他生成器函數(shù)，不僅可以在合并生成器值時(shí)保持代碼的模塊化和可復(fù)用性，還可以處理更復(fù)雜的生成器協(xié)作場景。在實(shí)際開發(fā)中，你還可以根據(jù)具體需求嵌套多個(gè)委托關(guān)系，以實(shí)現(xiàn)更靈活和高效的生成器編程。

另外如果在委托生成器函數(shù)中發(fā)生異常（如：委托的生成器函數(shù)中出現(xiàn)錯(cuò)誤、被主動(dòng)生成器函數(shù)提前結(jié)束），該異常會(huì)被傳遞回主生成器函數(shù)并拋出。

通過委托機(jī)制，JavaScript 中的 Generator 函數(shù)能夠更好地組織和控制生成器之間的協(xié)作關(guān)系，使得代碼更具可讀性、可維護(hù)性，并且支持構(gòu)建復(fù)雜的生成器流程。

到此這篇關(guān)于JavaScript利用生成器函數(shù)實(shí)現(xiàn)優(yōu)雅處理異步任務(wù)流的文章就介紹到這了,更多相關(guān)JavaScript生成器函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論