脚本宝典收集整理的这篇文章主要介绍了

es6:常用命令(2)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

1、 Set 和 Map数据结构

Set 数据结构

  • Set 类似数组,但是成员是唯一的,不存在重复值。
    Set本身是一个构造函数,用来生成Set数据结构。
    Set结构具有的属性:

       - Set.prototype.constructor:构造函数,默认是Set函数。
       - Set.prototype.size:返回Set的成员个数。
  • Set结构具有的方法

       - add(value):添加值;
       - delete(value):删除值
       - has(value):返回一个布尔值,
       - clear(): 清空所有成员
    举例:
        var s = new Set();
        
        //通过add方法向Set结构中加入成员
        [1,2,3,3,4].map(x => s.add(x))
        //Set结构不会添加重复值
        
        console.log(s) //{1,2,3,4}
        console.log(s.size)    //4
        console.log(s.has(1))  //true
        
        s.delete(2)            //删除某个值
        console.log(s.has(2))  //false 
        
        Array.from方法可以将Set结构转为数组const arr1 = [1,2,3,4];
        const items = new Set(arr1);    //{1,2,3,4}
        const array = Array.from(items) //[1,2,3,4]
        
        Set数组去重的方法:
        function dedupe(array){
            return Array.from(new Set(array));
        } 
        dedupe([1,1,2,3])    //[1,2,3]

Map 数据结构

  • Map 类似对象,也是键值对的集合,但是"键"的范围不限于字符串,各种类型的值(包括对象)都可以当作键。
    Map本身也是构造函数,也可以接受一个数组作为参数
    Map实例具有的属性:

        - size属性:返回Map结构的成员总数
Map实例具有的方法:
     - set(key, value):设置键名key对应的键值value,然后返回整个Map结构,如果key已经存在,则键值更新;
     - get(key):读取key对应的键值,如果找不到key,返回undefined;
     
     - has(key):返回一个布尔值;
     - delete(key):删除某个键,返回布尔值;
     - clear(): 清除所有成员,没有返回值。
 举例:
     let map = new Map();
     map.set('name','liyong').set('age',10);
     
     console.log(map); //链式{"name" => "liyong","age"=>10}
     console.log(map.size);         // 2
     console.log(map.has("name"))   // true
     console.log(map.get("name"))   // "liyong"
     
     map.delete("name");            // 删除某个键
     console.log(map.has("name"))   // false
     console.log(map.get("name"))   // undefined
     console.log(map.size)          // 1
     
     map.clear();                   // 清空
     console.log(map.size)          // 0

2、 Promise 对象

Promise是一个构造函数,用来生成Promise实例,是异步编程的一种解决方案。
Promise构造函数接受一个函数作为参数,该函数的两个参数分别是函数resolve 和 rejected。
resolve函数作用是,异步操作成功后调用,并将异步操作结果作为参数传递出去;
reject函数的作用是,异步操作失败时调用,并将异步操作结果作为参数传递出去。
Promise的基本用法:

//方法1
let promise = new Promise((resolve, reject)=>{
    if(success){
        resolve(data)
    }else{
        reject(err)
    }
})

//方法2
function promise (){
    return new Promise((resolve, reject)=>{
        if(success){
            resolve(a)
        }else{
            reject(err)
        }
    })
}
实例化的Promise对象会立即执行。

2.1 Promise.prototype.then()方法

Promise实例具有then方法,then方法是定义在原型对象Promise.prototype上的。then方法的第一个参数是resolved状态的回调函数,第二个参数(可选)是rejected状态的回调函数。
链式操作的用法:

    //第一个函数runAsync1()
    function runAsync1(){
        let p = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve('第一个回调成功')
            },1000)
        });
        return p;
    }
     //第二个函数runAsync2()
    function runAsync2(){
        let p = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                reject('第二个回调失败')
            },2000)
        });
        return p;
    }
     //第三个函数runAsync3()
    function runAsync3(){
        let p = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                reject('第三个回调成功')
            },3000)
        });
        return p;
    }
    runAsync1()
    .then((data)=>{
        console.log(data);
        return runAsync2();
    },(error)=>{
        console.log(err);
        return runAsync2();
    })
    .then((data)=>{
        console.log(data);
        return runAsync3();
    },(error)=>{
        console.log(error);
        return runAsync3();
    }).then((data)=>{
        console.log(data)
    },(error)=>{
        console.log(error)
    })
    // 第一个回调成功
    // 第二个回调失败
    // 第三个回调成功

2.2 Promise.prototype.catch()方法

Promise.prototype.catch方法是.then(null,()=>{})的别名,用于指定发生错误时的回调函数。
举例:

Promise对象实现Ajax操作的例子
const getJSON = function(type,url){
    const promise = new Promise((resolve, reject)=>{
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = handler;
        xhr.open(type,url,true);
        xhr.responseType = "json";
        xhr.setRequestHeader("Accept", "application/json");
        xhr.send();
        function handler(){
            if(this.readyState !== 4){
                return;
            }
            if(this.status == 200){
                resolve(this.response)
            }else{
                reject(new Error(this.statusText))
            }
        }
    });
    return promise;
}
//测试
getJSON("get","data/cartData.json")
    .then((response)=>{
        console.log(response)
    })
    .catch((error)=>{
        console.log(error)
    })
getJSON是对XMLHttpRequest 对象的封装,用于发出一个针对JSON数据的HTPP请求,并且返回一个Promise对象

2.3 Promise.prototype.all()方法

Promise的all用法提供并行执行异步操作,并且在所有的异步操作执行完成后执行回调。
使用场景:

一些游戏素材比较多的应用,打开网页时,预先加载需要用到的各种资源,
所有的都加载完后,我们在进行页面的初始化。all方法的实际效果是,谁跑的慢就以谁为执行回调
举例:
还是上面的三个函数runAsync1()、runAsync2()、runAsync3()。
Promise
    .all([runAsync1(), runAsync2(), runAsync3()])
    .then((result)=>{
        console.log(result)
    })
    .catch((error)=>{
        console.log(error)
    })
    //第二个回调失败

2.4 Promise.prototype.race()方法

Promise.race方法同样是将多个Promise实例,包装成一个新的Promise实例。
用法:

 const p = Promise.race([p1,p2,p3]);    
上面代码中,只要p1、p2、p3之中的一个实例先改变状态,p的状态就跟着改变。那个先改变的Promise实例的返回值,就传递给p的回调函数。

举例:

//加载图片超时的处理
function request(url){
    let p = new Promise((resolve, reject)=>{
        let img = new Image();
        img.onload = resolve;
        img.src = url;
    });
    return p;
}
//延迟函数,用于给请求计时
function timeout(){
    let p = new Promise((resolve, reject)=>{
        setTimeout(()=>{
            reject('图片超时')
        },5000)
    });
    return p;
}
Promise
    .race([requestImg('../../img/1.1.jpg'), timeout()])
    .then((result)=>{
        console.log(result)
    })
    .catch((reason)=>{
        console.log(reason)
    })

clipboard.png

总结

以上是脚本宝典为你收集整理的

es6:常用命令(2)

全部内容,希望文章能够帮你解决

es6:常用命令(2)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过