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();
      }
  

• 异步操作文件流