19. Generator

Generator

**Generator函数是ES6提供的一种异步编程解决方案.,语法行为与传统的普通函数完全不同。**执行Generator函数会返回一个遍历器对象。也就是说,Generator函数还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历Generator函数内部的每一个状态

Generator函数跟普通函数的区别

function关键字与函数名之间有一个星号
函数体内部使用yield表达式，定义不同的内部状态
Generator函数不能使用new关键字,否则会报错

19.1 用法

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

var hw = helloWorldGenerator();
console.log(hw);
/*
    上面是一个Generator函数调用后该函数并不会运行,也不会返回函数的运行结果,而是返回的是一个遍历器对    象,内部的yield表达式为一个个阶段,所以该函数一共有三个阶段状态:hello,world,与retrun语句结束执行    状态
*/
console.log(hw.next());//{value: "hello", done: false}
console.log(hw.next());//{value: "world", done: false}
console.log(hw.next());//{value: "ending", done: true}
console.log(hw.next());//{value: undefined, done: true}
/*
    如果想要运行函数内部的每一个函数,就必须要调用next()方法,使得指向函数的指针移向下一个状态,每次调用    next()方法时,内部指针就会从函数头部或上一层停下来的地方开始执行,直到运到下一个yiedl表达式或遇到     return语句(注意遇到return语句函数会直接停止),在停止后依然能调用next()方法,但是此时的返回值为       undefined
*/

总之,Generator函数是分段执行的,yield表达式是暂停执行的标记,而next()方法可以恢复执行

Genterator函数的写法

ES6并没有规定function关键字与函数名之间的星号应该写在哪个位置,所以可以用多种方法书写

function * gen(x, y){}
function *gen(x, y){}
function* gen(x, y){}///推荐使用这种形式声明Genterator函数
function*gen(x, y){}

作为对象方法的Generator函数写法

let obj = {
  * gen() {
  }
};

与 Iterator 接口的关系

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

Object.prototype[Symbol.iterator] = function* (){
  for(let i in this){
    yield this[i];
  }
}

function* iterEntries(obj) {
  let keys = Object.keys(obj);
  for (let i=0; i < keys.length; i++) {
    let key = keys[i];
    yield [key, obj[key]];
  }
}

let myObj = { gen: 3, bar: 7 };

for (let [key, value] of iterEntries(myObj)) {
  console.log(key, value);
}

19.2 yield

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

注意：

yield表达式只能用在Generator函数里面，用在其他地方都会报错。
将yield表达式用在另一个表达式之中，必须放在圆括号里面。

console.log('Hello' + (yield 123));
//通过此种形式调用yield表达式,但是此时作为值的并不是123,而是下一次next()中传入的参数

调用next()方法的运用逻辑

遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值
下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式
如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值
如果该函数没有return语句，则返回的对象的value属性值为undefined

yield与renturn的异同

相同点 都能返回紧跟在语句后面的那个表达式的value属性值
不同点 每次遇到yield，函数暂停执行，下一次再从该位置继续向后执行，而return语句不具备位置记忆的功能。一个函数里面，只能执行一次return语句，但是可以执行多次yield表达式。正常函数只能返回一个值，因为只能执行一次return,而Generator 函数可以返回一系列的值，因为可以有任意多个yield

19.3 Generator的方法

19.3.1 next方法的参数

yield表达式本身没有返回值，或者说总是返回undefined。next()方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值(注意这里的返回值是在外部返回给函数内部的)

function* f() {
  for(var i = 0; true; i++) {
    var reset = yield i;
    if(reset) { 
        i = -1; 
    }
  }
}

var g = f();

g.next() // { value: 0, done: false }
g.next() // { value: 1, done: false }
g.next(true) // { value: 0, done: false }

Generator函数从暂停状态到恢复运行，它的上下文状态是不变的。通过next方法的参数，就可以在Generator函数开始运行之后，继续向函数体内部注入值

function* gen(x) {
  var y = 2 * (yield (x + 1));
  var z = yield (y / 3);
  return (x + y + z);
}

var a = gen(5);
console.log(a.next()); // Object{value:6, done:false}
console.log(a.next()); // Object{value:NaN, done:false}
console.log(a.next()); // Object{value:NaN, done:true}

var b = geno(5);
console.log(b.next()); // { value:6, done:false }
console.log(b.next(12));  // { value:8, done:false }
console.log(b.next(13));  // { value:42, done:true }

19.3.2 return方法

Generator函数返回的遍历器对象，还有一个return方法，可以返回给定的值，并且立刻结束遍历Generator函数

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

var g = gen();

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

19.4 for...of循环

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

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

for (let v of gen()) {
  console.log(v);
}
// 1 2 3 4 5

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

for (let n of gen()) {
  if (n > 10000000) break;
  console.log(n);
}

19.5 yield*

**如果在Generator函数内部，调用另一个Generator函数，默认情况下是没有效果的。这个时候需要用到yield表达式来在一个Generator函数内部执行另外一个Generator函数

function* gen() {
  yield 'a';
  yield 'b';
}

function* bar() {
  yield 'x';
  gen();
  yield 'y';
}

for (let v of bar()){
  console.log(v);
}
// "x"
// "y"
//中间的gen()函数并没有被执行

function* gen() {
  yield 'a';
  yield 'b';
}

function* bar() {
  yield 'x';
  yield* gen();
  yield 'y';
}

//等同于
function* bar() {
  yield 'x';
  yield 'a';
  yield 'b';
  yield 'y';
}

//等同于
function* bar() {
  yield 'x';
  for (let v of gen()) {
    yield v;
  }
  yield 'y';
}

for (let v of bar()){
  console.log(v);
}
// "x"
// "a"
// "b"
// "y"

19. Generator

# Generator

# 19.1 用法

# 19.2 yield

# 19.3 Generator的方法

# 19.3.1 next方法的参数

# 19.3.2 return方法

# 19.4 for...of循环

# 19.5 yield*