ES6新增语法总结二（generator）

最新推荐文章于 2024-09-17 11:42:54 发布

m0_47900991

最新推荐文章于 2024-09-17 11:42:54 发布

阅读量111

点赞数

文章标签： javascript es6

本文链接：https://blog.csdn.net/m0_47900991/article/details/109120310

版权

本文深入探讨了ES6中的Generator函数，解释了其如何通过yield关键字实现代码暂停与恢复，解决了异步处理的问题。通过实例展示了yield用于传参和返回值的方式，并比较了回调、Promise和Generator在处理异步操作时的不同。最后，重点阐述了Generator在异步编程中的应用，如逻辑性读取数据，避免回调地狱。

摘要由CSDN通过智能技术生成

接上文------ES6新增语法总结一

12、generator 生成器

普通函数 ---- 一路到底
generator函数 ---- 中间能停 genObj.next( ) 一步，代码向下走一步，解决异步问题

12.1 generator原理

  function 函数名（）{
	代码…
	
	Ajax(xxx,function( ){ 
		代码…
	}
}

generator函数：
 function  *函数名（）{
	代码…
	
	yield  ajax（xxx）；
	
	代码…
}

等价于：

	 function show_1(){
         alert('a');
     }
     function show_2(){
         alert('b');
     }
     let genObj=show();  //返回的是一个generator对象
     genObj.next();   //show_1
     genObj.next();   //show_2

12.2 yield 放弃执行

  yield：可传参，可返回

12.2.1 yield传参

<script>  
     
     function *show(num1,num2){
         alert(`${num1},${num2}`);   //99, 88
         alert('a');           //a
 
        let a = yield;   //a的值由第二个genObj.next(5)传值; 
         alert('b');     //b
         alert(a)      //5
     }
     
     let genObj=show(99,88);  //返回的是一个generator对象
     genObj.next(12);   //show_1 ,没法给yield传参
     genObj.next(5);   //show_2 ,
     //console.log(genObj);
   </script>

12.2.2 yield返回 yield传参加return

<script>  
     
     function *show(){
      
         alert('a');          
 
         yield 12;  
         alert('b');   
          return 55;
  
     }
     let genObj=show();  //返回的是一个generator对象
     let res1 = genObj.next();  
     console.log(res1);       //{value: 12, done: false}
     let res2 = genObj.next();   
     console.log(res2);       //{value: undefined, done: true}  因为res2是最后一步，没有yield，给它传参，所以是undefined，需通过return返回该value值
                             // 添加return后，res2的结果为：{value: 55, done: true}
</script>

12.3 总结异步操作

1、回调
2、Promise （一次读一堆）

        Promise.all([     //先引入jquery。js
            $.ajax({url:'data/arr.txt',dataType:'json'}),
            $.ajax({url:'data/json.txt',dataType:'json'}),
            $.ajax({url:'data/num.txt',dataType:'json'}),
        ]).then(results=>{
            let [arr,json,num]=results;
            alert('成功了')
            console.log(arr,json,num);
        },err=>{
            alert('失败了')
        })

3、generator （不能写成箭头函数逻辑性读取）

         runner(function *(){
            let data1 = yield $.ajax({url:'1.txt',dataType:'json'});
            let data2 = yield $.ajax({url:'2.txt',dataType:'json'});
            let data3 = yield $.ajax({url:'3.txt',dataType:'json'});
            console.log(data1,data2,data3);
        })