了解 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中文网其他相关文章！