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

JavaScript数组提供了多种强大的方法来处理和转换数据。其中最常用的三个高阶函数方法是map、filter和reduce。这些方法可以让开发者用更声明式的方式处理数组，而不是依赖传统的for循环。

1. map方法

map()方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后的返回值。

const numbers = [1, 2, 3, 4];const doubled = numbers.map(num => num * 2);console.log(doubled); // [2, 4, 6, 8]

map不会改变原数组，而是返回一个新数组。它常用于将一种数据类型转换为另一种：

const users = [  { id: 1, name: 'Alice' },  { id: 2, name: 'Bob' },  { id: 3, name: 'Charlie' }];const userIds = users.map(user => user.id);console.log(userIds); // [1, 2, 3]

2. filter方法

filter()方法创建一个新数组，其中包含通过所提供函数测试的所有元素。

const numbers = [1, 2, 3, 4, 5];const evens = numbers.filter(num => num % 2 === 0);console.log(evens); // [2, 4]

filter同样不改变原数组。它可以用于从数组中移除不符合条件的元素：

const products = [  { id: 1, name: 'Laptop', inStock: true },  { id: 2, name: 'Phone', inStock: false },  { id: 3, name: 'Tablet', inStock: true }];const availableProducts = products.filter(product => product.inStock);console.log(availableProducts);// [{ id: 1, name: 'Laptop', inStock: true }, { id: 3, name: 'Tablet', inStock: true }]

3. reduce方法

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

const numbers = [1, 2, 3, 4];const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);console.log(sum); // 10

reduce可以用于各种聚合操作，比如计算平均值、找出最大值或将数组转换为对象：

const votes = ['yes', 'no', 'yes', 'yes', 'no'];const tally = votes.reduce((acc, vote) => {  acc[vote] = (acc[vote] || 0) + 1;  return acc;}, {});console.log(tally); // { yes: 3, no: 2 }

组合使用

这些方法可以很好地组合使用，创建更复杂的数据处理管道：

const orders = [  { id: 1, amount: 100, status: 'completed' },  { id: 2, amount: 200, status: 'pending' },  { id: 3, amount: 300, status: 'completed' },  { id: 4, amount: 400, status: 'cancelled' },  { id: 5, amount: 500, status: 'completed' }];const totalCompletedOrders = orders  .filter(order => order.status === 'completed')  .map(order => order.amount)  .reduce((sum, amount) => sum + amount, 0);console.log(totalCompletedOrders); // 900

总结

map: 转换数组中的每个元素，返回新数组filter: 筛选满足条件的元素，返回新数组reduce: 将数组元素"缩减"为单个值

这些方法使JavaScript中的数据转换更加简洁和可读，是现代JavaScript开发中的重要工具。