常見使用的遍歷函數

使用for-of循環(ES2015+) – 異步友好

使用forEach/some – 異步不友好(見例子)

使用for – 異步友好

幾點注意

不使用map，除非你用不到循環的返回值，請注意map和forEach是有區別的，map主要用來生成一個新的數組。

異步謹慎使用forEach，如果回調做異步工作，需要forEach等待（但是forEach不會等待，而是直接到底）。

數組遍歷例子

for-of (ES2015+)

用法簡單直接，使用let把單個變量的範圍進行限制，不會影響到循環外，而且性能優於forEach，建議遍曆數組使用該函數。

const a = ["a", "b", "c"];
for (let val of a) {
    console.log(val);
}
//依次打印結果 "a", "b", "c"

同時也對異步處理十分友好。

//延時
function delay(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

//異步函數打印數組內容
async function show(arr) {
  for (let item of arr) {
    await delay(400); //等待 forEach 則會無視 await
    console.log(item);
  }
}

show(["頭", "條", "新", "浪", "潮"]);
//依次延時打印結果 "頭"  "條"  "新"  "浪"  "潮"

forEach (ES5)

處理同步代碼（不需要等待），則可以使用forEach用於在循環期間完成的異步進程。

const a = ["a", "b", "c"];
a.forEach((val) => {
    console.log(val);
});
//依次打印結果 "a", "b", "c"

異步處理例子，注意與for-of的差異，將會並發運行，等同於多個子函數同步運行。

//延時
function delay(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

//異步函數打印數組內容
async function show(arr) {
  arr.forEach(async (item) => {
    await delay(400);
    console.log(item);
  });
}

show(["頭", "條", "新", "浪", "潮"]);
//延時完成後，直接打印 "頭"  "條"  "新"  "浪"  "潮"

for

const a = ["a", "b", "c"];
for (let i = 0; i < a.length; ++i) {
  console.log(a[i]);
}
//依次打印結果 "a", "b", "c"

//性能優化版
const a = ["a", "b", "c"];
for (let i = 0, length = a.length; i < length; ++i) {
  console.log(a[i]);
}

異步處理例子

//延時
function delay(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

//異步函數打印數組內容
async function show(arr) {
  for (let i = 0, length = arr.length; i < length; ++i) {
    await delay(400);
    console.log(arr[i]);
  }
}

show(["頭", "條", "新", "浪", "潮"]);
//依次延時打印結果 "頭"  "條"  "新"  "浪"  "潮"