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

JavaScript数组提供了许多强大的方法，其中map、filter和reduce是最常用的高阶函数。它们都接收一个回调函数作为参数，可以帮助我们以声明式的方式处理数组数据，而不需要手动使用for循环。

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 => num.toString());console.log(stringNumbers); // ["1", "2", "3", "4", "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]// 筛选大于5的数字const greaterThanFive = numbers.filter(num => num > 5);console.log(greaterThanFive); // [6, 7, 8, 9, 10]

filter方法的回调函数应返回一个布尔值，true表示保留该元素，false表示不保留。

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 max = numbers.reduce((acc, curr) => {  return Math.max(acc, curr);}, -Infinity);console.log(max); // 5

reduce方法接收两个参数：

reducer函数（包含accumulator和currentValue）initialValue（可选，作为第一次调用回调函数时的第一个参数值）

组合使用示例

这些方法可以组合使用，形成强大的数据处理管道：

const products = [  { name: 'Apple', price: 1.5, category: 'fruit' },  { name: 'Banana', price: 0.5, category: 'fruit' },  { name: 'Carrot', price: 0.8, category: 'vegetable' },  { name: 'Milk', price: 2.5, category: 'dairy' }];// 获取所有水果的总价格const totalFruitPrice = products  .filter(product => product.category === 'fruit')  .map(fruit => fruit.price)  .reduce((sum, price) => sum + price, 0);console.log(totalFruitPrice); // 2 (1.5 + 0.5)

这三个方法都遵循函数式编程的原则，使代码更加简洁、可读和可维护。它们已成为现代JavaScript开发中不可或缺的工具。