ES6知识点(3)

最新推荐文章于 2024-09-21 11:29:05 发布

昼月眠

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量181

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/xiuxiuxiu555/article/details/123097572

版权

1.异步与等待

async异步 await等待

async装饰的函数返回的是一个promise对象

await只能在async函数里面使用，当函数遇到await 等待await结果，再往下执行

// Promise 主要做异步任务 (需要时间等待)任务
        function say(msg,time){
            return new Promise((resolve,reject)=>{
                setTimeout(()=>resolve(msg),time)
            })
        }
 // 定义async函数
        async function doit(){
            // await 会等待say函数执行完才会向下执行
            var s1 = await say("你好",2000);
            // 两秒后说你好 如果没有await 返回函数promise 因为没有执行完毕
            console.log(s1);
            var s2 = await say("我好喜欢你",5000);
            // 五秒后说我好喜欢你
            console.log(s2);
            return s1+s2;
            // 输出你好 + 我好喜欢你
        }
        doit()
        .then(res=>console.log(res));
        // 输出结果

2.Promise

ES6 对 Promise 有了原生的支持，一个 Promise 是一个等待被异步执行的对象，当它执行完成后，其状态会变成 resolved 或者rejected。

定义执行异步任务 避免回调地狱
        var p = new Primise ((resolve,reject)=>{
            Math.random()>0.5?resolve("请你吃肯德基"):reject("明天再说")
        })

实例

p.then(res=>console.log(res))
        .catch(err=>console.log(err))
 Promise all([...])
        .then()
        等待异步列表中全部resolve执行
        Promise.rece([...])
        .then()
        异步列表中最resolve的值

3.迭代器

迭代器允许每次访问数据集合的一个元素，当指针指向数据集合最后一个元素时，迭代器便会退出。它提供了 next() 函数来遍历一个序列，这个方法返回一个包含 done 和 value 属性的对象

可迭代对象都拥有迭代器

可以被for of 遍历的元素

都是可迭代对象

String Array Set Map

先获取迭代对象

 var arr =[2,6,8]
        var iter = arr[Symbol.iterator]();
        // 获取数组的迭代器

通过next方法来进行迭代

当我们执行itr.next()进行迭代

 iter.next; //{value:6,done:false}
        ...
        iter.next();//{value:undefined:true}

4.生成器

生成器是 ECMAScript 6 新增的一个极为灵活的结构，拥有一个函数块内暂停和恢复代码执行的能力。

生成器函数提供了一个强大的选择：它允许你定义一个包含自有迭代算法的函数，同时它可以自动维护自己的状态。

使用 function*语法定义生成器函数，而且 * 不受两侧空格的影响。只要是可以定义函数的地方，就可以定义生成器。

function * gen(){
        // 当生成器函数遇到语言的yield函数就会暂停 返回值
        yield "嗯嗯嗯";
        yield "啊啊啊";
        yield "abc";

    }
    var list = gen();
    // list.next();
    // 可以next 方法获取到yield返回的值和 状态
    // 执行完生成的是迭代器
    // 遍历迭代器
    for (let v of list){
        console.log(v);
        
    }

案例

写一个生成器 range 参数 start = 2 end=101

创建一个出一可以迭代start到end数

function * range(start,end,step){
            while(start<end){
                yield start
                start+=step;
            }
        }
        var list = range(2,101,2);
        var arr = [...list];
        console.log(arr);


        // range 产生由start到end的一个可以迭代对象
        for(var v of list){
            console.log(v);
            
        }

5.代理

代理就是对原有对象target 二次加工

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）

  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 "错了";
                }
            },set:function(target,prop,value){
                if(prop==="age"){
                    if(value>200||value<0){
                        // 发送一个范围错误
                        throw RangeError("你输入的是人的年龄吗")
                    }else{
                        target[prop] = value;
                    }
                }
                else{
                    target[prop] = value;
                }
            }
        })
        // 通过o代理劫持obj

下面是input和p的双向绑定案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id = "inp">
    <p id="myp"></p>
    <script>
        // 获取两个节点
        var inp = document.getElementById("inp");
        var myp = document.getElementById("myp");
        // 定义对象obj
        var obj = {
            msg:"123"
        }
        // 使用代理劫持obj
        var o = new Proxy(obj,{
            // get劫持
            get(target,prop){
                return target[prop]
            },
            // 设置值 o.msg = "abc" 会触发set
            // target obj对象 prop msg value abc

            set(target,prop,value){
                // 只要被设置 value 会输出
                // console.log(value);
                
                // set劫持
                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>
</body>
</html>