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]

和map()一样，filter()也不会改变原数组，而是返回一个新的数组。

3. reduce方法

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

const numbers = [1, 2, 3, 4, 5];// 计算数组元素的总和const sum = numbers.reduce((accumulator, currentValue) => 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 products = [  { name: 'iPhone', price: 999, inStock: true },  { name: 'MacBook', price: 1299, inStock: false },  { name: 'iPad', price: 799, inStock: true },  { name: 'Apple Watch', price: 399, inStock: true },  { name: 'AirPods', price: 159, inStock: false }];// 获取所有有库存的商品名称，并转换为大写const availableProducts = products  .filter(product => product.inStock)  .map(product => product.name.toUpperCase());console.log(availableProducts); // ['IPHONE', 'IPAD', 'APPLE WATCH']

5. 实际应用示例

// 计算购物车总金额（只计算有库存的商品）const cart = [  { id: 1, name: 'T-shirt', price: 20, quantity: 2, inStock: true },  { id: 2, name: 'Jeans', price: 50, quantity: 1, inStock: true },  { id: 3, name: 'Shoes', price: 80, quantity: 1, inStock: false },  { id: 4, name: 'Hat', price: 15, quantity: 3, inStock: true }];const total = cart  .filter(item => item.inStock)  .map(item => item.price * item.quantity)  .reduce((sum, itemTotal) => sum + itemTotal, 0);console.log(total); // 20*2 + 50*1 + 15*3 = 40 + 50 + 45 = 135

掌握这些数组方法可以显著提高代码的可读性和简洁性，它们是现代JavaScript开发中不可或缺的工具。