es6基础知识（三）

最新推荐文章于 2022-04-16 09:28:04 发布

XYY0504

最新推荐文章于 2022-04-16 09:28:04 发布

阅读量356

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/XYY0504/article/details/123099541

版权

本文通过示例介绍了JavaScript中的async/await用法，展示了如何使用Promise进行异步操作，并探讨了生成器（generator）和迭代器的概念。示例包括使用async函数处理延迟操作，以及创建自定义迭代范围的生成器函数。此外，还涉及到了JavaScript对象的Proxy使用，用于实现数据绑定和监听输入变化的功能。

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

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <input type="text" id="inp"/>
       <p id="myp"></p>
   </body>
   <script>

       /* // 用asyc 装饰函数返回的是promise对象
               async function say(){
                   return "你好ES6"
               }
               say()
               .then(res=>console.log(res)) */

               // async与awiat




               // awiat 只能在aync函数里面
                   function say(msg,time){
                       return new Promise((resolve,reject)=>{
                           setTimeout(()=>resolve(msg),time)
                       })
                   }

                   // 2秒后说你好
                   // 3秒后说我很中意你
                   // 定义async函数
                   async function doit(){
                       // await会等待say函数执行完才会向下执行
                       var s1 = await say("你好",2000);
                       console.log(s1);
                       var s2 = await say("我很中意你",10000);
                       console.log(s2);
                       return s1+s2;
                   }
                   doit()
                   .then(res=>console.log(res))


       // 唯一的,不可变的
       /*    var sym = Symbol("内容");
           console.log(sym,typeof sym);
           var obj= {sym:"abc"}; */



       var arr = [2,6,8];
               // 获取数组的迭代器
               var iter = arr[Symbol.iterator]();
               // iter.next(); //{value: 6, done: false}
               // ...
               // iter.next();//{value: undefined, done: true}


       function *gen(){
                   // 当生成器函数语言的yield 函数就会暂停，返回值
                   yield "大漂亮";
                   yield "剑帝";
                   yield "abc";
               }
               // 执行完毕生成的是迭代器
               var list = gen();
               // list.next();
               // 可以通过next方法获取yield返回的值和状态

               // 遍历迭代器
               for(let v of list){
                   console.log(v)
               }

       // 写一个生成器，range 参数start= 1，end=100；
               // 创建一个出一可以迭代start 到end数
               function *range(start,end,step){
                   while(start<end){
                       yield start;
                       start+=step;
                   }
               }
               var list = range(2,101,2);
               // var arr = Array.from(list);
               var arr = [...list];
               console.log(arr)
               // range 产生由start到end的一个可以迭代对象
               for(var v of list){
                   console.log(v);
               }




       // // 代理就是对原有对象target 二次加工
       // var obj ={"name":"mumu",age:18};
       // // 用o来代理obj
       // var o = new Proxy(obj,{
       //    // 当获取o对象的属性值执行get方法
       //    get:function(target,prop){
       //        if(prop in target){
       //            return target[prop]
       //    }else{
       //        return"wo cao";
       //    }
       //    }
       // })


       var inp = document.getElementById("inp");
       var myp=document.getElementById("myp");
       var obj = {
           msg:"我喜欢vue"
       };
       var o = new Proxy(obj,{
           // get劫持
           get(target,prop){
               return target[prop]
           },
           // 设置值 o.msg = "abc" 会触发set
           // target obj对象 ; prop msg; value "abc"
           // set劫持
           set(target,prop,value){
               // 只要被设置 value就会输出
               if(prop==="msg"){
                   // 更新
                   myp.innerText = value;
                   inp.value = value;

           }
           target[prop] = value;
       })
       // 设置节点的值或文本
       inp.value = o.msg;
       myp.innerText = o.msg;
       // 目标:当input发生变化的时候,p的内容也要跟随变化
       // 给inp表单添加input事件修改o.msg的值
       inp.oninput = function(){o.msg = inp.value}
   </script>
</html>