ES6 新特性之Generator

1：基本概念

實際上Generator就是遍歷器的一個生成器，咱們能夠用Generator來生成一個遍歷器。Generator有兩個明顯的特色：第一個是function關鍵字與函數名之間有一個星號，通常而言是將二者寫在一塊兒的。第二個是在函數體內部有一個yield的關鍵字。

function* generator(){
        yield 1;
        yield 2;
        return 3;  //return表明next的結束，對應着Generator遍歷器的結束
    }
    const firstGenerator = generator();
    //
    firstGenerator.next()
    { value: 1, done: false }
    firstGenerator.next()
    { value: 2, done: false }
    firstGenerator.next()
    { value: 3, done: true }
    firstGenerator.next()
    { value: undefined, done: true }
    firstGenerator.next()
    { value: undefined, done: true }

2：執行過程

調用Generator函數後並不執行，第一次調用不執行，只有在調用next的時候纔會真正的執行。

function* generator(){
        console.log(1);
        yield 1;
        console.log(2);
        yield 2;
        console.log(3)
        return 3;
        console.log(4);
    }
    const gen = generator();

調用next方法開始執行，指針移向下一個狀態

function* generator(){
        console.log(1);
        yield 1;
        console.log(2);
        yield 2;
        console.log(3)
        return 3;
        console.log(4);
    }
    const gen = generator();
    gen.next();
    
    // 1
       { value: 1, done: false }

執行到yield或者是return語句，每個next只能走到下一個yield或者是直接跨到了return。

function* generator() {
      console.log(1);
      yield 1;
      console.log(2);
      yield 2;
      console.log(3);
      return 3;
      console.log(4);
    }
    const g = generator();
    g.next();
    g.next();
    
    // 1
       2
       { value: 2, done: false }

當next時，會從上一次暫停位置開始執行，直到return，return是退出next的一個標誌。

function* generator() {
      console.log(1);
      yield 1;
      console.log(2);
      yield 2;
      console.log(3);
      return 3;
      console.log(4);
    }
    
    const g = generator();
    g.next();
    g.next();
    g.next();
    g.next();
    
    // 1
       2
       3
       { value: undefined, done: true }

3：Generator方法

• next，若是傳了參數被看成上一個yield表達式的返回值，說明next是能夠傳參數的，若是沒傳時undefined。

  function* generator(x) {
    var y = 3 * (yield (x + 3));
    var z = yield (y / 2);
    return (x + y + z) * 2;
  }
  
  const gen1 = generator();
  
  
  // gen1.next(); 
     { value: NaN, done: false } 
     gen1.next();
     { value: NaN, done: false } */
     gen1.next();
     { value: NaN, done: false } */
     gen1.next();
     { value: undefined, done: true }
  function* generator(x) {
    var y = 3 * (yield (x + 3));
    var z = yield (y / 2);
    return (x + y + z) * 2;
  }
  
  const gen2 = generator(10);
  gen2.next();
  // { value: 13, done: false } 
  /*
  x = 10
  13 = 10 + 3
  */
  
  gen2.next(10);
  // { value: 15, done: false }
  /*
  y = 30
  15 = 3 * 10 / 2
  */
  
  gen2.next(10);
  // { value: 100, done: false }
  /*
  z = 10
  100 = (10 + 10 + 30) * 2
  */

• throw，函數外拋出錯誤在Generator函數體內捕獲

  function* generator(x) {
    try {
      yield;
    } catch (err) {
      console.log('inner error', err);
    }
  }
  
  const g = generator();
  g.next();
  // { value: undefined, done: false }
  
  g.throw(new Error('123'))
  // inner error Error: 123

• return ，終結當前的Generator函數。

4：Generator函數應用

• yield*，在Generator函數內部調用另外一個Generator函數，無需手動遍歷。

  function* generator1(){
    yield* [1, 2, 3];
  }
  generator1().next();
  // { value: 1, done: false } 
  
  function* generator2(){
    for (var value of [1, 2, 3]) {
      yield value;
    }
  }
  generator2().next();
  // { value: 1, done: false } 
  
  function* generator3(){
    yield [1, 2, 3];
  }
  generator3().next();
  // { value: Array(3), done: false }

5：Generator函數應用

• for of，遍歷return前的數據

  function* generator() {
    yield 1;
    yield 2;
    yield 3;
    return 4;
  }
  
  for (let s of generator()) {
    console.log(s);
  }
  //  1
      2
      3

• 狀態機

  const status = function* () {
    while (true) {
      console.log('On');
      yield true;
      console.log('Off');
      yield false;
    }
  }();
  status.next();
  
  // On
     {value: true, done: false}

• 網絡請求

  import axios from 'axios';
  
  function* generator(){
    const url = 'https://xxx.xxx.com';
    const result = yield fetch(url);
    return result();
  }

• 異步操做文件流