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

• 异步操作文件流

转载于:https://my.oschina.net/u/4144971/blog/3098079