Map傾向於後臺

Map是ES6引入的一種類似Object的新的資料結構，Map可以理解為是Object的超集，打破了以傳統鍵值對形式定義物件，物件的key不再侷限於字串，也可以是Object。可以更加全面的描述物件的屬性。

 1 var map = new Map();
 2 // 設定
 3 // map.set(name,value);
 4 map.set('a','apple');
 5 map.set('b','banana');
 6 // 獲取
 7 // map.get(name);
 8 console.log(map.get('a') + ' ' + map.get('b'));
 9
 
 // 刪除之前map物件
10 console.log(map);
11 // 刪除
12 // map.delete(name);
13 map.delete('a');
14 // 刪除之後map物件
15 console.log(map);
16 
17 // 注意for..in是不能迴圈map物件的，不報錯也無任何反應，所以下一程式碼無任何輸出，稍微注意下
18 for(var name in map){
19     console.log(name);
20 }
21 
22 // 實體 map物件的迴圈輸出
23 for(var name of map){
24 //迴圈出來的結果就是:a,apple b,banana 迴圈key,value
 

25 console.log(name);
26 }
27 
28 //迴圈出來的結果就是: a,apple b,banana 迴圈key,value
29 for(var [key,value] of map.entries()){
30     console.log(key,value);
31 }
32 
33 //只迴圈key
34 for(var key of map.keys()){
35     console.log(key);
36 }
37 
38 //只迴圈value
39 for(var val of map.values()){
40     console.log(val);
 
41 }

promise

romise之前程式碼過多的回撥或者巢狀，可讀性差、耦合度高、擴充套件性低。通過Promise機制，扁平化的程式碼機構，大大提高了程式碼可讀性；用同步程式設計的方式來編寫非同步程式碼，儲存線性的程式碼邏輯，極大的降低了程式碼耦合性而提高了程式的可擴充套件性。

//Promise物件 ---> 用來傳遞非同步操作過來的資料的
//Pending(等待、處理中) ---> Resolve(完成，fullFilled)   ---> Reject(拒絕，失敗)
//這裡只是定義，還沒開始執行
var p1 = new Promise(function(resolve,reject){
    resolve(1); // 成功了，返回一個promise物件1
    // reject(2); // 失敗了
});

// 接收成功和失敗的資料，通過then來傳遞
// then也是返回一個promise物件，會繼續往下傳遞資料,傳遞給下一個then
p1.then(function(value){
    // resolve
    console.log(value); //執行列印1
    return value + 1; // 1
    alert(`成功了：${value}`);
},function(value){
    // reject
    alert(`失敗了：${value}`);
}).then(function(value){
    console.log(value); // 2
});

//catch捕獲異常錯誤
var p1 = new Promise(function(resolve,reject){
    resolve('成功了'); //返回一個promise物件“成功了”
});
//then也是返回一個promise物件，會繼續往下傳遞資料
p1.then(function(value){
    console.log(value); //列印“成功了”
    // throw是用來拋錯誤的
    throw '發生了點小意外';
}).catch(function(e){
    // catch用來捕獲這個錯誤的 ---> 追蹤
    console.log(e);
});

//all ---> 全部，用於將多個promise物件，組合，包裝成
//Promise.all([p1,p2,p3,...]); 所有的promise物件，都正確，才走成功
//否則，只要有一個錯誤，就走失敗
var p1 = Promise.resolve(1);
var p2 = Promise.reject(0);
Promise.all([true,p1,p2]).then(function(obj){
    console.log(`成功了：${obj}`);
},function(obj){
    console.log(`失敗了：${obj}`);
});

// race ---> 返回的也是一個promise物件
//最先執行的的promise結果，哪個最快我用哪個，所以下面列印的是one
var p1 = new Promise(function(resolve,reject){
    setTimeout(resolve,50,'one');
});
var p2 = new Promise(function(resolve,reject){
    setTimeout(resolve,100,'two');
});
Promise.race([p1,p2]).then(function(val){
    console.log(val);
});

//resolve ---> 生成一個成功的promise物件
//語法規則：Promise.resolve(val); // 普通值
// Promise.resolve(arr); // 陣列之類
//Promise.resolve(promise); // 傳遞另一個promise物件
//傳遞普通值
Promise.resolve('success').then(function(val){
    // 注意resolve，走得是這裡
    console.log(val); // success
},function(err){
    console.log("err:"+ err);
});
//傳遞陣列
Promise.resolve([1,2,3]).then(function(val){
    // 注意resolve，走得是這裡
    console.log(val); // [1,2,3]
},function(err){
    console.log(err);
});
//傳遞一個promise物件
var p1 = Promise.resolve(520);
var p2 = Promise.resolve(p1);
p2.then(function(val){
    //從p1那邊傳遞過來的
    console.log(val); // 520
});

例題

 1 setTimeout(function() {
 2   console.log(1)
 3 }, 0);
 4 new Promise(function executor(resolve) {
 5   console.log(2);
 6   for( var i=0 ; i<10000 ; i++ ) {
 7     i == 9999 && resolve();
 8   }
 9   console.log(3);
10 }).then(function() {
11   console.log(4);
12 });
13 console.log(5);

看到以上列印結果，我們都會疑惑為什麼是這樣？以下看我的解釋就明白了

首先我們可以看到我一開始就使用了定時器，我們都知道定時器是非同步載入，於是會先設定一個定時，在定時結束後將傳遞這個函式放到任務佇列裡面，因此開始肯定不會輸出1。等所有的內容載入完畢後才會輸出

然後是一個promise，裡面的函式是直接執行的，因此輸出2 3

promise裡的then方法是放在tick的最後，但是還是在當前的tick中，會先輸出5，才會輸出4

所以它的輸出結果才會是 2 3 5 4 1的順序

未完............