阅读 85

ES6之Generator函数

每天做个总结吧,坚持就是胜利!

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

壹(序)

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

执行一个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)
复制代码
  1. 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
}
复制代码
文章分类
前端
文章标签