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

讓我們從基礎(chǔ)開始。生成器是一個(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ù)。它們非常適合建立自訂迭代器。假設(shè)您要產(chǎn)生斐波那契數(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ù)產(chǎn)生斐波那契數(shù)。這是一個(gè)無(wú)限序列，但我們只計(jì)算我們需要的值。

這為我們帶來(lái)了生成器最酷的事情之一：惰性求值。他們僅在我們要求時(shí)計(jì)算值。這對(duì)於大型資料集或複雜的計(jì)算來(lái)說(shuō)非常有效率。

讓我們來(lái)看一個(gè)更實(shí)際的例子。假設(shè)您正在為大型資料集建立分頁(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ù)需要取得資料頁(yè)，而無(wú)需立即將所有內(nèi)容載入到記憶體中。

生成器在非同步程式設(shè)計(jì)方面也很出色。它們可以使非同步程式碼看起來(lái)和行為更像同步程式碼。這是使用 co 函式庫(kù)的範(fàn)例：

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è)非同步呼叫。生成器在每次收益處暫停，直到承諾解決。

產(chǎn)生器也可以用於協(xié)作多工處理。您可以建立多個(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ù)之間交替，一次執(zhí)行每個(gè)步驟。

生成器也非常適合建立狀態(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 之前產(chǎn)生其所有值。

生成器中的錯(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

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

生成器也可以用來(lái)實(shí)作回溯演算法。這是一個(gè)產(chǎn)生所有可能的項(xiàng)目組合的簡(jiǎn)單範(fà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

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

生成器真正發(fā)揮作用的一個(gè)領(lǐng)域是處理大量資料。您可以建立僅計(jì)算所需內(nèi)容的高效資料處理管道。這是一個(gè)逐行處理大檔案的範(fàn)例：

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ú)需將它們完全加載到記憶體中。

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

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)觀察者，處理它接收到的每個(gè)資料。

生成器的另一個(gè)很酷的用途是建立自訂控制結(jié)構(gòu)。這是使用生成器的重試函數(shù)的範(fàn)例：

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 的強(qiáng)大功能，可以幫助您編寫更具表現(xiàn)力、更有效率且可維護(hù)的程式碼。它們非常適合處理複雜的控制流程、管理非同步操作和處理大型資料集。雖然它們一開始看起來(lái)有點(diǎn)奇怪，但一旦您掌握了它們的竅門，您就會(huì)發(fā)現(xiàn)在專案中使用它們的各種創(chuàng)意方法。因此，繼續(xù)吧，在您的下一個(gè) JavaScript 專案中嘗試生成器。您可能會(huì)驚訝於他們可以如此簡(jiǎn)化您的程式碼！

---

我們的創(chuàng)作

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

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

---

我們?cè)诿襟w上

科技無(wú)尾熊洞察 | 時(shí)代與迴響世界 | 投資人中央媒體 | 令人費(fèi)解的謎團(tuán) | | 令人費(fèi)解的謎團(tuán) | >科學(xué)與時(shí)代媒介 |

現(xiàn)代印度教

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