生成器

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

function * gen(){
   yield '一只没有耳朵';
   console.log(222);
   yield '一只没有尾巴';
   yield '真奇怪';
}
let iterator = gen();
console.log(iterator.next());  //一只没有耳朵 
console.log(iterator.next());   // 先打印222 再返回一只没有尾巴
console.log(iterator.next());   //真奇怪

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

代码说明：

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

生成器函数的参数

<script>
        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()); //AAA  111
        //next方法可以传入实参
        console.log(iterator.next('BBB')); // BBB 222
        console.log(iterator.next('CCC')); // CCC 333
        console.log(iterator.next('DDD')); // DDD undefine
        
    </script>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
 

生成器函数示例

示例一：1s 后控制台输出 111 2s后输出 222 3s后输出 333(总时长6秒)
如果使用回调函数：

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
 

如果回调的函数增多则会很麻烦，代码结构很凌乱。

而使用生成器：

        function one(){
            setTimeout(()=>{
                console.log(111);
                iterator.next();
            },1000)
        }

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

        function three(){
            setTimeout(()=>{
                console.log(333);
                iterator.next();
            },3000)
        }

        function * gen(){
            yield one();
            yield two();
            yield three();
        }

        //调用生成器函数
        let iterator = gen();
        iterator.next();

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
 

这个next调用一定是在每一次回调结束后再去执行。如果最后并列着写三个next调用，那么总时长只有三秒，因为他们几乎是同一时间被加入到异步进程处理器中。

示例二： 模拟获取 用户数据 订单数据 商品数据

  <script>
        //模拟获取  用户数据  订单数据  商品数据 
        function getUsers(){
            setTimeout(()=>{
                let data = '用户数据';
                //调用 next 方法, 并且将数据传入
                iterator.next(data);
            }, 1000);
        }

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

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

        function * gen(){
            let users = yield getUsers();
            let orders = yield getOrders();
            let goods = yield getGoods();
        }

        //调用生成器函数
        let iterator = gen();
        iterator.next();

    </script>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
 

文章来源: blog.csdn.net，作者：十八岁讨厌编程，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/zyb18507175502/article/details/123939431