理解 ES6 語法中 yield* 關鍵字的作用

在 ES6 中新增了生成器函數的語法，本文解釋了與生成器函數有關的 yield* 關鍵字，及其使用場景。

描述

根據語法規范，yield* 的作用是代理 yield 表達式，將需要函數本身產生（yield）的值委托出去。yield* 后面跟一個生成器函數、或其他可迭代的對象（如一個數組、字符串、arguments對象）。
yield* 表達式的返回值，就是其后面可迭代對象迭代完畢時的返回值。

舉例

第 1 步，構造一個生成器函數。

function* numbers () {
     yield 1;
     yield 2;
   
     return 'numbers';
 }

第 2 步，在上述生成器函數外層做一個代理。

function* delegate () {
     var str = yield* numbers();
     console.log(str);
     
     yield 3;

     return 'delegate';
}

第 3 步，構造迭代器。

var iterator = delegate();

第 4 步，輸出迭代結果。

 /**
  * 第一次輸出結果
  * { value: 1, done: false }
  */
 console.log(iterator.next()) // 第一次輸出
 
 /**
  * 第二次輸出結果
  * { value: 2, done: false }
  */
 console.log(iterator.next()) // 第二次輸出
 
 /**
  * 第三次輸出結果
  * numbers
  * { value: 3, done: false }
  */
 console.log(iterator.next()) // 第三次輸出
 
 /**
  * 第四次輸出結果
  * { value: 'delegate', done: true }
  */
 console.log(iterator.next()) // 第四次輸出

輸出結果描述

1. 第三次輸出時，輸出兩行內容。第一行內容為 delegate 函數中 console.log(str) 輸出的，值為 numbers 函數的返回值。
2. 第四次輸出時，輸出一行內容，其中的 value 值為 delegate 函數的返回值。此時，done 屬性為 true。

擴展閱讀

• yield*關鍵字