摘要：對空數(shù)組是不會執(zhí)行回調(diào)函數(shù)的。就算改變已經(jīng)發(fā)生了，你再對對象添加回調(diào)函數(shù)，也會立即得到這個(gè)結(jié)果。用來表示函數(shù)是異步的，定義的函數(shù)會返回一個(gè)對象，可以使用方法添加回調(diào)函數(shù)。

通過Array/Object/Function基礎(chǔ)類型編寫。

看到自己不了解的或者比較新穎的用法便會寫上。

不定時(shí)更新內(nèi)容。

本文首發(fā)于我的個(gè)人網(wǎng)站: Timbok.top

Array

迭代方法

split和join

Object

object映射

Function

promise

async-await

every()方法對數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，如果該函數(shù)對每一項(xiàng)都返回 true，則返回 true

const arr = [1,2,3,4];
const result = arr.every((item, index, arr)=>{
    return item > 2;
});
console.log(result); // false

some()方法 對數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，如果該函數(shù)對任一項(xiàng)返回 true，則返回 true

const arr = [1, 2, 3, 4];
const result = arr.some((item, index, arr)=>{
    return item > 2;
});
console.log(result); // true

filter()方法對數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，返回該函數(shù)會返回 true 的項(xiàng)組成的數(shù)組

const arr = [1, 2, 3, 4];
const result = arr.filter((item, index)=>{
    return item > 2;
});
console.log(result); // [3, 4]

map()方法 對數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組

const arr = [1, 2, 3, 4];
const result = arr.map((item, index)=>{
    return item * index;
});
console.log(result); // [0, 2, 6, 12]

forEach()方法 對數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)。這個(gè)方法沒有返回值，本質(zhì)上與使用 for 循環(huán)迭代數(shù)組一樣

const arr = [1, 2, 3, 4];
const result = arr.forEach((item, index)=>{
    // 執(zhí)行某些操作
});

reduce() 方法接收一個(gè)函數(shù)作為累加器，數(shù)組中的每個(gè)值（從左到右）開始縮減，最終計(jì)算為一個(gè)值。對空數(shù)組是不會執(zhí)行回調(diào)函數(shù)的。

arr.reduce(callback,[initialValue])

callback （執(zhí)行數(shù)組中每個(gè)值的函數(shù)，包含四個(gè)參數(shù)）

previousValue （上一次調(diào)用回調(diào)返回的值，或者是提供的初始值（initialValue））

currentValue （數(shù)組中當(dāng)前被處理的元素）

index （當(dāng)前元素在數(shù)組中的索引）

array （調(diào)用 reduce 的數(shù)組）

initialValue （作為第一次調(diào)用 callback 的第一個(gè)參數(shù)。）

無返回值

const arr = [1, 2, 3];
arr.reduce((pev, item)=>{
    console.log(pev, item);
}, 0);
// 運(yùn)行結(jié)果依次為：0 1; undefined 2; undefined 3; 

有返回值

// pev為上次迭代return的值
const arr = [1, 2, 3, 4];
const result = arr.reduce((pev, item)=>{
    console.log(pev);
    return pev + item;
}, 0);
console.log(result); // 10
// pev運(yùn)行結(jié)果依次為：0, 1, 3, 6

split(): 用于把一個(gè)字符串分割成字符串?dāng)?shù)組。

const string = "1, 2, 3, 4, 5";
string.split(","); // ["1", "2", "3", "4", "5"]

如果string為空，則返回一個(gè)空數(shù)組

const string = "";
string.split(","); // [""]
string.split(); // [""]

join(): 用于把數(shù)組中的所有元素放入一個(gè)字符串。

const array = [1, 2, 3, 4, 5];
array.join(); // "1,2,3,4,5" 默認(rèn)用，分割
array.join("|"); // "1|2|3|4|5" 默認(rèn)用，分割

定義一個(gè)object作為配置對象來存放不同狀態(tài)，通過鏈表查找

const statusMap = {
    1:()=>{
        console.log("a1")
    },
    2:()=>{
        console.log("b2")
    }
    /* n.... */
}
// 執(zhí)行
let a = 1 
statusMap[a]() // a1

這樣比較清晰，將條件配置與具體執(zhí)行分離。如果要增加其他狀態(tài)，只修改配置對象即可。

ECMAscript 6 原生提供了 Promise 對象。

Promise 對象代表了未來將要發(fā)生的事件，用來傳遞異步操作的消息。

Promise 對象有以下兩個(gè)特點(diǎn):

1、對象的狀態(tài)不受外界影響。Promise 對象代表一個(gè)異步操作，有三種狀態(tài)：

pending: 初始狀態(tài)，不是成功或失敗狀態(tài)。

fulfilled: 意味著操作成功完成。

rejected: 意味著操作失敗。

只有異步操作的結(jié)果，可以決定當(dāng)前是哪一種狀態(tài)，任何其他操作都無法改變這個(gè)狀態(tài)。這也是 Promise 這個(gè)名字的由來，它的英語意思就是「承諾」，表示其他手段無法改變。

2、一旦狀態(tài)改變，就不會再變，任何時(shí)候都可以得到這個(gè)結(jié)果。Promise 對象的狀態(tài)改變，只有兩種可能：從 Pending 變?yōu)?Resolved 和從 Pending 變?yōu)?Rejected。只要這兩種情況發(fā)生，狀態(tài)就凝固了，不會再變了，會一直保持這個(gè)結(jié)果。就算改變已經(jīng)發(fā)生了，你再對 Promise 對象添加回調(diào)函數(shù)，也會立即得到這個(gè)結(jié)果。這與事件（Event）完全不同，事件的特點(diǎn)是，如果你錯(cuò)過了它，再去監(jiān)聽，是得不到結(jié)果的。

簡單實(shí)現(xiàn)：

function _promise(params) {
  return new Promise((resolve, reject)=>{
    params>0 ? resolve("正數(shù)") : reject("負(fù)數(shù)");
  });
}
_promise(1).then(res=>console.log(res)) // 正數(shù)

_promise(-1).catch(res=>console.log(res)) // 負(fù)數(shù)

Promise.all可以將多個(gè)Promise實(shí)例包裝成一個(gè)新的Promise實(shí)例。同時(shí)，成功和失敗的返回值是不同的，成功的時(shí)候返回的是一個(gè)結(jié)果數(shù)組，而失敗的時(shí)候則返回最先被reject失敗狀態(tài)的值。

let p1 = new Promise((resolve, reject) => {
  resolve("成功了")
})

let p2 = new Promise((resolve, reject) => {
  resolve("success")
})

let p3 = Promise.reject("失敗")

Promise.all([p1, p2]).then((result) => {
  console.log(result)               //["成功了", "success"]
}).catch((error) => {
  console.log(error)
})

Promise.all([p1,p3,p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)      // "失敗"
})

需要特別注意的是，Promise.all獲得的成功結(jié)果的數(shù)組里面的數(shù)據(jù)順序和Promise.all接收到的數(shù)組順序是一致的，即p1的結(jié)果在前，即便p1的結(jié)果獲取的比p2要晚。這帶來了一個(gè)絕大的好處：在前端開發(fā)請求數(shù)據(jù)的過程中，偶爾會遇到發(fā)送多個(gè)請求并根據(jù)請求順序獲取和使用數(shù)據(jù)的場景，使用Promise.all毫無疑問可以解決這個(gè)問題。

顧名思義，Promse.race就是賽跑的意思，意思就是說，Promise.race([p1, p2, p3])里面哪個(gè)結(jié)果獲得的快，就返回那個(gè)結(jié)果，不管結(jié)果本身是成功狀態(tài)還是失敗狀態(tài)。

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("success")
  },1000)
})

let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("failed")
  }, 500)
})

Promise.race([p1, p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)  // 打開的是 "failed"
})

ES2017 標(biāo)準(zhǔn)引入了async 函數(shù)，使得異步操作變得更加方便。

async 函數(shù)是什么？一句話，它其實(shí)就是promise 和Generator 函數(shù)的語法糖。

async 用來表示函數(shù)是異步的，定義的函數(shù)會返回一個(gè)promise對象，可以使用then方法添加回調(diào)函數(shù)。

async function test() {
    return 123;
}

test().then(res => {
    console.log(res);// 123
});
若 async 定義的函數(shù)有返回值，return 123;相當(dāng)于Promise.resolve(123),沒有聲明式的 return則相當(dāng)于執(zhí)行了Promise.resolve();

await 可以理解為是 async wait 的簡寫。await 必須出現(xiàn)在 async 函數(shù)內(nèi)部，不能多帶帶使用。

function notAsyncFunc() {
    await Math.random();
}
notAsyncFunc();//Uncaught SyntaxError: Unexpected identifier

await 后面可以跟任何的JS 表達(dá)式。雖然說 await 可以等很多類型的東西，但是它最主要的意圖是用來等待 Promise 對象的狀態(tài)被 resolved。如果await的是 promise對象會造成異步函數(shù)停止執(zhí)行并且等待 promise 的解決,如果等的是正常的表達(dá)式則立即執(zhí)行。

function sleep(second) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(" enough sleep~");
        }, second);
    })
}
function normalFunc() {
    console.log("normalFunc");
}
async function awaitDemo() {
    await normalFunc();
    console.log("something, ~~");
    let result = await sleep(2000);
    console.log(result);// 兩秒之后會被打印出來
}
awaitDemo();
// normalFunc
// VM4036:13 something, ~~
// VM4036:15  enough sleep~

希望通過上面的 demo，大家可以理解我上面的話。

上述的代碼好像給的都是resolve的情況，那么reject的時(shí)候我們該如何處理呢？

function sleep(second) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject("want to sleep~");
        }, second);
    })
}

async function errorDemo() {
    let result = await sleep(1000);
    console.log(result);
}
errorDemo();// VM706:11 Uncaught (in promise) want to sleep~

// 為了處理Promise.reject 的情況我們應(yīng)該將代碼塊用 try catch 包裹一下
async function errorDemoSuper() {
    try {
        let result = await sleep(1000);
        console.log(result);
    } catch (err) {
        console.log(err);
    }
}

errorDemoSuper();// want to sleep~
// 有了 try catch 之后我們就能夠拿到 Promise.reject 回來的數(shù)據(jù)了。

最后一點(diǎn)，await必須在async函數(shù)的上下文中的。

參考文章