JavaScript中的数组方法：map、filter和reduce详解

JavaScript数组提供了许多强大的方法，其中map、filter和reduce是最常用的三个高阶函数。这些方法可以极大地简化对数组的操作，使代码更加简洁和可读。

1. map方法

map() 方法创建一个新数组，其结果是该数组中的每个元素调用一个提供的函数后的返回值。

const numbers = [1, 2, 3, 4];const doubled = numbers.map(num => num * 2);console.log(doubled); // [2, 4, 6, 8]

map方法不会改变原数组，而是返回一个新数组。它常用于数据转换场景：

const users = [  { id: 1, name: 'Alice' },  { id: 2, name: 'Bob' },  { id: 3, name: 'Charlie' }];const userNames = users.map(user => user.name);console.log(userNames); // ['Alice', 'Bob', 'Charlie']

2. filter方法

filter() 方法创建一个新数组，其中包含通过所提供函数测试的所有元素。

const numbers = [1, 2, 3, 4, 5];const evens = numbers.filter(num => num % 2 === 0);console.log(evens); // [2, 4]

filter同样不改变原数组，而是返回一个新数组。它可以用于筛选符合特定条件的元素：

const products = [  { name: 'Laptop', price: 1000 },  { name: 'Mouse', price: 25 },  { name: 'Keyboard', price: 50 },  { name: 'Monitor', price: 300 }];const affordable = products.filter(product => product.price < 100);console.log(affordable);// [{ name: 'Mouse', price: 25 }, { name: 'Keyboard', price: 50 }]

3. reduce方法

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数，将其结果汇总为单个返回值。

const numbers = [1, 2, 3, 4];const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);console.log(sum); // 10

reduce方法接收两个参数：

一个reducer函数（accumulator, currentValue, currentIndex, array）初始值（可选）

更复杂的例子：

const orders = [  { id: 1, amount: 100 },  { id: 2, amount: 200 },  { id: 3, amount: 300 }];const totalAmount = orders.reduce((sum, order) => sum + order.amount, 0);console.log(totalAmount); // 600

组合使用

这三个方法可以组合使用，实现复杂的数据处理：

const products = [  { name: 'Laptop', price: 1000, category: 'electronics' },  { name: 'Shirt', price: 30, category: 'clothing' },  { name: 'Phone', price: 800, category: 'electronics' },  { name: 'Pants', price: 50, category: 'clothing' }];// 获取电子类产品，提取价格，然后计算总价const totalElectronicsPrice = products  .filter(product => product.category === 'electronics')  .map(product => product.price)  .reduce((sum, price) => sum + price, 0);console.log(totalElectronicsPrice); // 1800

总结

map()：转换数组中的每个元素，返回新数组filter()：筛选数组元素，返回符合条件的新数组reduce()：将数组元素汇总为单个值

这三个方法都是纯函数，不会改变原数组，而是返回新值或新数组。它们使代码更具声明性，减少了临时变量和循环的使用，是现代JavaScript开发中的重要工具。