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 => 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也不会改变原始数组。回调函数应返回一个布尔值，true表示该元素会被保留。

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的回调函数接收四个参数：累加器、当前值、当前索引和原数组。第二个参数是初始值（可选）。

4. 方法链式调用

这些方法可以链式调用，实现复杂的数据转换：

const products = [  { name: 'iPhone', price: 999, category: 'electronics' },  { name: 'MacBook', price: 1299, category: 'electronics' },  { name: 'T-Shirt', price: 20, category: 'clothing' },  { name: 'Jeans', price: 50, category: 'clothing' }];// 获取所有电子产品，提取价格，然后计算平均价格const avgElectronicsPrice = products  .filter(product => product.category === 'electronics')  .map(product => product.price)  .reduce((sum, price, index, array) => {    sum += price;    if (index === array.length - 1) {      return sum / array.length;    }    return sum;  }, 0);console.log(avgElectronicsPrice); // 1149

5. 实际应用场景

这些方法在实际开发中非常有用：

数据转换：将API返回的数据转换为UI需要的格式数据过滤：根据用户输入筛选列表项数据聚合：计算总和、平均值或其他统计信息

掌握map、filter和reduce这三个方法，能够显著提高处理数组数据的效率和代码可读性。