首页 > 其他分享> 文章详细

es6——生成器函数

2022-08-27 23:00:09 阅读：241 来源： 互联网

标签：es6 console log iterator 生成器 yield next let 函数

文章结构

　　生成器函数的定义与使用

　　给生成器函数传参

　　给生成器函数异步传参

　　生成器函数的应用场景

　　　　解决回调地域

 1  //生成器函数的定义与使用
 2         function *fn(){
 3             //yield类似于断电
 4             console.log(111);
 5             yield `第一段`
 6             console.log(222);
 7             yield `第二段`
 8             console.log(333);
 9             yield `第三段`
10             console.log(444);
11         }
12 
13         //调用
14         let iterator = fn();
15         //每次调用next会执行生成器函数中yield段代码，并且返回包含yield的值的对象
16         console.log(iterator.next());
17         console.log(iterator.next());
18         console.log(iterator.next());
19         console.log(iterator.next());
20 
21         for(let i of fn()){
22             console.log(i);
23         }

给生成器函数传参

 1        function * fn(arg){
 2         console.log(arg);
 3         let one = yield 1;
 4         console.log(one);
 5         let two = yield 2;
 6         console.log(two);
 7         let three = yield 3;
 8         console.log(three);
 9        }
10 
11        //执行获取迭代器对象
12        let iterator = fn('AAA');
13        iterator.next();
14        //从第二次开始next的参数会成为yield的返回值
15        iterator.next('BBB');
16        iterator.next('CCC');
17        iterator.next('DDD');

给生成器函数异步传参

 1 function getname() {
 2     setTimeout(() => {
 3         let name = 'zhangsan';
 4         iterator.next(name);
 5     }, 1000)
 6 }
 7 
 8 function getdata() {
 9     setTimeout(() => {
10         let data = 'data';
11         iterator.next(data);
12     }, 2000)
13 }
14 
15 function gettime() {
16     setTimeout(() => {
17         let time = 'time';
18         iterator.next(time);
19     }, 3000)
20 }
21 
22 function* fn() {
23     getname();
24     // 可以使用一个变量去接收yield的返回值，yield返回上一次调用iterator.next()的参数
25     let one = yield;
26     console.log(one);
27     getdata();
28     let two = yield;
29     console.log(two);
30     gettime();
31     let three = yield;
32     console.log(three);
33 }
34 
35 let iterator = fn();
36 iterator.next();

生成器函数的应用场景

解决回调地域

 1 setTimeout(() => {
 2             console.log(111);
 3             setTimeout(() =>{
 4                 console.log(222);
 5                 setTimeout(()=>{
 6                     console.log(333)
 7                 },3000)
 8             },2000)
 9         },1000)
10 
11         function fn1(){
12             setTimeout(()=>{
13                 console.log(111);
14                 iterator.next();
15             },1000)
16         }
17 
18         function fn2(){
19             setTimeout(()=>{
20                 console.log(222);
21                 iterator.next();
22             },1000)
23         }
24 
25         function fn3(){
26             setTimeout(()=>{
27                 console.log(333);
28                 iterator.next();
29             },1000)
30         }
31 
32         function *fn(){
33             fn1();
34             yield;
35             fn2();
36             yield;
37             fn3();
38             yield;
39         }
40 
41         let iterator = fn();
42         iterator.next();

标签：es6,console,log,iterator,生成器,yield,next,let,函数
来源： https://www.cnblogs.com/lzx-cm/p/16629266.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

es6——生成器函数