ES6新特性--生成器

1. 生成器概述

生成器函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同 。

1. 生成器的特殊性

(1).* 的位置没有限制 (2).生成器函数返回的结果是迭代器对象，调用迭代器对象的 next 方法可以得到 yield 语句后的值 (3).yield 相当于函数的暂停标记，也可以认为是函数的分隔符，每调用一次 next 方法，执行一段代码 (4).next 方法可以传递实参，作为 yield 语句的返回值

1. 生成器的声明和调用

//生成器的声明
function * test(){
   console.log("这是生成器");
}
            
//生成器的调用
let iterator = test();
iterator.next();//才有输出

可以与关键字yield生成执行段落的代码段内容。(这一个可以用来制作执行流程的内容)

<script type="text/javascript">
            //生成器的声明
            function* test() {
                
                console.log("步骤1正在执行")
                
                yield "步骤1已经执行完毕",
                
                yield "步骤2已经执行完毕",
                
                yield "步骤3已经执行完毕"
            }

            //生成器的调用
            let iterator = test();
            iterator.next();
            iterator.next();
            iterator.next();
            
            //也可以使用for...of...遍历内容
            /* for(let s of test()){
                console.log(s);
            } */
            
 </script>

1. 生成器函数的参数

<script type="text/javascript">
            //生成器的声明
            function* test(arg) {

                console.log(arg)

                let rs = yield 111;
                console.log("1实参传入的结果:" + rs)

                let result = yield 222;
                console.log("2实参传入的结果:" + result)

                yield 333
            }

            //生成器的调用
            //传递参数:在调用生成器的时候传递参数
            let iterator = test("aaa");
            console.log(iterator.next()); //object {done,value:111}

            //可以传递实参进去，然后执行的结果返回的就是传入的参数
            console.log(iterator.next('bbb')); //传递给第一个yield

            console.log(iterator.next("ccc")); //传递给第二个yield
</script>

1. 生成器函数的使用

(1).异步编程案例实现:1s之后输入111，2s之后输出222，3s之后输出333

<script type="text/javascript">
            //避免回调地狱
            function one() {
                setTimeout(() => {
                    console.log("111")
                    iterator.next()
                }, 1000)
            }

            function two() {
                setTimeout(() => {
                    console.log("222")
                    iterator.next()
                }, 1000)
            }

            function three() {
                setTimeout(() => {
                    console.log("333")
                    iterator.next()//接着走下一个
                }, 1000)
            }

            //使用生成器调用
            function* gen() {
                yield one();
                yield two();
                yield three();
            }
            
            let iterator = gen();
            iterator.next()  
</script>

(2).模拟数据的获取:获取用户数据---获取订单数据---获取商品数据

<script type="text/javascript">
            //模拟数据获取过程
            function getUsers() {
                setTimeout(() => {
                    let data = "用户数据"
                    //调用next()方法，然后把获取的数据传入作为下一个内容的输入参数
                    iterator.next(data);
                }, 1000)
            }

            function getOders() {
                setTimeout(() => {
                    let data = "订单数据"
                    iterator.next(data);
                }, 1000)
            }

            function getGoods() {
                setTimeout(() => {
                    let data = "商品数据"
                    iterator.next(data);
                }, 1000)
            }

            //生成器调用(异步调用)
            function* gen() {
                let s1 = yield getUsers();
                console.log(s1)
                let s2 = yield getOders();
                console.log(s2)
                let s3 = yield getGoods();
                console.log(s3)
            }

            //调用
            let iterator = gen();
            iterator.next();
</script>