理解 JavaScript 数组 map() 方法

map()简介

map() 方法创建一个新数组，其中填充了对调用数组中每个元素调用所提供函数的结果。它是一种函数式编程技术，允许您将数组的每个元素转换为新元素，从而生成新数组而不修改原始数组。

---

语法

let newArray = array.map(function callback(currentValue, index, array) {
    // Return element for newArray
}, thisArg);

或者，使用箭头函数：

let newArray = array.map((currentValue, index, array) => {
    // Return element for newArray
});

---

参数

• callback：生成新数组元素的函数，采用三个参数：
  • currentValue：当前正在处理的元素。
  • index （可选）：当前元素的索引。
  • 数组 （可选）：调用了数组映射。
• thisArg （可选）：执行回调时用作 this 的值。

---

返回值

一个新数组，每个元素都是回调函数的结果。

---

map() 的工作原理

• 不变性：map() 不会修改原始数组。
• 逐元素转换：将回调函数应用于每个元素。
• 返回一个新数组：将结果收集到一个新数组中。

---

示例

a.映射数字

示例：将数组中的每个数字乘以 2。

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);

console.log(doubled); // Output: [2, 4, 6, 8, 10]

b.变换字符串

示例：将字符串数组转换为大写。

const fruits = ['apple', 'banana', 'cherry'];
const upperFruits = fruits.map(fruit => fruit.toUpperCase());

console.log(upperFruits); // Output: ['APPLE', 'BANANA', 'CHERRY']

c.提取对象属性

示例：从对象数组中提取特定属性。

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];
const names = users.map(user => user.name);

console.log(names); // Output: ['Alice', 'Bob']

d.映射对象数组

示例：转换数组中的每个对象。

const products = [
  { productId: 1, price: 100 },
  { productId: 2, price: 200 },
];
const discountedProducts = products.map(product => ({
  ...product,
  price: product.price * 0.9,
}));

console.log(discountedProducts);
// Output:
// [
//   { productId: 1, price: 90 },
//   { productId: 2, price: 180 },
// ]

---

map() 和 forEach() 之间的区别

• 地图()：
  • 返回一个新数组。
  • 当您想要转换每个元素并收集结果时使用。
• forEach()：
  • 返回未定义。
  • 当您想要执行副作用（例如，记录日志、修改外部变量）并且不需要新数组时使用。

forEach() 示例:

let newArray = array.map(function callback(currentValue, index, array) {
    // Return element for newArray
}, thisArg);

---

将 map() 与箭头函数结合使用

箭头函数提供了编写回调函数的简洁语法。

示例：

let newArray = array.map((currentValue, index, array) => {
    // Return element for newArray
});

---

TypeScript 中的 map()

TypeScript 为 JavaScript 添加了静态类型，这有助于在编译时捕获错误。

a.输入注释

您可以指定数组中元素的类型和返回类型。

示例：

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);

console.log(doubled); // Output: [2, 4, 6, 8, 10]

b.通用类型

您可以定义通用函数来处理任何类型。

示例：

const fruits = ['apple', 'banana', 'cherry'];
const upperFruits = fruits.map(fruit => fruit.toUpperCase());

console.log(upperFruits); // Output: ['APPLE', 'BANANA', 'CHERRY']

---

常见用例

• 转换数据：将数据从一种形式转换为另一种形式。
• 提取值：从对象中提取特定字段。
• 组合数据：根据现有数据创建新数组。
• 计算：对每个元素执行计算。

---

高级主题

a.将 map() 与其他数组方法链接

你可以将map()与其他数组方法链接起来，如filter()、reduce()等

示例：

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];
const names = users.map(user => user.name);

console.log(names); // Output: ['Alice', 'Bob']

b.处理异步操作

map() 不处理回调内的异步操作。如果需要执行异步操作，请考虑使用 Promise.all() 和 map()。

示例：

const products = [
  { productId: 1, price: 100 },
  { productId: 2, price: 200 },
];
const discountedProducts = products.map(product => ({
  ...product,
  price: product.price * 0.9,
}));

console.log(discountedProducts);
// Output:
// [
//   { productId: 1, price: 90 },
//   { productId: 2, price: 180 },
// ]

---

最佳实践

• 不要使用 map() 产生副作用：如果不需要新数组，请使用 forEach()。
• 避免修改原始数组：map() 不应改变原始数组或其元素。
• 返回值：确保你的回调函数返回一个值；否则，新数组将包含未定义的元素。
• 使用箭头函数来保持简洁：它们使您的代码更短且更具可读性。

---

结论

理解 map() 函数对于 JavaScript 和 TypeScript 中的有效数组操作至关重要。这是一种多功能方法，可让您干净高效地转换数据。记住map():

• 创建一个新数组。
• 对每个元素应用一个函数。
• 不修改原始数组。

通过掌握map()，您将编写更简洁、更实用的代码，从而获得更好的可维护性和可读性。

感谢您的阅读。如果你喜欢这个内容，请随时请我喝杯咖啡：
https://buymeacoffee.com/kellyblaire

以上是理解 JavaScript 数组 map() 方法的详细内容。更多信息请关注PHP中文网其他相关文章！