精通ES6系列二（Generator函数）

1.简单概念

Generator函数是ES6提供的一种异步编程解决方案，可以理解为一种状态机，内部包含多个状态。执行Generator函数会返回一个遍历器（iterator）,通过next方法去获取状态机里面的值。形式上，Generator函数是一个普通函数，但是有两个特征，一是function后面有一个*，二是函数体内部通过yield表达式，定义不同的内部状态。

function* simpleGenerator() {
    yield 1;
    yield 2;
    return 3;
}
const simple = simpleGenerator();
simple.next(); //{value: 1, done: false}
simple.next(); //{value: 2, done: false}
simple.next(); //{value: 3, done: true}
simple.next(); //{value: undefined, done: true}

generator的调用和普通函数一样，只是函数调用后并不会立即执行，而是返回一个遍历器。

2.yield表达式

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

function* gen() {
  console.log('1');
}
const delay = gen();
setTimeout(()=>{
  delay.next()
},3000)

 另外，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
}

3.next 方法的参数 

next的参数可以理解为向generator函数中注入值，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方法时，就能够输入值，可以在 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方法，就输入参数的。

4.利用generator使对象可用for of 遍历

//方法一
function* makeObjIterable(obj) {
  let objKeys = Reflect.ownKeys(obj);
  for(let key of objKeys) {
    yield {[key]: obj[key]};
  }
}
let obj1 = {
  a: 1,
  b: 2,
  c: 3
}
for(let item of makeObjIterable(obj1)) {
  console.log(item);
}

方法二
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 (let [key, value] of jane) {
  console.log(`${key}: ${value}`);
}

5.next()、throw()、return() 

next()、throw()、return()这三个方法本质上是同一件事，可以放在一起理解。它们的作用都是让 Generator 函数恢复执行，并且使用不同的语句替换yield表达式。

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

const g = function* (x, y) {
  let result = yield x + y;
  return result;
};

const gen = g(1, 2);
gen.next(); // Object {value: 3, done: false}

gen.next(1); // Object {value: 1, done: true}
// 相当于将 let result = yield x + y
// 替换成 let result = 1;

上面代码中，第二个next(1)方法就相当于将yield表达式替换成一个值1。如果next方法没有参数，就相当于替换成undefined。

throw()是将yield表达式替换成一个throw语句，第几个就将那个yield替换成throw语句，导致程序运行失败。

gen.throw(new Error('出错了')); // Uncaught Error: 出错了
// 相当于将 let result = yield x + y
// 替换成 let result = throw(new Error('出错了'));

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

const g = function* (x, y) {
  yield 1;
  yield 2;
  yield 3;
  return result;
};
let gen = g();

console.log(gen.next()); //{ value: 1, done: false }
console.log(gen.return(1000)); //{ value: 1000, done: false } 相当于，将yield 2 替换为return 1000，所以执行结束。
console.log(gen.next()); //{ value: undefined, done: true }

6.yield* 表达式

ES6 提供了yield*表达式，作为解决办法，用来在一个 Generator 函数里面执行另一个 Generator 函数。

function* myGeneratorInner() {
  yield 3;
  yield 4;
}
function* myGeneratorINNER() {
  yield 2;
  yield* myGeneratorInner();
  yield 5;
}
function* myGenerator() {
  yield 1;
  yield* myGeneratorINNER();
  yield 6;
}
for(let item of myGenerator()) {
  console.log(item);
} //1,2,3,4,5,6

//yield命令后面如果不加星号，返回的是整个数组，加了星号就表示返回的是数组的遍历器对象。
function* gen(){
  yield* ["a", "b", "c"];
}
gen().next() // { value:"a", done:false }

//实际上，任何数据结构只要有 Iterator 接口，就可以被yield*遍历。
let read = (function* () {
  yield 'hello';
  yield* 'hello';
})();
read.next().value // "hello"
read.next().value // "h"

7.Generator作为对象的属性的写法

//如果一个对象的属性是 Generator 函数，可以简写成下面的形式。
let obj = {
  * myGeneratorMethod() {
    ···
  }
};
//上面代码中，myGeneratorMethod属性前面有一个星号，表示这个属性是一个 Generator 函数。
//它的完整形式如下，与上面的写法是等价的。
let obj = {
  myGeneratorMethod: function* () {
    // ···
  }
};