Generator函数、yield表达式、next方法在yield中的使用

1、Generator函数：异步编程解决方案

语法上：一个状态机（封装了多个内部状态，返回遍历器对象生成函数）

形式上：一个函数

①function关键字与函数名之间有一个*星号

②函数体内部使用yield表达式定义不同的内部状态

// 产出3个状态，返回一个指向内部状态的指针对象

function * helloWorldGenerator(){

yield ‘hello’; //  hw.next() --> { value: 'hello', done: false }

yield ‘world’;    //  hw.next() -->  { value: 'world', done: false }

return ‘ending’;  //  hw.next().next() --> { value: undefined, done: true }

}

var hw=helloWorldGenerator();

 

2、yield表达式:暂停标志，每次next到yield就暂停执行

①只能用在generator函数里面，如果要将yield用在循环里，不能用forEach，要用for。因为forEach方法的参数是一个普通函数

②yield表达式如果用在另一个表达式中，必须放在()圆括号里面

function* demo() {

  console.log('Hello' + yield); // SyntaxError  

  console.log('Hello' + yield 123); // SyntaxError

  console.log('Hello' + (yield)); // OK  

  console.log('Hello' + (yield 123)); // OK

}

③yield表达式用作函数参数或放在赋值表达式的右边，可以不加括号。

function* demo() {
  foo(yield 'a', yield 'b'); // OK  
  let input = yield; // OK
}

④一个函数只能执行一次return语句，但是可以执行多次yield表达式

 

3、next方法的参数：

①第一次调用a.next()无法输出参数

②每次a.next(赋值)都等于函数体里面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 }

​

上面代码中，第二次运行next方法的时候不带参数，导致 y 的值等于2 * undefined（即NaN），除以 3 以后还是NaN，因此返回对象的value属性也等于NaN。第三次运行Next方法的时候不带参数，所以z等于undefined，返回对象的value属性等于5 + NaN + undefined，即NaN。

如果向next方法提供参数，返回结果就完全不一样了。上面代码第一次调用b的next方法时，返回x+1的值6；第二次调用next方法，将上一次yield表达式的值设为12，因此y等于24，返回y / 3的值8；第三次调用next方法，将上一次yield表达式的值设为13，因此z等于13，这时x等于5，y等于24，所以return语句的值等于42。

注意，由于next方法的参数表示上一个yield表达式的返回值，所以在第一次使用next方法时，传递参数是无效的。V8 引擎直接忽略第一次使用next方法时的参数，只有从第二次使用next方法开始，参数才是有效的。从语义上讲，第一个next方法用来启动遍历器对象，所以不用带有参数。

再看一个通过next方法的参数，向 Generator 函数内部输入值的例子。

 

function* dataConsumer() {
  console.log('Started');
  console.log(`1. ${yield}`);
  console.log(`2. ${yield}`);
  return 'result';
}

let genObj = dataConsumer();
genObj.next();
// Started
genObj.next('a')
// 1. a
genObj.next('b')
// 2. b

​

上面代码是一个很直观的例子，每次通过next方法向 Generator 函数输入值，然后打印出来。

如果想要第一次调用next方法时，就能够输入值，可以在 Generator 函数外面再包一层。

 

function wrapper(generatorFunction) {
  return function (...args) {
    let generatorObject = generatorFunction(...args);
    generatorObject.next();
    return generatorObject;
  };
}

const wrapped = wrapper(function* () {
  console.log(`First input: ${yield}`);
  return 'DONE';
});

wrapped().next('hello!')
// First input: hello!

​

上面代码中，Generator 函数如果不用wrapper先包一层，是无法第一次调用next方法，就输入参数的。