Generator函數的語法和應用

基本概念

• 狀態機，封裝了多個內部狀態；
• 返回一個遍歷器對象，經過改對象能夠一次遍歷Generator函數內部的每個狀態
• 帶*號，yeild表達式定義不一樣的內部狀態；
• 調用 Generator 函數後，該函數並不執行，返回的也不是函數運行結果，而是一個指向內部狀態的指針對象，也就是遍歷器對象；
• Generator 函數是分段執行的，yield表達式是暫停執行的標記，而next方法能夠恢復執行；

• 暫停標誌

• next（）方法容許邏輯

  • 遇到yield表達式，就暫停執行後面的操做，並將緊跟在yield後面的那個表達式的值，做爲返回的對象的value屬性值；
  • 下一次調用next方法時，再繼續往下執行，直到遇到下一個yield表達式；
  • 沒有再遇到新的yield表達式，就一直運行到函數結束，直到return語句爲止，並將return語句後面的表達式的值，做爲返回的對象的value屬性值；
  • 若是該函數沒有return語句，則返回的對象的value屬性值爲undefined；

• yield表達式只能用在 Generator 函數裏面，用在其餘地方都會報錯。

  var arr = [1, [[2, 3], 4], [5, 6]];
  var flat = function* (a) {
    a.forEach(function (item) {
      if (typeof item !== 'number') {
        yield* flat(item);
      } else {
        yield item; //forEach()的參數是一個普通函數使用yield會報錯，可使用for循環解決這個問題
      }
    });
  };
  for (var f of flat(arr)){
    console.log(f);
  }

  使用for循環改正

  var arr = [1, [[2, 3], 4], [5, 6]];
  var flat = function* (a) {
    var length = a.length;
    for (var i = 0; i < length; i++) {
      var item = a[i];
      if (typeof item !== 'number') {
        yield* flat(item);
      } else {
        yield item;
      }
    }
  };
  
  for (var f of flat(arr)) {
    console.log(f);
  }// 1, 2, 3, 4, 5, 6

• yield表達式若是用在另外一個表達式之中，必須放在圓括號裏面；
• yield表達式用做函數參數或放在賦值表達式的右邊，能夠不加括號

與Iterator的關係

能夠把 Generator 賦值給對象的Symbol.iterator屬性，從而使得該對象具備 Iterator 接口

var myIterable = {};
myIterable[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
};

[...myIterable] // [1, 2, 3]

next()方法的參數

yield表達式自己沒有返回值，或者說老是返回undefined。next方法能夠帶一個參數，該參數就會被看成上一個yield表達式的返回值。

function* f() {
  for(var i = 0; true; i++) {
    var reset = yield i;
    if(reset) { i = -1; }
  }
}

var g = f();

g.next() // { value: 0, done: false }
g.next() // { value: 1, done: false }
g.next(true) // { value: 0, done: false }

Generator 函數從暫停狀態到恢復運行，它的上下文狀態（context）是不變的。經過next方法的參數，就有辦法在 Generator 函數開始運行以後，繼續向函數體內部注入值。也就是說，能夠在 Generator 函數運行的不一樣階段，從外部向內部注入不一樣的值，從而調整函數行爲。
分析如下代碼容許的結果：

function* foo(x) {
  var y = 2 * (yield (x + 1));
  var z = yield (y / 3);
  return (x + y + z);
}

var a = foo(5);
a.next() // Object{value:6, done:false}
a.next() // Object{value:NaN, done:false}
a.next() // Object{value:NaN, done:true}

var b = foo(5);
b.next() // { value:6, done:false }
b.next(12) // { value:8, done:false }
b.next(13) // { value:42, done:true }

next()傳參，參數表明上一次yeild表達式返回的值，所以第一次使用next()傳參是無效的；

function* dataConsumer() {
  console.log('Started');
  console.log(`1. ${yield}`);
  console.log(`2. ${yield}`);
  return 'result';
}

let genObj = dataConsumer();
genObj.next();
// Started
genObj.next('a')
// 1. a
genObj.next('b')
// 2. b

若是想第一次調用next()方法就可以輸入值，能夠在Genrator函數外再包一層

function wrapper(generatorFunction) {
  return function (...args) {
    let generatorObject = generatorFunction(...args);
    generatorObject.next();
    return generatorObject;
  };
}

const wrapped = wrapper(function* () {
  console.log(`First input: ${yield}`);
  return 'DONE';
});
wrapped().next('hello!')// First input: hello!

上述代碼在wrapper函數中，首先調用一次next方法，再返回遍歷器對象。當用戶本身調用next方法時，看起來就像是第一次調用，但實際上，這是第二次調用next方法。

for...of循環

for...of循環能夠自動遍歷 Generator 函數時生成的Iterator對象，且此時再也不須要調用next方法。

function* foo() {
  yield 1;
  yield 2;
  yield 3;
  yield 4;
  yield 5;
  return 6;
}

for (let v of foo()) {
  console.log(v);
}
// 1 2 3 4 5

這裏須要注意，一旦next方法的返回對象的done屬性爲true，for...of循環就會停止；

Generator給對象添加Iterator

• 方法一

function* objectEntries(obj) {
  let propKeys = Reflect.ownKeys(obj);

  for (let propKey of propKeys) {
    yield [propKey, obj[propKey]];
  }
}

let jane = { first: 'Jane', last: 'Doe' };

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

• 方法二將 Generator 函數加到對象的Symbol.iterator屬性上面。

function* objectEntries() {
  let propKeys = Object.keys(this);

  for (let propKey of propKeys) {
    yield [propKey, this[propKey]];
  }
}

let jane = { first: 'Jane', last: 'Doe' };

jane[Symbol.iterator] = objectEntries;

for (let [key, value] of jane) {
  console.log(`${key}: ${value}`);
}
// first: Jane
// last: Doe

【完】

做者簡介：鄭佳歡，蘆葦科技web前端實習生，公司做品：口紅挑戰網紅小遊戲、服務端渲染官網。擅長網站建設、公衆號開發、微信小程序開發、小遊戲、公衆號開發，專一於前端領域框架、交互設計、圖像繪製、數據分析等研究。 訪問 www.talkmoney.cn 瞭解更多