ES6中Generator返回值和执行顺序

Generator

yield返回值和执行顺序

yield的返回值为该次next调用传入的参数

以下内容引自阮一峰ECMAScript 6 入门 - Generator 函数的语法

由于 Generator 函数返回的遍历器对象，只有调用next方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。

遍历器对象的next方法的运行逻辑如下。

（1）遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。

（2）下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式。

（3）如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。

（4）如果该函数没有return语句，则返回的对象的value属性值为undefined。

执行顺序

function* demo() {
  yield;
  console.log(' flag1');
  yield 123;
  console.log(' flag2');
  yield 456;
  console.log(' flag2');
  return 789; 
}
var g = demo();
console.log(g.next().value); //输出undefined
console.log('============');
console.log(g.next().value); //输出123
console.log('============');
console.log(g.next().value); //输出456
console.log('============');
console.log(g.next().value); //输出789(return的值)
console.log('============');
console.log(g.next().value); //已结束,输出undefined

运行结果,

undefined
============
 flag1
123
============
 flag2
456
============
 flag2
789
============
undefined

注意到,flag的出现都是在”===”分割线之后,表明generator函数在yield处”暂停”了

---

以yield为参数的函数将会在下次执行next的时候调用,yield返回next里传进来的参数

function* demo() {
  console.log('Hello ' + (yield)); 
  // 运行到yield先暂停,等到下一次调用next,得到参数后再执行console.log函数, 即输出:Hello b
  console.log('Hello ' + (yield 123)); 
  console.log('Hello ' + (yield 456)); 
  return 789; 
}
var g = demo();
console.log(g.next('a').value); 
//这个传入的参数没有被使用,因为第一次调用next不是从上次yield暂停的地方开始的
//第一个yield输出undefined
console.log('===============');
console.log(g.next('b').value);
//第二个yield输出123
console.log('===============');
console.log(g.next('c').value);
//第三个yield输出456
console.log('===============');
console.log(g.next().value);
//第四个输出789(return的值)
console.log('===============');
console.log(g.next().value);
//已结束,不再输出

输出结果

undefined
===============
Hello b
123
===============
Hello c
456
===============
Hello undefined
789
===============
undefined

需要注意的是,如果使用for…of循环对生成的g = demo()进行遍历,最后return的值不会被输出

function* demo() {
  yield;
  console.log(' flag1');
  yield 123;
  console.log(' flag2');
  yield 456;
  console.log(' flag2'); //这一行仍然可以被执行,但只是下面的789没有被返回而已
  return 789; 
}
var g = demo();

for(let x of g) console.log(x);

console.log(g.next());
console.log(g.next());
console.log(g.next());

最后带来generator一个让人惊艳的应用,生成斐波那契数(同样转自ECMAScript 6 入门 - Generator 函数的语法)

function* fibonacci() {
  let [prev, curr] = [0, 1];
  while(1) {
    [prev, curr] = [curr, prev + curr];
    yield curr;
  }
}

for (let n of fibonacci()) {
  if (n > 1000) break;
  console.log(n);
}