为什么使用ES6生成器

Myth丶恋晨 2022-10-10 09:56 148阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70][]

**官方解释：**

> 1、异步编程，文件操作，网络操作(ajax, request) 数据库操作使用生成器操作更加方便；
> 
> 2、有效的解决回调地狱的问题；

**举例：**

> 请在控制台 1s 后控制台输出 111 ，2s后输出 222 ，3s后输出 333。

**（1）使用传统的的回调写法**

setTimeout(() => {
                console.log(111);
                setTimeout(() => {
                    console.log(222);
                    setTimeout(() => {
                        console.log(333);
                    }, 3000);
                }, 2000);
            }, 1000);

**（2）使用生成器减少层级结构**

第一次使用iterator.next()使程序走进one函数中，后续使用iterator.next()让程序继续让下走；

对比发现，使用生成器的模式，再次添加逻辑功能，函数代码不会再缩进了。也不用去关心原来的嵌套逻辑，代码更加直观易懂，方便操作；

**（3）生成器函数参数**

function * gen(arg){
                console.log(arg);
                let one = yield 111;
                console.log(one);
                let two = yield 222;
                console.log(two);
                let three = yield 333;
                console.log(three);
            }
    
            //执行获取迭代器对象
            let iterator = gen('AAA');
            console.log(iterator.next());
            //next方法可以传入实参
            console.log(iterator.next('BBB'));
            console.log(iterator.next('CCC'));
            console.log(iterator.next('DDD'));

生成器函数，不但可以控制流程顺序，其实也是可以带入参数的；其参数是上一个迭代函数执行成功以后的返回值，如上图所示；

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70]: /images/20221005/ff33b401ede64889a05da62fa8bd60f9.png