JavaScript 的高阶函数map()，让数组更强大

2024-01-26 18:42:23

什么是JavaScript中的map()？

map()方法是JavaScript数组的内置方法，它接受一个回调函数作为参数，并将其应用于数组中的每个元素，从而创建并返回一个新数组，而不会改变原数组。map()是JavaScript函数式编程的典型代表，旨在简化数组元素的处理和转换，使代码更简洁、更具可读性。

map()的语法格式

const newArray = arr.map(callback(currentValue, index, array))

arr ：要进行映射的数组
callback ：要应用于数组每个元素的函数，接收三个参数：
- currentValue ：当前正在处理的数组元素
- index ：当前数组元素的索引
- array ：调用map()方法的原数组
newArray ：map()返回的新数组，其中包含经过回调函数处理后的新元素

map()的强大之处

map()的强大之处在于，它可以对数组中的每个元素进行统一的操作，而无需使用传统的for循环或forEach()方法。此外，map()返回的是一个新数组，不会修改原数组，这使得它非常适合用于不破坏原数组的数据转换或修改操作。

map()的常见用法

数组元素格式化

使用map()可以轻松地对数组中的每个元素进行格式化，例如，将数组中的字符串全部转换为大写或小写，或者将数组中的数字转换为货币格式。

const fruits = ["apple", "banana", "orange"];

const upperFruits = fruits.map((fruit) => fruit.toUpperCase());

console.log(upperFruits); // ["APPLE", "BANANA", "ORANGE"]

数组元素提取

map()还可以用于从数组对象中提取特定字段的值，从而形成一个新数组，该新数组仅包含所选字段的数据。

const users = [
  { name: "John", age: 25 },
  { name: "Mary", age: 30 },
  { name: "Bob", age: 35 },
];

const names = users.map((user) => user.name);

console.log(names); // ["John", "Mary", "Bob"]

数组元素过滤

map()还可以与其他数组方法结合使用，例如filter()方法，来对数组元素进行过滤和转换。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter((num) => num % 2 === 0).map((num) => num * 2);

console.log(evenNumbers); // [2, 4, 6, 8, 10]