了解 JavaScript 陣列的 map() 方法：簡單指南

map() 方法透過將提供的函數 (callbackFn) 應用於原始陣列的每個元素來建立一個 新陣列。它非常適合在不修改原始數組的情況下轉換資料。

---

文法

array.map(callbackFn, thisArg)

• callbackFn：在每個陣列元素上運行的函數，具有以下參數：
  • element: 當前元素。
  • 索引：目前索引。
  • array: 正在遍歷的陣列。
• thisArg（可選）：在回呼函數中用作 this 的值。

---

主要特點

1. 傳回一個新數組：原始數組保持不變。
2. 跳過空槽：稀疏數組中未分配的元素不會呼叫回調。
3. 通用用法：適用於類似陣列的物件（例如 NodeLists）。

---

範例

1. 基本範例：轉換數字

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));
console.log(roots); // [1, 2, 3]

2. 重新格式化對象

const kvArray = [
  { key: 1, value: 10 },
  { key: 2, value: 20 },
];
const reformatted = kvArray.map(({ key, value }) => ({ [key]: value }));
console.log(reformatted); // [{ 1: 10 }, { 2: 20 }]

3.將parseInt與map一起使用

// Common mistake:
console.log(["1", "2", "3"].map(parseInt)); // [1, NaN, NaN]

// Correct approach:
console.log(["1", "2", "3"].map((str) => parseInt(str, 10))); // [1, 2, 3]

// Alternative:
console.log(["1", "2", "3"].map(Number)); // [1, 2, 3]

4. 避免未定義的結果

從回呼不傳回任何內容會導致新數組中未定義：

const numbers = [1, 2, 3, 4];
const result = numbers.map((num, index) => (index < 3 ? num : undefined));
console.log(result); // [1, 2, 3, undefined]

使用filter()或flatMap()刪除不需要的元素。

5. 副作用（反模式）

避免使用 map() 進行有副作用的操作，例如更新變數：

const cart = [5, 15, 25];
let total = 0;

// Avoid this:
const withTax = cart.map((cost) => {
  total += cost;
  return cost * 1.2;
});

// Instead, use separate methods:
const total = cart.reduce((sum, cost) => sum + cost, 0);
const withTax = cart.map((cost) => cost * 1.2);

6. 存取其他陣列元素

第三個參數（陣列）允許在轉換期間存取鄰居：

const numbers = [3, -1, 1, 4];
const averaged = numbers.map((num, idx, arr) => {
  const prev = arr[idx - 1] || 0;
  const next = arr[idx + 1] || 0;
  return (prev + num + next) / 3;
});
console.log(averaged);

---

常見用例

1. 轉換資料：對每個元素套用函數。
2. 重新格式化物件：更改資料結構。
3. Map NodeLists：將 NodeList 等 DOM 元素轉換為陣列：

   const elems = document.querySelectorAll("option:checked");
   const values = Array.from(elems).map(({ value }) => value);

---

何時避免使用map()

• 不需要傳回值：使用 forEach() 或 for...of 來取代。
• 改變資料：建立新物件而不是改變原始物件：

   const products = [{ name: "phone" }];
   const updated = products.map((p) => ({ ...p, price: 100 }));

---

最後的提示

• 僅限純函數：確保回呼沒有副作用。
• 理解參數：知道map()將元素、索引和陣列傳遞給回調。
• 避免稀疏數組：空槽將保持為空。

在高效率轉換陣列時使用 map() 來簡化程式碼！

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