我來了我來了

---

theme: smartblue # Markdown 主題，默認值：juejin

highlight: juejin # 代碼高亮主題，默認值：theme 中指定，沒有則默認爲 juejin

JavaScript中有多種循環Array的方式，你是否經常分不清他們的細微差異，和適用場景。本文將詳細梳理各間的優缺點，整理成表以便對比。

循環	可訪問element	可訪問index	可迭代property	支持中斷	支持await	支持任意位置開始
for	√	√	×	√	√	√
for in	√	×	√	√	√	×
forEach	√	√	×	×	×	×
for of	√	√	×	√	√	×

示例地址

for （ES1)

這個循環方式歷史悠久，從ECMAScript 1就被支持。

const arr = ['a', 'b', 'c'];
arr.prop = 'property value';

for (let index=0; index < arr.length; index++) {
  const elem = arr[index];
  console.log(index, elem);
}

// Output:
// 0, 'a'
// 1, 'b'
// 2, 'c'

for循環方式通用，迭代過程能夠訪問元素和當前元素下標索引，可是語法上略顯冗長。

for in (ES1)

for in 的歷史同for同樣悠久。

const arr = ['a', 'b', 'c'];
arr.prop = 'property value';

for (const key in arr) {
  console.log(key);
}

// Output:
// '0'
// '1'
// '2'
// 'prop'

for in 用來循環數組不是一個合適的選擇。

• 迭代的是屬性key，不是值
• 因爲屬性 key 是字符串，迭代出的元素索引是 string,不是 number.
• 迭代的是數組實例上全部可枚舉的屬性key,而不是數組內元素。

若是你想獲取一個對象全部的可枚舉屬性(包含原型鏈上的)，那麼 for in 卻是能夠勝任，若僅僅是對象自身聲明的屬性，那 Object.keys 更合適。

forEach (ES5)

鑑於 for 和 for-in 都不特別適合在 Arrays 上循環，所以在ECMAScript 5中引入了輔助方法：Array.prototype.forEach.

const arr = ['a', 'b', 'c'];
arr.prop = 'property value';

arr.forEach((elem, index) => {
  console.log(elem, index);
});

// Output:
// 'a', 0
// 'b', 1
// 'c', 2

這個方法很方便,它讓咱們能夠訪問數組元素和數組元素下標，而不須要作太多的事情。箭頭函數(在ES6中引入)使該方法在語法上更加優雅。

forEach 主要肯定是：

• 循環內部不支持 await 操做。
• 即便找到你想要的元素，也沒法中斷循環。

要實現中斷循環，能夠使用同期引入的 Array.prototype.same 方法。some 循環遍歷全部 Array 元素，並在其回調返回一個真值時中止。

const arr = ['red', 'green', 'blue'];
arr.some((elem, index) => {
  if (index >= 2) {
    return true; //結束循環
  }
  console.log(elem);
  // 隱式返回假值 undefined，繼續循環
});

// Output:
// 'red'
// 'green'

for of (ES6)

for of 是 ECMAScript 6 新引入的語法。

const arr = ['a', 'b', 'c'];
arr.prop = 'property value';

for (const elem of arr) {
  console.log(elem);
}
// Output:
// 'a'
// 'b'
// 'c'

for of 很適合遍歷數組：

• 迭代全部數組元素
• 內部支持 await，甚至是 ES2018 中引入的 for-await-of 語法
• 能夠使用 break 和 continue 跳出循環

for-of 的另外一個好處是，咱們不只能夠遍歷數組，還能夠遍歷任何可迭代對象(例如map)

const myMap = new Map()
  .set(false, 'no')
  .set(true, 'yes')
;
for (const [key, value] of myMap) {
  console.log(key, value);
}

// Output:
// false, 'no'
// true, 'yes'

遍歷 myMap 會生成[key, value]對，對其進行解構方便直接訪問。

若是你在循環中須要感知當前元素索引，能夠經過 Array 方法 entries 返回可迭代的 [index，value]對。 和map同樣的解構直接訪問index、value：

const arr = ['chocolate', 'vanilla', 'strawberry'];

for (const [index, value] of arr.entries()) {
  console.log(index, value);
}
// Output:
// 0, 'chocolate'
// 1, 'vanilla'
// 2, 'strawberry'

循環體內 await 測試

準備以下代碼用於測試循環體內 await，getFruit 模擬遠程服務延遲返回。

const fruits = ["apple", "grape", "pear"];

const sleep = (ms) => {
  return new Promise((resolve) => setTimeout(resolve, ms));
};

const getFruit = (fruit) => {
  return sleep(2000).then((v) => fruit);
};

先看 for of, 元素之間會按預期間隔輸出。

(async function(){
    console.log('start');
    for (fruit of fruits) {
        const element = await getFruit(fruit);
        console.log(element);
    }
    console.log('start');
})();

//3個元素 間隔2s輸出
"start"
"apple"
"grape"
"pear"
"end"

再看 forEach， 注意 forEach 調用後直接返回輸出 loop end, 間隔2s 後同時輸出了後面結果，並無按預期各個間隔輸出。

(async function () {

  console.log("foreach loop start ....");
  fruits.forEach(async value => {
    const element = await getFruit(value);
    console.log(element);
  });
  console.log("foreach loop end ....");

})();

//同時輸出
foreach loop start ....
foreach loop end ....
//間隔2s 後同時輸出下面3個
apple
grape
pear

示例地址