ES6--generator概念及写法(含yield与next执行机制分析)

一、Generator描述

ES6提供的异步编程解决方案。Generator函数是一个状态机，内部封装了多种状态；还是一个遍历器生成函数，返回的遍历器对象可以遍历Generator函数内部的每一个状态。

二、写法

除普通函数的特征外还有两个特征：

1. function关键字与函数名之间有一个星号。
2. 函数体内部使用yield表达式，定义不同内部状态。

写法如下：

// Gerneator函数hello内部有两个`yield`表达式`hello`和`world`，且函数有三个状态：hello,world和return语句
function* hello() {
    yield 'hello';
    yield 'world';
    return 'ending';
}

var hw = hello();//调用hello()后返回的是一个指向内部状态的指针对象。

三、yield与next

Generator函数是分段执行的，yield表达式是暂停执行的标记，next方法可以恢复执行，并返回一个有着value和done两个属性的对象。

1. yield

yield表达式是暂停执行的标记

使用yield表达式的注意点：

• yield表达式只能用在 Generator 函数里面，用在其他地方都会报错。

• yield表达式如果用在另一个表达式之中，必须放在圆括号里面。

  function* demo() {
    console.log('Hello' + (yield)); // OK
  }
  

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

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

2. next

next方法可以恢复执行，并返回一个有着value和done两个属性的对象。

• value属性表示当前的内部状态的值，是yield关键字后面表达式的值
• done属性是一个布尔值，表示是否遍历结束。

next还可以用于传递参数

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

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

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

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

   运行逻辑实例讲解

• 当第一次调用add()，也就是运行到第38行时，add函数不会开始执行；

• 当第一次调用next()，也就是运行到第39行时，generator函数中蓝色部分开始执行，遇到yield "2"表达式暂停。【注意：第一个next()仅起到让函数开始执行的作用，不能用于传递数据】

  运行结果如下：
  

• 当第二次调用next()，也就是运行到第40行时，generator函数中黄色部分开始执行，遇到yield "3"表达式暂停。此时传入的20会替换掉上一个yield表达式，也就是替换let x = yield "2";—>let x = 20;。

  运行结果如下：
  

• 当第三次调用next()，也就是运行到第41行时，generator函数中绿色部分开始执行，遇到return x+y;表达式暂停。此时传入的30会替换掉上一个yield表达式，也就是替换let y = yield "3";—>let y = 30;。

  运行结果如下：
  

yield与return的异同

相同：都能返回紧跟在语句后面的表达式的值。

不同：

• 遇到yield函数暂停执行，下次从该位置继续。return语句并不具备暂停功能。
• 一个函数只能执行一次return语句，可以执行多个yield表达式。

四、Generator函数状态的遍历

1. 遍历一个Generator函数状态

• 通过for…of遍历

  注意：一旦next方法返回对象的done属性为true，for…of循环就会中止，且不包含该返回对象，所以return语句返回的值不会在for…of循环中遍历。

  function* foo() {
      yield 1;
      yield 2;
      yield 3;
      yield 4;
      yield 5;
      return 6;
  }
  
  for (let v of foo()) {
      console.log(v);
  }
  

  执行结果如下：
  

• 通过…解构遍历

  // foo函数同上
  let fn = foo();
  console.log(...fn);
  

  执行结果如下：
  

2. 在一个Generator函数内遍历另一个Generator函数的状态

• 手动遍历
• for…of遍历
• …解构遍历
• yield*遍历

function* foo() {
    yield "a";
    yield "b";
    return "result";
}

function* bar() {
    yield "start";
    // 1.手动遍历
    yield "a";
    yield "b";
    // 2.利用for of手动遍历 foo()
    for (let i of foo()) {
        console.log(i);
    }
    // 3.利用解构赋值...遍历
    let fn = foo();
    console.log(...fn);
    // 4.利用yield*遍历
    // yield*表明它返回的是一个遍历器对象，结果是该遍历器对象的内部值
    yield* foo();
    yield "ending";
}

for (let v of bar()) {
    console.log(v);
}

执行结果如下：

yield*介绍

用来在一个 Generator 函数里面执行另一个 Generator 函数

• 与不加*的对比

  // foo同上
  function* bar() {
      yield* foo();
      // 不加*的对比
      yield foo();
  }
  for (let v of bar()) {
      console.log(v);
  }
  

  执行结果如下：

• yield*可接收所调用Genertor函数return的值

  // foo同上
  // 如果yield* 接收的 Generator 函数带有return语句，return返回的数据可以被接收。
  function* bar() {
      let val = yield* foo();
      console.log(val
  }
  for (let v of bar()) {
      console.log(v);
  }
  

  执行结果如下：
  

• 任何有Iterator接口的数据结构都可以被yield*遍历， 如字符串会遍历每个字符。数组会遍历每个元素。

  function* fn() {
      yield "hello";
      yield* "hello";
  }
  let read = fn();
  console.log(read.next().value);// hello
  console.log(read.next().value);// h
  console.log(read.next().value);// e
  console.log(read.next().value);// l
  console.log(read.next().value); // l
  console.log(read.next().value);
  // o
  

五、Generator数据传递

1. 由内向外传递

通过yield表达式定义状态值，通过next方法返回对象的value获取

function* foo() {
    yield 1;
    yield 2;
    return 3;
}
let fn = foo();
console.log(fn.next());
console.log(fn.next());
console.log(fn.next());

执行结果如下：

2.由外向内传递

• 通过next传值，通过yield表达式接收
• 调用函数时传值，通过形参接收

执行结果如下：

六、return与throw

1. next()、throw()、return()的异同

• 相同

  next()、throw()、return()这三个方法本质上都是让 Generator 函数恢复执行，并且使用不同的语句替换yield表达式。

• 不同

  next()是将yield表达式替换成一个值。
  throw()是将yield表达式替换成一个throw语句。
  return()是将yield表达式替换成一个return语句。

2. return

返回给定的值，并且终结遍历 Generator 函数。

function* gen() {
  yield 1;
  yield 2;
  yield 3;
}

var g = gen();

g.next()        // { value: 1, done: false }
g.return('foo') // { value: "foo", done: true }
g.next()        // { value: undefined, done: true }

3. throw

可以在函数体外抛出错误，在Generator函数体内捕获。

前提条件：必须至少执行过一次next方法。

• 特性：
  • throw方法可以接受一个参数，该参数会被catch语句接收
  • throw方法被捕获以后，会附带执行下一条yield表达式。也就是说，会附带执行一次next方法。

var g = function* () {
  try {
    yield;
  } catch (e) {
    console.log('内部捕获', e);
  }
};

var i = g();
i.next();

try {
  i.throw('a');
  i.throw('b');
} catch (e) {
  console.log('外部捕获', e);
}
// 内部捕获 a
// 外部捕获 b

参考链接

1. ES6阮一峰https://es6.ruanyifeng.com/#docs/generator
2. Web前端全套教程-ES6/ECMAScript6（2021版全集/百度名师张容铭亲授)https://www.bilibili.com/video/BV1JK4y1p7ZA?spm_id_from=333.999.0.0