ES6中Generator 函数

什么是generator

Generator 函数有多种理解角度。语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。

执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。

形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();

yield和return语句后的就是一个状态

Generator 函数的调用方法与普通函数一样，也是在函数名后面加上一对圆括号。不同的是，调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象（iterator对象）

调用该对象的next()方法时，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）

逻辑如下

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

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

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

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

• 换言之，Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。

与iterator接口的关系

Generator 函数就是遍历器生成函数，因此可以把 Generator 赋值给对象的Symbol.iterator属性，从而使得该对象具有 Iterator 接口

var myIterable = {};
myIterable[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
};

[...myIterable] // [1, 2, 3]

Generator 函数执行后，返回一个遍历器对象。该对象本身也具有Symbol.iterator属性，执行后返回自身。

function* gen(){
  // some code
}

var g = gen();

g[Symbol.iterator]() === g
// true

next方法的参数

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

function* f() {
    var te = yield 1 // yield的默认返回值为undefined
    console.log(te)
    yield 2
    yield 3
  }
  
  var g = f();
  
  console.log(g.next()) // { value: 0, done: false }
  console.log(g.next(2)) // 2,{ value: 1, done: false }

例如这里的te作为第一次yield的返回值是undefined,但是第二次调用的时候传入了参数2，就会把第二次调用next传入的参数作为第一次的结果返回，所以这里te的值为2

for...of...循环

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

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

function* foo() {
  yield 1;
  yield 2;
  yield 3;
  yield 4;
  yield 5;
  return 6;
}

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

为对象加上遍历接口

function* objectEntries(obj) {
  let propKeys = Reflect.ownKeys(obj); // 获取所有键

  for (let propKey of propKeys) {
    yield [propKey, obj[propKey]];
  }
}

let jane = { first: 'Jane', last: 'Doe' };

for (let [key, value] of objectEntries(jane)) {
  console.log(`${key}: ${value}`);
}
// first: Jane
// last: Doe

或者直接加到原型链上面

function* objectEntries() {
  let propKeys = Object.keys(this);

  for (let propKey of propKeys) {
    yield [propKey, this[propKey]];
  }
}

let jane = { first: 'Jane', last: 'Doe' };

jane[Symbol.iterator] = objectEntries; // 当一个对象使用for...of 循环时，会自动寻找对象的jane[Symbol.iterator]并且执行

for (let [key, value] of jane) {
  console.log(`${key}: ${value}`);
}

• 扩展运算符（...）、解构赋值和Array.from方法内部调用的，都是遍历器接口

function* numbers () {
  yield 1
  yield 2
  return 3
  yield 4
}

// 扩展运算符
[...numbers()] // [1, 2]

// Array.from 方法
Array.from(numbers()) // [1, 2]

// 解构赋值
let [x, y] = numbers();
x // 1
y // 2

// for...of 循环
for (let n of numbers()) {
  console.log(n)
}
// 1
// 2

throw()方法

1. 遍历器内部的try...catch...配合只能捕获遍历器已经至少执行过一次next的遍历器内部的错误，并且只会执行一次，在捕获错误的同时也会执行一次next

2. 遍历器对象的throw方法和全局的throw命令互不干扰

3. 如果 Generator 函数内部没有部署try...catch代码块，那么throw方法抛出的错误，将被外部try...catch代码块捕获。

4. 如果 Generator 函数内部和外部，都没有部署try...catch代码块，那么程序将报错，直接中断执行。

5. Generator 函数体外抛出的错误，可以在函数体内捕获；反过来，Generator 函数体内抛出的错误，也可以被函数体外的catch捕获。

6. 一旦 Generator 执行过程中抛出错误，且没有被内部捕获，就不会再执行下去了。如果此后还调用next方法，将返回一个value属性等于undefined、done属性等于true的对象，即 JavaScript 引擎认为这个 Generator 已经运行结束了。

return()方法

1. 使用return方法终结遍历 Generator 函数，返回值的value属性就是return()方法的参数foo，返回值的done属性为true

2. 如果 Generator 函数内部有try...finally代码块，且正在执行try代码块，那么return()方法会导致立刻进入finally代码块，执行完以后，整个函数才会结束。

yield* 表达式

• 用来在一个 Generator 函数里面执行另一个 Generator 函数。如果执行另一个 Generator 函数的时候不加*号就会返回该yield命令后的遍历器对象
• yield*后面的 Generator 函数（没有return语句时）,等同于在 Generator 函数内部，部署一个for...of循环。
• 如果被代理的 Generator 函数有return语句，那么就可以向代理它的 Generator 函数返回数据。

function* inner() {
  yield 'hello!';
}

function* outer1() {
  yield 'open';
  yield inner();
  yield 'close';
}

var gen = outer1()
gen.next().value // "open"
gen.next().value // 返回一个遍历器对象
gen.next().value // "close"

function* outer2() {
  yield 'open'
  yield* inner()
  yield 'close'
}

var gen = outer2()
gen.next().value // "open"
gen.next().value // "hello!"
gen.next().value // "close"

作为对象的属性

let obj = {
  * myGeneratorMethod() {
    ···
  }
};