迴圈方法比較：for、forEach 和 map

前言 - Prologue

在程式開發中，迴圈是常見的控制結構之一，用於重複執行特定的程式碼塊。而在 JavaScript 中，有多種迴圈方法可供選擇，其中最常見的包括傳統的 for 迴圈、Array的 forEach 方法和 map 方法。每種迴圈方法都有其優點和適用場景，選擇適合的迴圈方法對於程式碼的效能和可讀性至關重要。

本文是統整比較 for 迴圈、forEach 和 map 的筆記，了解它們在使用上的異同以及適合的應用情境。從效能、彈性和程式碼風格等方面來評估這些迴圈方法，幫助程式開發者做出明智的選擇。

正文 - Main text

首先先簡單的介紹一下主題的 for 迴圈、forEach 和 map：

什麼是 `for` 迴圈？

是一種通用的傳統迴圈結構，用於重複執行程式碼塊。提供了最大的彈性，可以自由控制迴圈的開始值、結束條件和迭代器。處理大型資料集時效能較好，因為不需要創建新的函數作用域。

重點統整：

是一種通用的迭代方法，用於遍歷陣列或物件的元素。
可以使用索引或鍵來存取元素。
可以在迴圈內進行各種操作，包括修改陣列或物件的元素、計算或執行特定的邏輯。

範例：

const numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
  // 逐個輸出元素
}

什麼是 `forEach`？

Array 原型上的迴圈方法，專為處理陣列元素而設計。接受一個函數作為參數，並對陣列中的每個元素都應用該函數。沒有返回值，只用於執行操作或處理每個陣列元素。

重點統整：

用於遍歷陣列的每個元素並執行指定的回呼函式。
無法中途停止或跳出迴圈，只能進行迭代。
沒有返回值，只用於執行操作，無法創建新的陣列。
可以用於對陣列元素進行操作、修改或呼叫其他函式。

範例：

const numbers = [1, 2, 3, 4, 5];
numbers.forEach((num) => {
  console.log(num);
  // 逐個輸出元素
});

什麼是 `map`？

Array 原型上的迴圈方法，用於對陣列進行轉換和映射。接受一個函數作為參數，該函數應用於陣列中的每個元素，並返回一個新的陣列。常用於將原始陣列轉換為新的陣列，而不改變原始陣列本身。

重點統整：

用於遍歷陣列的每個元素並將其映射成一個新的值，並返回由這些新值組成的新陣列。
返回一個新的陣列，新陣列的長度和原始陣列相同，但每個元素都經過映射處理。
可以對陣列元素進行轉換、計算或衍生新的資料結構。

範例：

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((num) => {
  return num * 2;
  // 將每個元素乘以2得到新陣列
});
console.log(doubledNumbers);
// [2, 4, 6, 8, 10]

差別在哪裡呢？

1.控制流程：

for 迴圈：可以根據條件進行複雜的控制流程，例如使用 break 和 continue 中斷或跳過迴圈。
forEach 和 map：無法中途停止或跳出迴圈，只能進行迭代。

2.返回值：

for 迴圈：沒有預設的返回值，需要手動處理結果。
forEach：沒有返回值，只用於執行操作。
map：返回一個新的陣列，新陣列的長度和原始陣列相同，但每個元素都經過映射處理。

3.修改原始陣列：

for 迴圈：可以直接修改原始陣列中的元素。
forEach 和 map：不能直接修改原始陣列中的元素，但可以通過操作回呼函式中的參數來達到類似效果。

4.遍歷物件：

for 迴圈：可以遍歷物件的屬性和值，也可以用於遍歷陣列。
forEach 和 map：只能用於遍歷陣列，無法直接用於物件的遍歷。

使用場合有無推薦？

(以下僅供參考，此為筆記)

如果需要對陣列元素進行操作或修改原始陣列，可以使用 for 迴圈或 forEach。
如果需要對陣列進行映射並生成一個新的陣列，可以使用 map。
如果需要較大的控制流程、對物件進行遍歷或需要更高的彈性，可以使用 for 迴圈。

總體而言，for 迴圈在彈性和控制流程方面較強，而 forEach 和 map 在陣列遍歷和生成新陣列方面更簡潔方便。選擇適當的方法取決於需求和優先考量，以及個人或團隊的程式風格。

補充說明

遍歷效能：

在大多數情況下，使用 map 的效能比 forEach 和 for 迴圈稍差，因為它需要創建新的陣列。

如果只需要遍歷陣列而不需要返回新的陣列，則使用 forEach 或 for 迴圈可以更有效率。

匿名函式和回呼函式：

forEach 和 map 接受一個回呼函式作為參數，而 for 迴圈可以使用匿名函式或具名函式。

在使用 forEach 和 map 時，可以使用匿名函式或箭頭函式來定義回呼函式，使程式碼更簡潔。

可迭代對象：

forEach 和 map 只能用於迭代陣列，無法直接用於其他可迭代對象（如字串、Set()、Map()等）。如果需要遍歷其他可迭代對象，可以將其轉換為陣列後再使用 forEach 或 map。

停止迴圈：

forEach 和 map 無法中途停止迴圈，但在特定情況下，可以使用 return 或 throw 來達到類似的效果。

在 for 迴圈中，可以使用 break 來立即停止迴圈的執行。

綜合考慮以上因素，根據具體的情況和需求，選擇最適合的迴圈方法是重要的。

後記 - Epilogue

在 JavaScript 中，for 迴圈、forEach 和 map是常用的迴圈方法，各自有不同的特點、優勢和適用場景。在選擇迴圈方法時，需根據具體需求、程式碼效能和可讀性做權衡。重要的是理解它們的差異並選擇最適合的迴圈方法。無論使用哪種方法，適當地運用迴圈可以提升程式開發的效率和品質。