理解 JavaScript 陣列 map() 方法

map()簡介

map() 方法建立一個新數組，其中填充了對呼叫數組中每個元素呼叫所提供函數的結果。它是一種函數式程式設計技術，可讓您將陣列的每個元素轉換為新元素，從而產生新陣列而不修改原始陣列。

---

文法

或者，使用箭頭函數：

---

參數

• callback：產生新陣列元素的函數，採用三個參數：
  • currentValue：目前正在處理的元素。
  • index （可選）：目前元素的索引。
  • 陣列 （可選）：呼叫了陣列映射。
• thisArg （可選）：執行回呼時用作 this 的值。

---

傳回值

一個新數組，每個元素都是回調函數的結果。

---

map() 的工作原理

• 不變性：map() 不會修改原始陣列。
• 逐元素轉換：將回呼函數應用於每個元素。
• 傳回一個新數組：將結果收集到一個新數組。

---

範例

a.映射數字

範例：將陣列中的每個數字乘以 2。

b.變換字串

範例：將字串陣列轉換為大寫。

c.擷取物件屬性

範例：從物件陣列中提取特定屬性。

d.映射物件陣列

範例：轉換陣列中的每個物件。

---

map() 和 forEach() 之間的差異

• 地圖()：
  • 傳回一個新數組。
  • 當您想要轉換每個元素並收集結果時使用。
• forEach()：
  • 傳回未定義。
  • 當您想要執行副作用（例如，記錄日誌、修改外部變數）且不需要新陣列時使用。

forEach() 範例:

---

將 map() 與箭頭函數結合使用

箭頭函數提供了編寫回呼函數的簡潔語法。

範例：

---

TypeScript 中的 map()

TypeScript 為 JavaScript 新增了靜態類型，這有助於在編譯時捕獲錯誤。

a.輸入註解

您可以指定數組中元素的類型和傳回類型。

範例：

b.通用型

您可以定義通用函數來處理任何類型。

範例：

---

常見用例

• 轉換資料：將資料從一種形式轉換為另一種形式。
• 提取值：從物件中提取特定欄位。
• 組合資料：根據現有資料建立新數組。
• 計算：對每個元素執行計算。

---

進階主題

a.將 map() 與其他陣列方法連結

你可以將map()與其他陣列方法連結起來，如filter()、reduce()等

範例：

b.處理非同步操作

map() 不處理回呼內的非同步運算。如果需要執行非同步操作，請考慮使用 Promise.all() 和 map()。

範例：

---

最佳實踐

• 不要使用 map() 產生副作用：如果不需要新數組，請使用 forEach()。
• 避免修改原始陣列：map() 不應改變原始陣列或其元素。
• 傳回值：確保你的回呼函數傳回一個值；否則，新陣列將包含未定義的元素。
• 使用箭頭函數來保持簡潔：它們使您的程式碼更短且更具可讀性。

---

結論

理解 map() 函數對於 JavaScript 和 TypeScript 中的有效陣列操作至關重要。這是一種多功能方法，可讓您乾淨且有效率地轉換資料。記住map():

• 建立一個新數組。
• 對每個元素套用一個函數。
• 不修改原始陣列。

透過掌握map()，您將編寫更簡潔、更實用的程式碼，從而獲得更好的可維護性和可讀性。

感謝您的閱讀。如果你喜歡這個內容，請隨時請我喝杯咖啡：
https://buymeacoffee.com/kellyblaire

以上是理解 JavaScript 陣列 map() 方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！