JavaScript 生成器非?？?。它們就像常規(guī)函數(shù)，但具有超能力。我最近經(jīng)常使用它們，我不得不說(shuō)，它們改變了我對(duì)代碼中控制流的思考方式。

讓我們從基礎(chǔ)開(kāi)始。生成器是一個(gè)可以暫停和恢復(fù)的函數(shù)。它使用 function* 語(yǔ)法和yield 關(guān)鍵字。這是一個(gè)簡(jiǎn)單的例子：

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

const counter = countToThree();
console.log(counter.next().value); // 1
console.log(counter.next().value); // 2
console.log(counter.next().value); // 3

看看我們?nèi)绾我淮螁尾綀?zhí)行一個(gè)yield函數(shù)？這就是生成器的魔力。

但是生成器的功能遠(yuǎn)不止計(jì)數(shù)。它們非常適合創(chuàng)建自定義迭代器。假設(shè)您要生成斐波那契數(shù)列：

function* fibonacci() {
  let [prev, curr] = [0, 1];
  while (true) {
    yield curr;
    [prev, curr] = [curr, prev + curr];
  }
}

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

這個(gè)生成器將永遠(yuǎn)持續(xù)生成斐波那契數(shù)。這是一個(gè)無(wú)限序列，但我們只計(jì)算我們需要的值。

這給我們帶來(lái)了生成器最酷的事情之一：惰性求值。他們僅在我們要求時(shí)計(jì)算值。這對(duì)于大型數(shù)據(jù)集或復(fù)雜的計(jì)算來(lái)說(shuō)非常高效。

讓我們看一個(gè)更實(shí)際的例子。假設(shè)您正在為大型數(shù)據(jù)集構(gòu)建分頁(yè)系統(tǒng)：

function* paginate(items, pageSize) {
  for (let i = 0; i < items.length; i += pageSize) {
    yield items.slice(i, i + pageSize);
  }
}

const allItems = Array.from({ length: 100 }, (_, i) => i + 1);
const pageSize = 10;
const pages = paginate(allItems, pageSize);

console.log(pages.next().value); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(pages.next().value); // [11, 12, 13, 14, 15, 16, 17, 18, 19, 20]

這個(gè)生成器讓我們可以根據(jù)需要獲取數(shù)據(jù)頁(yè)，而無(wú)需立即將所有內(nèi)容加載到內(nèi)存中。

生成器在異步編程方面也很出色。它們可以使異步代碼看起來(lái)和行為更像同步代碼。這是使用 co 庫(kù)的示例：

const co = require('co');

function* fetchUserData() {
  const user = yield fetchUser();
  const posts = yield fetchPosts(user.id);
  const comments = yield fetchComments(posts[0].id);
  return { user, posts, comments };
}

co(fetchUserData).then(result => {
  console.log(result);
}).catch(error => {
  console.error(error);
});

這段代碼看起來(lái)是同步的，但實(shí)際上它進(jìn)行了三個(gè)異步調(diào)用。生成器在每次收益處暫停，直到承諾解決。

生成器還可以用于協(xié)作多任務(wù)處理。您可以創(chuàng)建多個(gè)生成器并在它們之間切換，模擬并發(fā)執(zhí)行：

function* task1() {
  yield 'Start task 1';
  yield 'Middle of task 1';
  yield 'End task 1';
}

function* task2() {
  yield 'Start task 2';
  yield 'Middle of task 2';
  yield 'End task 2';
}

function run(tasks) {
  const iterations = tasks.map(task => task());
  while (iterations.length) {
    const [first, ...rest] = iterations;
    const { value, done } = first.next();
    if (!done) {
      console.log(value);
      iterations.push(first);
    }
    iterations.unshift(...rest);
  }
}

run([task1, task2]);

此代碼在兩個(gè)任務(wù)之間交替，一次運(yùn)行每個(gè)步驟。

生成器也非常適合創(chuàng)建狀態(tài)機(jī)。每個(gè)收益可以代表不同的狀態(tài)：

function* trafficLight() {
  while (true) {
    yield 'red';
    yield 'green';
    yield 'yellow';
  }
}

const light = trafficLight();
console.log(light.next().value); // red
console.log(light.next().value); // green
console.log(light.next().value); // yellow
console.log(light.next().value); // red

此交通燈將無(wú)限期地循環(huán)穿過(guò)其狀態(tài)。

現(xiàn)在，我們來(lái)談?wù)勔恍└呒?jí)的技術(shù)。生成器委托允許您屈服于另一個(gè)生成器：

function* innerGenerator() {
  yield 'inner 1';
  yield 'inner 2';
}

function* outerGenerator() {
  yield 'outer 1';
  yield* innerGenerator();
  yield 'outer 2';
}

const gen = outerGenerator();
console.log(gen.next().value); // outer 1
console.log(gen.next().value); // inner 1
console.log(gen.next().value); // inner 2
console.log(gen.next().value); // outer 2

yield* 語(yǔ)法委托給innerGenerator，在繼續(xù)outerGenerator 之前生成其所有值。

生成器中的錯(cuò)誤處理也值得一提。您可以使用 throw() 方法將錯(cuò)誤拋出到生成器中：

function* errorGenerator() {
  try {
    yield 'Start';
    yield 'Middle';
    yield 'End';
  } catch (error) {
    console.error('Caught:', error);
    yield 'Error handled';
  }
}

const gen = errorGenerator();
console.log(gen.next().value); // Start
console.log(gen.throw(new Error('Oops!')).value); // Caught: Error: Oops!
                                                  // Error handled

這允許一些非常復(fù)雜的錯(cuò)誤處理策略。

生成器還可以用于實(shí)現(xiàn)回溯算法。這是一個(gè)生成所有可能的項(xiàng)目組合的簡(jiǎn)單示例：

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

const counter = countToThree();
console.log(counter.next().value); // 1
console.log(counter.next().value); // 2
console.log(counter.next().value); // 3

此生成器將生成給定項(xiàng)目的所有 2 元素組合。

生成器真正發(fā)揮作用的一個(gè)領(lǐng)域是處理大量數(shù)據(jù)。您可以創(chuàng)建僅計(jì)算所需內(nèi)容的高效數(shù)據(jù)處理管道。這是一個(gè)逐行處理大文件的示例：

function* fibonacci() {
  let [prev, curr] = [0, 1];
  while (true) {
    yield curr;
    [prev, curr] = [curr, prev + curr];
  }
}

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

該生成器逐行讀取文件，允許您處理大文件，而無(wú)需將它們完全加載到內(nèi)存中。

生成器也可以用來(lái)實(shí)現(xiàn) Observable 模式。這是一個(gè)簡(jiǎn)單的實(shí)現(xiàn)：

function* paginate(items, pageSize) {
  for (let i = 0; i < items.length; i += pageSize) {
    yield items.slice(i, i + pageSize);
  }
}

const allItems = Array.from({ length: 100 }, (_, i) => i + 1);
const pageSize = 10;
const pages = paginate(allItems, pageSize);

console.log(pages.next().value); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(pages.next().value); // [11, 12, 13, 14, 15, 16, 17, 18, 19, 20]

該生成器充當(dāng)觀察者，處理它接收到的每條數(shù)據(jù)。

生成器的另一個(gè)很酷的用途是創(chuàng)建自定義控制結(jié)構(gòu)。這是使用生成器的重試函數(shù)的示例：

const co = require('co');

function* fetchUserData() {
  const user = yield fetchUser();
  const posts = yield fetchPosts(user.id);
  const comments = yield fetchComments(posts[0].id);
  return { user, posts, comments };
}

co(fetchUserData).then(result => {
  console.log(result);
}).catch(error => {
  console.error(error);
});

此重試函數(shù)將在放棄之前嘗試給定的函數(shù)最多 maxAttempts 次。

總之，生成器是 JavaScript 的一項(xiàng)強(qiáng)大功能，可以幫助您編寫(xiě)更具表現(xiàn)力、更高效且可維護(hù)的代碼。它們非常適合處理復(fù)雜的控制流、管理異步操作和處理大型數(shù)據(jù)集。雖然它們一開(kāi)始看起來(lái)有點(diǎn)奇怪，但一旦掌握了它們的竅門，您就會(huì)發(fā)現(xiàn)在項(xiàng)目中使用它們的各種創(chuàng)造性方法。因此，繼續(xù)吧，在您的下一個(gè) JavaScript 項(xiàng)目中嘗試一下生成器。您可能會(huì)驚訝于他們可以如此簡(jiǎn)化您的代碼！

---

我們的創(chuàng)作

一定要看看我們的創(chuàng)作：

投資者中心 | 智能生活 | 時(shí)代與回響 | 令人費(fèi)解的謎團(tuán) | 印度教 | 精英開(kāi)發(fā) | JS學(xué)校

---

我們?cè)诿襟w上

科技考拉洞察 | 時(shí)代與回響世界 | 投資者中央媒體 | 令人費(fèi)解的謎團(tuán) | 科學(xué)與時(shí)代媒介 | 現(xiàn)代印度教

以上是JavaScript 生成器：通過(guò)暫停功能增強(qiáng)您的代碼！的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！