跳至主要内容

[JS] JavaScript Generator 的使用

/**
 * Generator Function 可以透過 '*' 來宣告
 * 執行 Generator 後會回傳 Iterator。
 **/

function* g() {
  // some code ...
  let valueInNext = yield '<someValueInNext>';
  console.log('valueInNext', valueInNext);
  // some code ...
  return 'ending'; // 會是最後一個 iterator 得到的 value
}

let iterator = g();

/**
 * 當我們的 Iterator 第一次使用 next() 時，
 * 函式會從頭執行到 function 中的第一個 yield。
 **/

console.log(iterator.next()); // {value: '<someValueInNext>', done: false}

/**
 * next('<value'>) 裡面代入參數時，會把回傳給 iterator 中的 yield
 **/
console.log(iterator.next('valuePassToYield')); // { value: 'ending', done: true }

建立 Generator Function​

  • Generator 是一種特殊的函式，形式上和一般的函式一樣，但是有兩個特徵：
    1. function 關鍵字與函數名之間有一個星號(*)；
    2. 函數內部使用 yield 語句，定義不同的內部狀態（yield 在英語裡的意思就是「產出」）。
  • 執行 Generator 函式的方法和一般函式一樣，只需要在函式後面加上 () 括號。不同的是，呼叫 Generator 函數後，該函數並不執行，返回的也不是函數運行結果，而是一個指向內部狀態的指針物件，這個指針物件實際上是一個 [iterator](/Users/pjchen/Projects/Notes/source/_posts/JavaScript/[JS] JavaScript 疊代器（Iterator）.md) 。
  • 下一步，必須呼叫疊代器物件的 next 方法，使得指針移向下一個狀態。也就是說，每次呼叫 next 方法，內部指針就從函數頭部或上一次停下來的地方開始執行，直到遇到下一個 yield 語句（或 return 語句）為止。換言之，Generator 函式是分段執行的，yield 語句是暫停執行的標記，而 next 方法可以恢復執行。
function* helloWorldGenerator() {
  // 第一次 next 開始
  console.log('before yield hello');
  let paramsInNextAfterHello = yield 'hello';
  // 第一次 next 結束， yield 完後停在這裡

  // 第二次 next 開始
  console.log('paramsInNextAfterHello', paramsInNextAfterHello);
  let paramsInNextAfterWorld = yield 'world';
  // 第二次 next 結束， yield 完後停在這裡

  // 第三次 next 開始
  console.log('paramsInNextAfterWorld', paramsInNextAfterWorld);
  return 'ending';
  // 第三次 next 結束， yield 完後停在這裡

  // 之後的 next 都會回傳 {done: true, value: undefined}
  console.log('after yield ending'); // 如果上面用 return 則不會執行到這行
}

var hw = helloWorldGenerator();
hw.next(); // before yield hello, Object {value: "hello", done: false}
console.log('------');
hw.next('after yield hello'); // after yield hello, Object {value: "world", done: false}
console.log('------');
hw.next('after yield world'); // after yield world, Object {value: "ending", done: true}
console.log('------');
hw.next(); // Object {value: undefined, done: true}
console.log('------');
hw.next(); // Object {value: undefined, done: true}

Sample Code​

Create a Generator Function @ JSFiddle

yield 的使用​

  • 疊代器物件的 next 方法的運行邏輯如下

    • 遇到 yield 語句，就暫停執行後面的操作，並將緊跟在 yield 後面的表達式的值，作為返回物件的屬性值（value）
    • 下一次呼叫 next 方法時，再繼續往下執行，直到遇到下一個 yield 語句。
    • 如果沒有再遇到新的 yield 語句，就一直運行到函數結束，直到 return 語句為止，並將 return 語句後面表達式的值，作為返回物件的屬性值（value），且此時 done 為 true。
    • 如果該函數沒有 return 語句，value 為最後一個 yield 後表達式的值，但此時 done 仍為 false，要到下一個 next 後 done 才會是 true。

  • yield 語句用作函數參數或放在賦值表達式的右邊，可以不加括號。

function* demo() {
  let input = yield; // OK
}
  • yield 句本身沒有返回值，或者說總是返回 undefined。
let a = yield 'Hello'      // a === undefined
  • next 方法可以帶一個參數，該參數就會被當作上一個在 generator 中 yield 語句的返回值。
g.next(3); // a === 3

❗ 注意，由於 next 方法的參數表示上一個 yield 語句的返回值，所以第一次使用 next 方法時，不能帶有參數

  • V8 引擎直接忽略第一次使用 next 方法時的參數，只有從第二次使用 next 方法開始，參數才是有效的。從語義上講，第一個 next 方法用來啟動疊代器物件，所以不用帶有參數。
/**
 * yield 本身沒有返回值，或者說總是返回 undefined
 * 但我們可以透過代入 next('<value'>) 來給 yield 值
 **/

function* f() {
  for (var i = 0; true; i++) {
    console.log('i-before reset', i);
    let reset = yield i;
    console.log('i-after reset', i);
    console.log('reset ' + reset + ', i ' + i);
    if (reset) {
      i = -1;
    }
  }
}

var g = f();

g.next(); // "i-before reset 0", Object {value: 0, done: false}
g.next(); // "i-after reset 0", "reset undefined", "i-before reset 1", i 0, Object {value: 1, done: false}
g.next(); // "i-after reset 1", "reset undefined, i 1", "i-before reset 2", Object {value: 2, done: false}
g.next(true); // "i-after reset 2", "reset true, i 2", "i-before reset 0", Object {value: 0, done: false}
g.next(); // "i-after reset 0", "reset undefined, i 0", "i-before reset 1" Object {value: 1, done: false}

在看下面的例子

/**
 * V8 引擎直接忽略第一次使用 next 方法時的參數，
 * 只有從第二次使用 next 方法開始，參數才是有效的。
 * 從語義上講，第一個 next 方法用來啟動疊代器物件，
 * 所以不用帶有參數。
 **/

function* f2() {
  for (var i = 0; true; i++) {
    let reset = yield i;
    console.log('afterReset ' + reset + ', i ' + i);
    if (reset) {
      i = -1;
    }
  }
}

var g2 = f2();

g2.next('a'); // Object {value: 0, done: false}
g2.next('b'); // "afterReset b, i 0", Object {value: 0, done: false}
g2.next('c'); // "afterReset c, i 0", Object {value: 0, done: false}
g2.next(true); // "afterReset true, i 0", Object {value: 0, done: false}
g2.next('e'); // "afterReset e, i 0", Object {value: 0, done: false}

返回結果

[object Object] {
  done: false,
  value: 0
}
"-----------"
"reset b, i 0"
[object Object] {
  done: false,
  value: 0
}
"-----------"
"reset c, i 0"
[object Object] {
  done: false,
  value: 0
}
"-----------"
"reset true, i 0"
[object Object] {
  done: false,
  value: 0
}
"-----------"
"reset e, i 0"
[object Object] {
  done: false,
  value: 0
}
  • 另外，yield 語句如果用在一個表達式之中，必須放在圓括號裡面(yield 123)。
// yield 語句如果用在一個表達式之中，必須放在圓括號裡面。
function* demo() {
  console.log('Hello' + yield); // SyntaxError
  console.log('Hello' + yield 123); // SyntaxError

  console.log('Hello' + (yield)); // OK
  console.log('Hello' + (yield 123)); // OK
}

How to use yield in Generator Function @ PJCHENder JSFiddle

實際應用​

搭配 while 使用，讓該 iterator 不會進入 done​

在 generator function 中使用 while (true) { ... } 這種寫法時，可以製造出一個不會終止的 iterator，也就是 done 一直都會是 false，因此可以不斷的透過 next('<value>') 把資料帶入 generator 中：

function* infiniteGenerator() {
  while (true) {
    const result = yield;
    console.log('get result: ', result);
  }
}

// Initialize the generator
const fetchResult = infiniteGenerator();
fetchResult.next();

// Feed result as parameter of next
fetchResult.next('foo');
fetchResult.next('bar');

Sample Code​

搭配 for 迴圈，在 iterator 執行一定次數後才做下一件事​

function* generatorWithForLoop() {
  for (let i = 1; i <= 3; i++) {
    const result = yield i;
    console.log('result', result);
  }

  console.log('Start do something here...');
}

在 Generator function 中使用 for 迴圈，可以確保該 iterator 執行特定次數後，才會開始 Start do something：

搭配 for...of，使用 Generator Function 建立 Iterator​

  • for...of 可以自動疊代 Generator 函數時生成的 Iterator 物件，且此時不再需要呼叫 next 方法。
  • 下面代碼使用 for...of 迴圈，依次顯示 5 個 yield 語句的值。這裡需要注意，一旦 next 方法的返回物件的 done 屬性為 true 時，for...of 就會中止，且不包含該返回物件，所以上面代碼的 return 語句返回的 6，不包括在 for...of 之中
/**
 * 一旦 next 方法的返回物件的 done 屬性為 true時，
 * for...of 疊代就會中止，且不包含該返回物件
 **/
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
}

Sample Code​

利用 Generator Function 建立客制化的 Iterator：​

let obj = {
  [Symbol.iterator]: g,
  firstName: 'Aaron',
  lastName: 'Chen',
  hobbies: ['programming', 'biking', 'sports'],
};

function* g() {
  let hobbies = this.hobbies;
  for (let i = 0; i < hobbies.length; i++) {
    yield hobbies[i];
  }
}

for (let item of obj) {
  console.log(item); // programming, biking, sports
}

Sample Code​

透過 Generator Function 仿造 Object.Entries() 方法​

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

Sample Code​

Error Handling in Generator​

/**
 * Error Handling in Generator
 * 我們可以用 iterator.throw() 搭配 try...catch。
 * 另外，也可以用 iterator.return() 來改變 value 的值
 **/

let hobbies = ['programming', 'biking', 'sports', 'computer', 'royal host'];

function* g(hobbies) {
  for (let i = 0; i < hobbies.length; i++) {
    try {
      let valueInNext = yield hobbies[i];
      console.log('valueInNext', valueInNext);
    } catch (e) {
      console.log('error:', e);
    }
  }
}

let iterator = g(hobbies);
iterator.next(); // Object {value: "programming", done: false}
iterator.throw('Some thing Wrong'); // "error: Some thing Wrong", Object {value: "biking", done: false}
iterator.next('favorite'); // "valueInNext favorite", Object {value: "sports", done: false}
iterator.next(); // "valueInNext undefined", Object {value: "computer", done: false}
iterator.return('Give Value Inside'); //  Object {value: "Give Value Inside", done: true}
iterator.next(); // Object {value: undefined, done: true}

Error Handling with Try Catch in Generator @ PJCHENder JSFiddle

Demo Code​

Create a Generator Function @ JSFiddle How to use yield in Generator Function @ PJCHENder JSFiddle Use Generator with for...of @ PJCHENder JSFiddle Error Handling with Try Catch in Generator @ PJCHENder JSFiddle

資料來源​

Generator 函數的語法 @ ECMA Script 入門 by 阮一峰