es6之generator詳解

generator小試牛刀

• generator 簡介

  generator:您可以將生成器視為可以暫停和恢復的程式（程式碼段),程式碼在執行的過程中可以主要交出控制權
  genearator 語法:function *是一個新的關鍵字用於生成器函式（也有生成器方法）。
  yield是generator可以自行暫停的運算子。此外，generator還可以通過yield接收輸入和傳送輸出。

   function* genFunc() {
    // (A)
    console.log('First');
    yield;
    console.log('Second');
   }
    const genObj = genFunc();
    genObj.next();
    // Output: First
    genObj.next();
    // output: Second

1. 當您呼叫生成器函式genFunc()時，您將獲得可用於控制程式的生成器物件genObj
   此時該生成器物件裡面的程式碼還沒有執行,該程式最初在行A中暫停。
2. genObj.next()恢復執行，
3. genFunc()中的yield將暫停執行

generator 函式的不同種類

• generator 函式

 function* genFunc() { 
     ··· 
    }
 const genObj = genFunc();

• generator函式表示式

 const genFunc = function* () { 
     ··· 
  };
 const genObj = genFunc();

• 物件中的generator方法

 const obj = {
     * generatorMethod() {
         ···
     }
 };
 const genObj = obj.generatorMethod();

• 類中的generator方法

 class MyClass {
     * generatorMethod() {
         ···
     }
 }
 const myInst = new MyClass();
 const genObj = myInst.generatorMethod();

使用案例

有人問了，這generator有什麼用了，generator返回的物件是可迭代的;每個產量都有助於迭代值的序列。

• 使用生成器實現迭代.

function * objectEntries(obj){
   const objKeys=Reflect.ownKeys(obj)
   for(const objKey of objKeys){
       yield [objKey,obj[objKey]]
   }
}

const jane = { first: 'Jane', last: 'Doe' };
for (const [key,value] of objectEntries(jane)) {
    console.log(`${key}: ${value}`);
}

• 解決非同步回撥
  您可以使用generator極大地簡化與Promises的工作。我們來看看一個基於Promise的函式fetchJson（）以及如何通過generator進行改進。