ES6之generator函數

1. generator函數定義

/*Generator生成器函數：顧名思義，它是一個生成器，它也是一個狀態機，內部擁有值及相關的狀態，生成器返回一個迭代器Iterator對象，我們可以通過這個迭代器，手動地遍歷相關的值、狀態，保證正確的執行順序。用於解決ajax的異步編程解決方案。*/
// 存在形式 
function* 函數名() {
// 執行內容
}
// 調用方式
函數名();//這種方式沒有辦法執行
↓↓↓
let 變量 = 函數名();
變量.next();
變量.next().value;//獲取函數的返回值

2. 相關概念之一 yield

// 在generator函數的執行中,出現yield關鍵字就暫停執行,其後內容當遇到next()執行
function* next_id() {
  let x = 1;
  while(x){
   yield x++;
  }
}
let g = next_id();
console.log(g.next().value);//1 
console.log(g.next().value);//2
console.log(g.next().value);//3
console.log(g.next().value);//4
... 

3. 相關概念之二 yield*

function* gen(){
 yield* ["a", "b", "c"];
}
let g = gen();
console.log(g.next().value);//a 
console.log(g.next().value);//b
console.log(g.next().value);//c
/* 當yield*爲一個數組時,基本可以相當於for...of語法 */
//for...of
let arr = [3, 5, 7];
for(let i of arr){
console.log(i);//3 5 7
}

4. 相關概念之三 next

//1)return終結遍歷，之後的yield語句都失效；next返回本次yield語句的返回值。
//2)return沒有參數的時候，返回{ value: undefined, done: true }；next沒有參數的時候返回本次yield語句的返回值。
//3)return有參數的時候，覆蓋本次yield語句的返回值，也就是說，返回{ value: 參數, done: true }；next有參數的時候，覆蓋上次yield語句的返回值，返回值可能跟參數有關（參數參與計算的話），也可能跟參數無關（參數不參與計算）。
function* fib(max) {
   var
       t,
       a = 0,
       b = 1,
       n = 0;
   while (n < max) {
       yield a;
       [a, b] = [b, a + b];
       n ++;
   }
   return;
}
var f = fib(5);
f.next(); // {value: 0, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 2, done: false}
f.next(); // {value: 3, done: false}
f.next(); // {value: undefined, done: true}


//next()函數在調用時可以傳參.
function* showNumbers() {
   var one = yield 1;
   var two = yield 2 * one;
   yield 3 * two;
}
var g = showNumbers();
g.next().value // 1
g.next().value // NaN  one的值並不會保留
g.next(2).value // 6 --> 3*2 2爲傳遞的參數

生成器函數給異步回調一種新的構思思路,函數內的內容可以分步執行,通過相應語法多次返回,順序編寫異步函數,對於回調地獄提供了一種新的解決思路.在函數運行過程中,通過yield分步執行代碼,用next()有選擇的執行下一步.具體可以和promise做對比,食用更佳!

參考文檔:廖雪峯官網之generator