3.3ES6/7/8新特性之Generator函数

Generator函数

1.概念

Generator 函数是 ES6 提供的一种异步编程解决方案
Generator 函数内部可以封装多个状态, 因此又可以理解为是一个状态机。

2.定义 Generator 函数

在普通函数的function后面加上 * 即可
eg:    function* gen() { }

3.Generator函数和普通函数区别

3.1调用Generator函数后, 无论函数有没有返回值, 都会返回一个迭代器对象,
3.2调用Generator函数后, 函数中封装的代码不会立即被执行

4.yield关键字

4.1在Generator函数内部使用yield关键字定义状态
4.2并且yield关键字可以让 Generator内部的逻辑能够切割成多个部分。
4.3通过调用迭代器对象的next方法执行一个部分代码,
执行哪个部分就会返回哪个部分定义的状态
4.4.在调用next方法的时候可以传递一个参数, 这个参数会传递给上一个yield
代码举例：

    function* gen() {
        console.log("123");
        let res = yield "aaa";
        console.log(res);
        console.log("567");
        yield 1 + 1;
        console.log("789");
        yield true;
    }
    let it = gen();
    console.log(it.next());
    console.log(it.next("qqq"));
    打印结果如下图

5.应用场景

1. 让函数返回多个值
2. 利用 Generator 函数，可以在任意对象上快速部署 Iterator 接口

<script>
    let obj={
        name:"a cool girl",
        age:"18 forever",
        sex:"woman"
    }
    function* gen(){
        let that = this;
        let keys= Object.keys(obj);
        for(let i= 0 ;i<keys.length;i++){
            yield that[keys[i]];
        }
    }
    obj[Symbol.iterator]=gen;
    let it=obj[Symbol.iterator]();
    console.log(it);
    console.log(it.next());
     console.log(it.next());
    console.log(it.next());
    console.log(it.next());
</script>
打印结果：gen {<suspended>}
         {value: "a cool girl", done: false}
         {value: "18 forever", done: false}
         {value: "woman", done: false}
         {value: undefined, done: true}

定义一个Generator 函数，然后赋值给接口，剩下的业务逻辑、返回值等在Generator 函数中实现，这样方便了很多。

注意点: yield关键字只能在Generator函数中使用, 不能在普通函数中使用。