es6——生成器函数
文章结构
生成器函数的定义与使用
给生成器函数传参
给生成器函数异步传参
生成器函数的应用场景
解决回调地域
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();
