今天我們要講的是JavaScript中一個不太常用的Generator語法。我很少看到有人在實際項目開發(fā)中使用它。 

可能是因為它的語法比較復(fù)雜，而且是 async/awiatcan ，所以人們很少使用它。然而，Generatorit 仍然是。

今天我們就從基礎(chǔ)開始練習(xí)Generator。

Generator介紹

JavaScript GeneratorE6是引入的一種新型函數(shù)，可以生成多個值序列，可以暫停和恢復(fù)執(zhí)行，使我們能夠更簡單、高效地實現(xiàn)迭代器。

如果我們看到一個函數(shù)后面跟著一個 * 符號，那么它就是一個 Generatorfunction ：

function* myGenerator() {
  // Generator function
}

GeneratorFunctions 可以使用yield語句來定義要生成的值的序列。 

每當(dāng)yield語句時，Generator函數(shù)就會暫停執(zhí)行并返回一個包含當(dāng)前生成值的對象，然后執(zhí)行流程將暫停，直到下一次調(diào)用generator函數(shù)。 

它的返回值是一個迭代器，可以通過調(diào)用 next() 方法來獲取下一個生成的值。Generator函數(shù)中的所有yield語句都執(zhí)行完畢后，done屬性為true，表示generator函數(shù)已經(jīng)結(jié)束（這里的流程描述比較抽象，后面用實際案例來解釋會更好）。

GeneratorFunctions 是 Python 首先從 Coroutine 語言中的 coroutine() 概念演變而來，然后引入到 E6 標(biāo)準(zhǔn)中，希望用它來提高 JavaScript 中處理異步編程的能力。

Generator基本語法

GeneratorFunctions 使用 function*the 關(guān)鍵字定義，它可以包含多個yield表達式來控制函數(shù)執(zhí)行的流程：

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

調(diào)用Generator函數(shù)并不執(zhí)行函數(shù)內(nèi)部的代碼，而是返回一個迭代器對象，next()通過調(diào)用這個對象的方法來執(zhí)行函數(shù)的代碼，并返回yield表達式返回的值：

const myGeneratorIterator = myGenerator();
console.log(myGeneratorIterator.next()); // print { value: 1, done: false }
console.log(myGeneratorIterator.next()); // print { value: 2, done: false }
console.log(myGeneratorIterator.next()); // print { value: 3, done: false }
console.log(myGeneratorIterator.next()); // print { value: undefined, done: true }

Generator函數(shù)執(zhí)行過程中，當(dāng)yieldan表達式時，函數(shù)的執(zhí)行會被掛起，并將表達式的值返回給調(diào)用者。 

當(dāng)next()方法時，函數(shù)將從中斷處繼續(xù)執(zhí)行；我們可以在函數(shù)中指定返回一個最終返回值，該值將被包裝在包含要返回的屬性的完成對象中：

function* myGenerator() {
  console.log('Start');
  yield 1;
  console.log('Middle');
  yield 2;
  console.log('End');
  return 'Done';
}


const myGeneratorIterator = myGenerator();
console.log(myGeneratorIterator.next()); // print Start, { value: 1, done: false }
console.log(myGeneratorIterator.next()); // print Middle, { value: 2, done: false }
console.log(myGeneratorIterator.next()); // print End, { value: 'Done', done: true }

生成器的高級使用

yield*表達式

Yield* 允許 Generatorus 調(diào)用另一個 Generator 函數(shù)或函數(shù)內(nèi)的可迭代對象。

當(dāng) Generatora 函數(shù)到達yield*表達式時，它會暫停執(zhí)行并將執(zhí)行轉(zhuǎn)移到另一個 Generator 函數(shù)或可迭代對象。 

執(zhí)行權(quán)不會返回到原來的Generatorfunction。

function* foo() {
  yield 1;
  yield 2;
}


function* bar() {
  yield* foo();
  yield 3;
}


for (let value of bar()) {
  console.log(value); // print 1, 2, 3
}

在這個例子中，表達式inGenerator函數(shù)調(diào)用該函數(shù)并將其迭代結(jié)果依次返回給該函數(shù)。bar()yield* foo()foo()bar()

數(shù)據(jù)交互

在Generator函數(shù)中，可以使用yield表達式將數(shù)據(jù)返回給調(diào)用者，調(diào)用者next()可以通過Generator方法將數(shù)據(jù)傳遞給函數(shù)。 

這使得調(diào)用者和 Generator 函數(shù)之間能夠進行數(shù)據(jù)交互。

function* foo() {
  let x = yield;
  yield x * 2;
}


let gen = foo();
gen.next(); // start generator
gen.next(10); // pass 10，print 20

在這個例子中，foo()函數(shù)的next()在第一次調(diào)用該方法時會停在第一個yield語句處，等待外部傳入的數(shù)據(jù)。 

然后，當(dāng)next()方法時將從外部傳入的數(shù)據(jù)作為yield表達式的值，然后向下執(zhí)行，直到下一個yield表達式返回數(shù)據(jù)。

實際用例

異步編程

GeneratorFunctions 還可以用于實現(xiàn)異步編程?？梢酝ㄟ^調(diào)用next()方法和關(guān)鍵字：yieldPromise來控制函數(shù)的執(zhí)行狀態(tài)

function* myGenerator() {
  const result1 = yield new Promise((resolve) => setTimeout(() => resolve('first'), 1000));
  console.log(result1);
  const result2 = yield new Promise((resolve) => setTimeout(() => resolve('second'), 2000));
  console.log(result2);
  const result3 = yield new Promise((resolve) => setTimeout(() => resolve('third'), 3000));
  console.log(result3);
}


const generator = myGenerator();
const promise = generator.next().value;
promise.then((result) => generator.next(result).value)
  .then((result) => generator.next(result).value)
  .then((result) => generator.next(result).value);

看起來是不是和 async/awaitof 角色很相似，下面是兩種語法的一些比較：

優(yōu)勢：

控制流程更靈活：可以使用 Generator 函數(shù)控制異步操作的執(zhí)行順序，多個異步操作可以按順序執(zhí)行，每個操作完成后執(zhí)行下一個操作，控制流程更靈活。

Generator函數(shù)的狀態(tài)可以復(fù)用：Generator函數(shù)的狀態(tài)可以保存在對象中，需要的時候函數(shù)可以繼續(xù)執(zhí)行，并且可以使用保存的狀態(tài)繼續(xù)異步操作。

更通用：GeneratorFunctions 可用于處理各種類型的異步操作，包括事件、回調(diào)、迭代器和 Promisemore 。

缺點：

更高的代碼復(fù)雜性：使用 Generator 函數(shù)可能會增加代碼的復(fù)雜性，因為需要額外的代碼和處理步驟。

可讀性差：對比async/await，Generator函數(shù)的語法和代碼結(jié)構(gòu)都比較復(fù)雜，可讀性不如async/await。

控制異步進程

使用 Generatorfunctions 也非常方便。假設(shè)有一個需求場景API需要獲取，所有數(shù)據(jù)準(zhǔn)備好后進行下一步。 

此時可以使用Generator函數(shù)讓這個異步控制流程更加清晰：

function* fetchAllData() {
  const data1 = yield fetch('api1');
  const data2 = yield fetch('api2');
  const data3 = yield fetch('api3');
  return [data1, data2, data3];
}


function run(generator) {
  const iterator = generator();


  function handle(iteratorResult) {
    if (iteratorResult.done) {
      return Promise.resolve(iteratorResult.value);
    }


    return Promise.resolve(iteratorResult.value)
      .then(res => handle(iterator.next(res)));
  }


  return handle(iterator.next());
}


run(fetchAllData).then(data => {
  // handle all data
  console.log(data);
});

處理大數(shù)據(jù)可以節(jié)省內(nèi)存

在處理大數(shù)據(jù)集時，如果一次性將所有數(shù)據(jù)加載到內(nèi)存中，會造成內(nèi)存浪費和程序性能下降。 

Generator函數(shù)可以用來按需處理數(shù)據(jù)，將數(shù)據(jù)一一讀取并轉(zhuǎn)換，減少內(nèi)存占用，提高程序性能。

function* dataGenerator() {
  let index = 0;
  while (true) {
    yield index++;
  }
}


function* processData(data, processFn) {
  for (let item of data) {
    yield processFn(item);
  }
}


const data = dataGenerator();


const processedData = processData(data, item => item * 2);


for (let i = 0; i < 500; i++) {
  console.log(processedData.next().value);
}

實現(xiàn)狀態(tài)機

GeneratorFunctions 也可用于實現(xiàn)狀態(tài)機。狀態(tài)機是由一組狀態(tài)和狀態(tài)之間的轉(zhuǎn)移規(guī)則組成的數(shù)學(xué)模型，可以用來描述系統(tǒng)的行為和狀態(tài)。 

在實際開發(fā)中，狀態(tài)機可以用來處理復(fù)雜的業(yè)務(wù)邏輯，比如表單驗證、工作流控制等。

使用Generator函數(shù)實現(xiàn)狀態(tài)機的過程如下：

定義狀態(tài)機的各種狀態(tài)，每個狀態(tài)對應(yīng)一個 Generatorfunction 。

狀態(tài)之間的轉(zhuǎn)換是使用 Generatorfunction 的 statements.yield 實現(xiàn)的

調(diào)用Generator函數(shù)時，使用循環(huán)依次執(zhí)行各個狀態(tài)，直到狀態(tài)機完成。

這是 Generator 實現(xiàn)的示例：

function* stateMachine() {
  let state = 'start';


  while (true) {
    switch (state) {
      case 'start':
        console.log('Enter start state');
        state = yield 'start';
        break;


      case 'middle':
        console.log('Enter middle state');
        state = yield 'middle';
        break;


      case 'end':
        console.log('Enter end state');
        state = yield 'end';
        break;
    }
  }
}


const sm = stateMachine();


console.log(sm.next().value); // Enter start state
console.log(sm.next('middle').value); // Enter middle state
console.log(sm.next('end').value); // Enter end state

最后

Generator與async/await相比，語法更加復(fù)雜，需要手動控制執(zhí)行過程，使用起來相對麻煩。這也是我很少看到Generatorit被使用的原因之一。

這種語法實際上并不像看上去那樣簡潔易懂。 

但是在做一些復(fù)雜的控制流和狀態(tài)機處理的時候還是很有用的，Generator可以讓我們的流程更加清晰。