ES6之Generator函数

每天做个总结吧，坚持就是胜利！

    /**
        @date 2021-06-11
        @description ES6之Generator函数
    */
复制代码

壹（序）

ES6的Generator函数是一种异步编程的解决方式。

执行一个Generator函数后并不会执行函数内部的代码，而是会返回一个遍历器对象，也就是说Generator函数可以看作是一个遍历器生成器，同时，内部使用yield关键字来定义不同的状态，所以Generator函数也可以看作是一个状态机，内部管理了一些不同的状态。

Generator函数返回一个遍历器对象，所以需要调用next方法才能继续往下调用，而yield关键字就是用来暂停代码的，每次调用next方法后，遇到yield关键字都会暂停，直到下一次调用next方法。

在function关键字与函数名之间插入*则表示此函数是一个Generator函数，yield关键字放在函数内部，表示一个暂停标志。

贰（使用）

function *foo() {
    console.log(1);
    yield 'first';
    console.log(2);
    yield 'sec' + 'ond';
    console.log(3);
    return 'third';
    console.log(4);
    yield 'fourth';
}

const f = foo();
f.next(); // 1 {value: "first", done: false}
f.next(); // 2 {value: "second", done: false}
f.next(); // 3 {value: "third", done: true}
f.next(); // {value: undefined, done: true}
复制代码

从上面代码及输出可以看出，执行Generator函数并不会立即执行，而是等待调用next方法，再执行函数第一行到第一个yield关键字之间的代码，而yield后面的表达式也是调用到对应的next方法时才执行，遇到return关键字和普通函数一样，返回return的值，后面的代码也不会继续执行了。

叁（应用）

1. 可以使用Generator函数做一个延缓执行函数，此时不需要使用yield关键字；

function * bar() {
    console.log('call bar!')
}
bar = bar(); // bar {<suspended>}
setTimeout(() => {
    bar.next(); // 'call bar!'
}, 1000)
复制代码

2. 为Object添加Iterator接口；

const obj = {a: 1, b: 2};

obj[Symbol["iterator"]] = function *() {
    const self = this;
    const keys = Object.keys(self);
    
    for(let i = 0; i < keys.length; i++) {
        yield self[keys[i]]
    }
}

for(item of obj) {
    console.log(item); // 1 2
}
复制代码