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 scores = [85, 92, 45, 78, 90, 60];// 过滤出及格分数(>=60)const passingScores = scores.filter(score => score >= 60);console.log(passingScores); // [85, 92, 78, 90, 60]// 过滤出偶数const evenNumbers = numbers.filter(num => num % 2 === 0);console.log(evenNumbers); // [2, 4]

与map一样，filter也不会修改原数组。

3. reduce方法

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

const prices = [12.5, 8.99, 5.49, 21.0];// 计算总和const total = prices.reduce((sum, price) => sum + price, 0);console.log(total); // 47.98// 查找最大值const max = prices.reduce((max, price) => price > max ? price : max, prices[0]);console.log(max); // 21.0

reduce方法接受两个参数：

一个reducer函数（包含累加器和当前值）初始值（可选）

组合使用示例

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

const products = [  { name: 'Laptop', price: 999, inStock: true },  { name: 'Phone', price: 699, inStock: false },  { name: 'Tablet', price: 499, inStock: true },  { name: 'Monitor', price: 299, inStock: true }];// 获取有库存的产品名称列表，并计算总价格const availableProducts = products  .filter(product => product.inStock)  .map(product => product.name);console.log(availableProducts); // ["Laptop", "Tablet", "Monitor"]const totalAvailablePrice = products  .filter(product => product.inStock)  .reduce((sum, product) => sum + product.price, 0);console.log(totalAvailablePrice); // 1797

为什么使用这些方法？

可读性：代码更易于理解和维护不可变性：不会改变原始数组，避免副作用链式调用：可以方便地组合多个操作函数式编程：符合函数式编程思想，便于测试和复用

掌握这些数组方法是成为高效JavaScript开发者的重要一步。它们可以大大简化数据处理的代码，使你的程序更加清晰和易于维护。