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

JavaScript数组提供了许多强大的方法，其中最常用的三个高阶函数是map、filter和reduce。这些方法可以帮助我们以声明式的方式处理数组数据，使代码更简洁、更易读。

1. map方法

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

const numbers = [1, 2, 3, 4, 5];// 将每个数字乘以2const doubled = numbers.map(num => num * 2);console.log(doubled); // [2, 4, 6, 8, 10]// 将数字转换为字符串const stringNumbers = numbers.map(num => `Number: ${num}`);console.log(stringNumbers); // ["Number: 1", "Number: 2", "Number: 3", "Number: 4", "Number: 5"]

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

2. filter方法

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

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];// 筛选出偶数const evens = numbers.filter(num => num % 2 === 0);console.log(evens); // [2, 4, 6, 8, 10]const users = [  { name: 'Alice', age: 25 },  { name: 'Bob', age: 17 },  { name: 'Charlie', age: 30 },  { name: 'David', age: 15 }];// 筛选出成年用户const adults = users.filter(user => user.age >= 18);console.log(adults); // [{ name: 'Alice', age: 25 }, { name: 'Charlie', age: 30 }]

与map类似，filter也不会改变原数组，而是返回一个新数组。

3. reduce方法

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

const numbers = [1, 2, 3, 4, 5];// 计算总和const sum = numbers.reduce((accumulator, currentValue) => {  return accumulator + currentValue;}, 0);console.log(sum); // 15// 计算乘积const product = numbers.reduce((acc, curr) => acc * curr, 1);console.log(product); // 120// 找出最大值const max = numbers.reduce((acc, curr) => Math.max(acc, curr), -Infinity);console.log(max); // 5

reduce方法的第一个参数是回调函数，第二个参数是初始值（可选）。回调函数接收四个参数：

累加器（accumulator）当前值（currentValue）当前索引（currentIndex）原数组（array）

4. 方法链式调用

这些方法可以链式调用，创建非常强大且简洁的数据处理管道。

const transactions = [  { id: 1, amount: 100, currency: 'USD', status: 'completed' },  { id: 2, amount: 200, currency: 'EUR', status: 'pending' },  { id: 3, amount: 300, currency: 'USD', status: 'completed' },  { id: 4, amount: 400, currency: 'GBP', status: 'failed' },  { id: 5, amount: 500, currency: 'USD', status: 'completed' }];// 计算所有已完成USD交易的总金额const totalCompletedUSD = transactions  .filter(tx => tx.status === 'completed' && tx.currency === 'USD')  .map(tx => tx.amount)  .reduce((sum, amount) => sum + amount, 0);console.log(totalCompletedUSD); // 900 (100 + 300 + 500)

总结

map：用于转换数组中的每个元素filter：用于筛选数组中的元素reduce：用于将数组元素汇总为单个值

这些方法极大地提升了JavaScript处理数组的能力，使代码更简洁、更易维护。它们都是函数式编程风格的体现，避免了显式的循环和临时变量，减少了副作用。