Iterator与Generator

Generator 生成器函数运行后返回一个生成器对象，而普通函数会直接执行函数内部的代码；每次调用生成器对象的 next 方法会执行函数到下一次 yield 关键字停止执行，并且返回一个{value: Value, done: Boolean} 的对象。

next 方法的参数

yield 表达式本身没有返回值，或者说总是返回 undefined。next 方法可以带一个参数，该参数就会被当作上一个 yield 表达式的返回值。通过 next 方法的参数，可以在 Generator 函数运行的不同阶段，从外部向内部注入不同的值，从而调整函数行为。
由于 next 方法的参数表示上一个 yield 表达式的返回值，所以在第一次使用 next 方法时，传递参数是无效的。

function sum(x){
    return function(y){
        return x + y;
    }
}
console.log(sum(1)(2))

// 利用next传参改写
function* sum(x){
    let y = yield x;
    while(true){
       y = yield x + y;
    }
}

let gen = sum(2)
console.log(gen.next()) // 2
console.log(gen.next(1)) // 3
console.log(gen.next(2))  // 4

yield 表达式

yield 表达式的作用：定义内部状态和暂停执行
yield 表达式 与 return 语句的区别

• yield 表达式表示函数暂停执行，下一次再从该位置继续向后执行，而 return 语句不具备位置记忆的功能
• 一个函数里，只能执行一个 return 语句，但是可以执行多个 yield 表达式
• 任何函数都可以使用 return 语句，yield 表达式只能用在 Generator 函数里面，用在其他地方都会报错
• yield 表达式如果参与运算放在圆括号里面；用作函数参数或放在赋值表达式的右边，可以不加括号

function *gen () {
  console.log('hello' + yield) ×
  console.log('hello' + (yield)) √
  console.log('hello' + yield 1) ×
  console.log('hello' + (yield 1)) √
  foo(yield 1)  √
  const param = yield 2  √
}

基于 Generator 生成器函数中可以支持多个 yield，我们可以实现一个函数有多个返回值的场景：

function* gen(num1, num2){
    yield num1 + num2;
    yield num1 - num2;
}

let res = gen(2, 1);
console.log(res.next()) // {value: 3, done: false}
console.log(res.next()) // {value: 1, done: false}

Generator 与 Iterator 之间的关系

由于 Generator 函数就是遍历器生成函数，因此可以把 Generator 赋值给对象的 Symbol.iterator 属性，从而使得该对象具有 Iterator 接口。Generator 实现方式代码更加简洁。

let obj = {
    name: 'qianxun',
    age: 3,
    [Symbol.iterator]: function(){
        let that = this;
        let keys = Object.keys(that)
        let index = 0;
        return {
            next: function(){
                return index < keys.length ?
                {value: that[keys[index++]], done: false}:
                {value: undefined, done: true}
            }
        }
    }
}
for(let value of obj){
    console.log(value)
}

Generator:

let obj = {
    name: 'qianxun',
    age: 3,
    [Symbol.iterator]: function* (){
        let keys = Object.keys(this)
        for(let i=0; i< keys.length; i++){
            yield this[keys[i]];
        }
    }
}
for(let value of obj){
    console.log(value)
}

Generator.prototype.return()

return()方法，可以返回给定的值，并且终结遍历 Generator 函数。

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

var g = gen();

g.next()        // { value: 1, done: false }
// 如果 return() 方法调用时，不提供参数，则返回值的 value 属性为 undefined
g.return('foo') // { value: "foo", done: true }
g.next()        // { value: undefined, done: true }

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

function* numbers () {
  yield 1;
  try {
    yield 2;
    yield 3;
  } finally {
    yield 4;
    yield 5;
  }
  yield 6;
}
var g = numbers();
g.next() // { value: 1, done: false }
g.next() // { value: 2, done: false }
g.return(7) // { value: 4, done: false }
g.next() // { value: 5, done: false }
g.next() // { value: 7, done: true }

yield* 表达式

如果想在 Generator 函数内部，调用另一个 Generator 函数。我们需要在前者的函数体内部，自己手动完成遍历，如果函数调用多层嵌套会导致写法繁琐不易阅读，ES6 提供了 yield* 表达式作为解决方法。

委托给其他生成器

function* g1() {
  yield 2;
  yield 3;
}

function* g2() {
  yield 1;
  yield* g1();
  yield 4;
}

const iterator = g2();

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: 4, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

委托给其他可迭代对象

function* gen(){
    yield* [1,2,3]
}
console.log(gen().next()) // {value: 1, done: false}

Generator 函数的 this

Generator 函数返回一个遍历器，ES6 规定这个遍历器是 Generator 函数的实例，继承了 Generator.prototype 对象上的方法，但无法获取 this 上的属性，因为这时 this 是全局对象，而不是实例对象。

function* gen(){
    this.a = 1
}
gen.prototype.say = function(){
    console.log('hi')
}
let obj = gen()
console.log(obj instanceof gen) // true
obj.say() // hi
obj.next()
console.log(obj.a) //undefined

如果想像构造函数一样访问实例属性，可以修改 this 绑定到 Generator.prototype 上。

function* gen(){
    this.a = 1
}
gen.prototype.say = function(){
    console.log('hi')
}   
let obj = gen.call(gen.prototype)
console.log(obj instanceof gen) // true
obj.say() // hi
obj.next()
console.log(obj.a) //1

Generator 实现一个状态机

function* StateMachine(state){
    let transition;
    while(true){
        if(transition === "INCREMENT"){
            state++;
        }else if(transition === "DECREMENT"){
            state--;
        }
        transition = yield state;
    }
}
const iterator = StateMachine(0);
console.log(iterator.next()); // 0
console.log(iterator.next('INCREMENT')); // 1
console.log(iterator.next('DECREMENT')); // 0