【每日一題】在 map 中和 for 中調(diào)用異步函數(shù)的區(qū)別

區(qū)別

map 會(huì)先執(zhí)行同步操作執(zhí)行完并返回，之后再一次一次執(zhí)行異步任務(wù)；

for 是等待異步返回結(jié)果，之后再進(jìn)入下一次循環(huán)。

測(cè)試

公共代碼

const arr = [1, 2, 3, 4, 5];
function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("data");
    }, 1000);
  });
}

map 表現(xiàn)

(async () => {
  const result = arr.map(async () => {
    console.log("start");
    const data = await getData();
    console.log(data);
    return data;
  });
  console.log(result);
})();

/* 先一次性打印下邊這兩行*/
// 5 start -> 遍歷每一項(xiàng)，打印start
// (5)[Promise, Promise, Promise, Promise, Promise] -> 返回的結(jié)果（在未執(zhí)行完之前展開(kāi)，都是pending狀態(tài)；執(zhí)行完畢后展開(kāi)，都是fulfilled狀態(tài)）

/* 待結(jié)果完畢后，一次性打印await后內(nèi)容*/
// 5 data -> 遍歷每一項(xiàng)異步執(zhí)行返回的結(jié)果

map 函數(shù)的原理小總結(jié)：

1. 循環(huán)數(shù)組，把數(shù)組每一項(xiàng)的值傳給回調(diào)函數(shù)
2. 將回調(diào)函數(shù)處理后的結(jié)果 push 到一個(gè)新的數(shù)組
3. 返回新的數(shù)組

map 函數(shù)都是同步執(zhí)行的，循環(huán)每一項(xiàng)的時(shí)候，到給新數(shù)值都是同步操作

代碼執(zhí)行結(jié)果：

map 不會(huì)等到回調(diào)函數(shù)的異步函數(shù)返回結(jié)果，就會(huì)進(jìn)入下一次循環(huán)。執(zhí)行完同步操作之后返回結(jié)果，所以 map 返回的值都是 promise。

for 表現(xiàn)

(async () => {
  for (let i = 0, len = arr.length; i < len; i++) {
    console.log(i);
    const data = await getData();
    console.log(data);
  }
})();

// 0
// data
// 1
// data
// 2
// data
// 3
// data
// 4
// data