ES6知识点-Generator

4.2Generator函数

4.2.1定义Generator函数

• 通过 yield 关键字，把函数的执行流挂起，为改变执行流程提供了可能，从而为异步编程提供解决方案。
• 形式上，Generator函数是一个普通函数，但是有两个特征。
  • function关键字与函数名之间有一个星号；
  • 函数体内部使用yield语句，定义不同的内部状态（yield翻译为汉语的意思就是“产出”）

function* func() {
  yield 'hello';
  yield 'world';
  return 'ending';
}
var hw = func();

• Generator函数的调用方法与普通函数一样

• 不同的是，调用Generator函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，也就是遍历器对象（Iterator Object）。

4.2.2next方法

• Generator函数是分段执行的，yield语句是暂停执行的标记，而next方法可以恢复执行。

hw.next()
// { value: 'hello', done: false }
hw.next()
// { value: 'world', done: false }
hw.next()
// { value: 'ending', done: true }
hw.next()
// { value: undefined, done: true }
//代码说明：
//上面代码一共调用了四次next方法:
/*
    第一次调用，Generator函数开始执行，直到遇到第一个yield语句为止。next方法返回一个对象，它的value属性就是当前yield语句的值hello，done属性的值false，表示遍历还没有结束。
    第二次调用，Generator函数从上次yield语句停下的地方，一直执行到下一个yield语句。next方法返回的对象的value属性就是当前yield语句的值world，done属性的值false，表示遍历还没有结束。
    第三次调用，Generator函数从上次yield语句停下的地方，一直执行到return语句（如果没有return语句，就执行到函数结束）。next方法返回的对象的value属性，就是紧跟在return语句后面的表达式的值（如果没有return语句，则value属性的值为undefined），done属性的值true，表示遍历已经结束。
    第四次调用，此时Generator函数已经运行完毕，next方法返回对象的value属性为undefined，done属性为true。以后再调用next方法，返回的都是这个值。
*/

• 总结
  • 调用Generator函数，返回一个遍历器对象，代表Generator函数的内部指针
  • 以后，每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。
  • value属性表示当前的内部状态的值，是yield语句后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。

4.2.3yield语句

​ yield语句就是暂停标志。

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

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

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

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

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

• yield语句与return语句对比

  • 相似之处 都能返回紧跟在语句后面的表达式的值
  • 区别
    • 每次遇到yield，函数暂停执行，下一次再从该位置继续向后执行，而return语句不具备位置记忆的功能。
    • 一个函数里面，只能执行一次（或者说一个）return语句，但是可以执行多次（或者说多个）yield语句。
    • 正常函数只能返回一个值，因为只能执行一次return；Generator函数可以返回一系列的值，因为可以有多个yield。

4.2.4for...of循环

• for...of循环可以自动遍历Generator函数时生成的Iterator对象，且此时不再需要调用next方法。

• 一旦next方法的返回对象的done属性为true，for...of循环就会中止，且不包含该返回对象

• function* foo() {
    yield 1;
    yield 2;
    yield 3;
    yield 4;
    return 5;
  }
  
  for (let i of foo()) {
    console.log(i);
  }
  
  // 1 2 3 4
  //结果分析：为什么没有返回5？
  //一旦next方法的返回对象的done属性为true，for...of循环就会中止，且不包含该返回对象

4.2.5yield*语句

• 要用到 yield* 语句，用来在一个Generator函数里面执行另一个Generator函数

  function* foo() {
    yield 'a';
    yield 'b';
  }
  function* bar() {
    yield 'x';
    yield* foo();    // 使用 yield* 才有效，直接写入foo()无效
    yield 'y';
  }
  //  等同于
  function* bar() {
    yield 'x';
    yield 'a';
    yield 'b';
    yield 'y';
  }

4.2.6Generator应用

• 异步操作的同步化表达

  • Generator函数的暂停执行的效果，意味着可以把异步操作写在yield语句里面，等到调用next方法时再往后执行。

  • 实际上等同于不需要写回调函数了。因为异步操作的后续操作可以放在yield语句下面，反正要等到调用next方法时再执行

  • 这种写法的好处是所有Loading界面的逻辑，都被封装在一个函数。按部就班，非常清晰。

  function* loadUI() {
    show();
    yield loadYield();
    hide();
  }
  var loader = loadUI();
  // 加载UI
  loader.next()
  // 卸载UI
  loader.next()