2020-09-22

Generator 生成器

例如Promise对象，在ES6中还提供了Generator函数用于处理异步操作。Promise对象在处理异步操作时于传统的异步操作有些类似，操作成功时执行一种操作，失败时执行另一种操作,但是在Generator函数中，可以依次执行多个操作

声明格式

 function* addresses(){ //function* 函数名(){}
      yield 'BeiJing';
      yield 'ShangHai';
      return 'NanJing';
      }
      const fun=address();

创建一个Generator函数后，其调用方式与一般函数相同，都是函数名()，但此时并没有实际执行函数体内的代码，而是需要调用遍历器的next方法，移动指针到下一状态。例如执行fun.next(),控制台输出如下：

Object { value:"BeiJing",done:false}

再次执行fun.next()

  Object { value:"ShangHai",done:false}

再次执行fun.next()

  Object { value:"NanJing",done:false}

可以看到，每次调用一个next方法，函数体都会从上往下执行，遇到yield表达式或者return语句就会停止执行，直到函数体的结束位置。每个yield表达式都会输出一个对象，该对象的value属性值就是返回的值，而done属性则表示指针是否移动到结束位置。如果函数中所有的yield表达式和return语句都已经返回了值，此时继续执行next方法，就会输出一个值未定义的对象，如下：

Object { value: undefined, done: true}

ES6next()方法

下面参考自ixygj197875

yield表达式本身没有返回值，或者说总是返回undefined。next()方法可以带一个参数，该参数就会被当作是上一个yield表达式返回值
例子如下：

function* f() {
  for(var i = 0; true; i++) {
    var reset = yield i;
    if(reset) { i = -1; }
  }
}
var g = f();
g.next() // { value: 0, done: false }
g.next() // { value: 1, done: false }
g.next(true) // { value: 0, done: false }//参考自ixygj197875

上面先定义一个无限运行的Generator函数f(也就是不会输出一个值未定义的对象),如果next()方法没有参数，每次运行到yield表达式，变量reset值总是undefined.
第一次运行g.next(),运行到函数第三行遇到yield停止，该yield表达式输出的对象的value值为0(i=0).
第二次运行g.next(),函数自第一次停止的位置向下运行，reset=undefined,i自增为1，再运行至yield表达式停止，输出对象value值=1(i=1).
第三次运行，next()带参数true，那么yield表达式被替换为true，reset=true，i=-1，继续i自增为0，再运行至yield表达式停止；

再看一个例子

function* foo(x) {
  var y = 2 * (yield (x + 1));
  var z = yield (y / 3);
  return (x + y + z);
}
var a = foo(5);
a.next() // Object{value:6, done:false}
a.next() // Object{value:NaN, done:false}
a.next() // Object{value:NaN, done:true}
var b = foo(5);
b.next() // { value:6, done:false }
b.next(12) // { value:8, done:false }
b.next(13) // { value:42, done:true }

第一个a.next();函数运行到第一行yield表达式停止，输出对象的value值为(5+1=)6.
第二个a.next();函数自第一次停止位置执行，到下一行yield表达式停止。因为next()方法没有带参数，也就是上一个yield表达式被替换为undefined,y的值等于2*undefined(即NaN)，除3仍是NaN，所以此yield表达式输出对象的value值为NaN
第三个a.next();函数自上一次停止位置继续向下遇到return语句停止，由于不带参，y=NaN，z=undefined(带参y仍为NaN，因为参数只替换上一个yield表达式)return语句输出对象value值=5 + NaN + undefined，即NaN

第一个b.next();与上面第一个a.next();原理相同
第二个b.next(12);遇到第二个yield语句停止，由于带了参数，将上一行yield表达式的值设为12，因此y=24，此yield表达式输出对象的值就变成8(24/3)
第三个b.next(13);遇到return语句停止，带参，将上一行yield表达式替换为13，z=13。输出对象的value值=42(5+24+13)，函数语句执行完毕，done:true

更高级用法待完善

参考文章 here

时间:2020-09-22 22:38 晚安各位