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

JavaScript数组提供了许多强大的方法，其中最常用的三个方法是map、filter和reduce。这些方法让数据处理变得更加简洁和高效，是函数式编程在JavaScript中的重要体现。

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]

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

reduce方法接受两个参数：

回调函数（包含accumulator, currentValue, currentIndex, array四个参数）初始值（可选）

组合使用示例

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

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 avgElectronicsPrice = products  .filter(product => product.category === 'electronics')  .map(product => product.price)  .reduce((acc, price, index, array) => {    acc += price;    if (index === array.length - 1) {      return acc / array.length;    } else {      return acc;    }  }, 0);console.log(avgElectronicsPrice); // 900

总结

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

这三个方法都是纯函数，不会改变原数组，符合函数式编程的原则。掌握它们可以让你写出更简洁、更易读的JavaScript代码。