es6:經常使用命令（2）

一、 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

二、 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]);    
上面代碼中，只要p一、p二、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)
    })