陣列迴圈 在

關於 陣列迴圈

處理陣列時，有時你會想對陣列中的每個值執行程式碼。這就叫做疊代，也就是對陣列進行迴圈。

這裡要談的是過程中不需要修改陣列的情況。若想轉換陣列，請改看概念：陣列轉換。

for 迴圈

最基本、通常效能也最好的陣列疊代方式，就是使用 for 迴圈，請參考概念：for 迴圈。

const numbers = [6.0221515, 10, 23];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}
// => 6.0221515
// => 10
// => 23

for...of 迴圈

如果你想在每次疊代中直接處理值，完全不需要索引，就可以使用 for...of 迴圈。

for...of 的運作方式就像上面基本的 for 迴圈，但你不用把_索引_當成迴圈中的變數來處理，而是直接取得_值_。

const numbers = [6.0221515, 10, 23];

// Because re-assigning number inside the loop will be very
// confusing, disallowing that via const is preferable.
for (const number of numbers) {
  console.log(number);
}
// => 6.0221515
// => 10
// => 23

就像一般的 for 迴圈一樣，你可以用 continue 結束目前的疊代，用 break 完全停止迴圈的執行。

JavaScript 也有 for...in 迴圈，用來疊代物件中的鍵。要注意的是，for...of 和 for...in 不能互換使用，詳情請參考 MDN 文件。

forEach 方法

每個陣列都內建 forEach 方法，也可以用來對陣列中的元素進行迴圈。

forEach 接受一個回呼作為參數。這個回呼函式會針對陣列中的每個元素各被呼叫一次。

const numbers = [6.0221515, 10, 23];

numbers.forEach((number) => console.log(number));
// => 6.0221515
// => 10
// => 23

在上面的範例中，回呼只用目前的元素當作參數。如有需要，回呼最多可以使用三個參數。

• 目前疊代的_值_
• 目前疊代的_索引_
• 整個_陣列_

const numbers = [6.0221515, 10, 23];

function callback(number, index, fullArray) {
  console.log(number, index, fullArray);
}

numbers.forEach(callback);
// => 6.0221515 0 [ 6.0221515, 10, 23 ]
// => 10 1 [ 6.0221515, 10, 23 ]
// => 23 2 [ 6.0221515, 10, 23 ]

除了回呼之外，forEach 還接受一個選用的第二個參數，也就是疊代時要使用的 this 上下文。範例請見 MDN 的「Using thisArg」一節。

使用 forEach 時，有幾件事要特別留意。

• 一旦 forEach 迴圈開始執行，就無法中止疊代。在這個情境中並沒有 break 和 continue 這樣的敘述。
• 如果你在迴圈開始後修改陣列，forEach 的行為會變得很奇怪。加到陣列尾端的元素會被忽略，移除元素則可能導致其他元素被跳過等等。為了避免這類問題，千萬不要在回呼中修改底層陣列。
• forEach 方法本身的回傳值是 undefined。因此，你無法在後面串接其他的陣列方法。
• 如果你需要針對效能最佳化程式碼，應該考慮改用 for 或 for...of，因為兩者的速度快了大約三倍。