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

JavaScript数组提供了许多强大的高阶方法，其中最常用的三个是map、filter和reduce。这些方法可以让我们以声明式的方式处理数组数据，而不必使用传统的for循环。

1. Array.map()方法

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

基本语法

const newArray = arr.map(function callback(currentValue[, index[, array]]) {    // 返回新数组的元素}[, thisArg])

示例

const numbers = [1, 2, 3, 4];const doubled = numbers.map(num => num * 2);console.log(doubled); // [2, 4, 6, 8]const users = [    { name: 'Alice', age: 25 },    { name: 'Bob', age: 30 },    { name: 'Charlie', age: 35 }];const names = users.map(user => user.name);console.log(names); // ['Alice', 'Bob', 'Charlie']

2. Array.filter()方法

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

基本语法

const newArray = arr.filter(function callback(currentValue[, index[, array]]) {    // 返回true或false}[, thisArg])

示例

const numbers = [1, 2, 3, 4, 5, 6];const evens = numbers.filter(num => num % 2 === 0);console.log(evens); // [2, 4, 6]const adults = users.filter(user => user.age >= 30);console.log(adults); // [{ name: 'Bob', age: 30 }, { name: 'Charlie', age: 35 }]

3. Array.reduce()方法

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

基本语法

const result = arr.reduce(function callback(accumulator, currentValue[, index[, array]]) {    // 返回累积值}[, initialValue])

示例

const numbers = [1, 2, 3, 4];const sum = numbers.reduce((acc, curr) => acc + curr, 0);console.log(sum); // 10const totalAge = users.reduce((acc, user) => acc + user.age, 0);console.log(totalAge); // 90// 更复杂的例子：统计字符出现次数const letters = ['a', 'b', 'a', 'c', 'b', 'a'];const count = letters.reduce((acc, letter) => {    acc[letter] = (acc[letter] || 0) + 1;    return acc;}, {});console.log(count); // { a: 3, b: 2, c: 1 }

组合使用示例

这些方法可以很好地组合使用，实现复杂的数据转换：

const products = [    { name: 'iPhone', price: 999, category: 'electronics' },    { name: 'MacBook', price: 1999, category: 'electronics' },    { name: 'T-shirt', price: 20, category: 'clothing' },    { name: 'Jeans', price: 50, category: 'clothing' }];// 获取所有电子产品的名称，并转换为大写const electronicNames = products    .filter(product => product.category === 'electronics')    .map(product => product.name.toUpperCase());console.log(electronicNames); // ['IPHONE', 'MACBOOK']// 计算服装类商品的总价格const clothingTotal = products    .filter(product => product.category === 'clothing')    .reduce((sum, product) => sum + product.price, 0);console.log(clothingTotal); // 70

性能考虑

虽然这些方法提供了简洁的语法，但在处理大型数组时需要注意：

每个方法都会遍历整个数组链式调用多个方法会导致多次遍历对于性能敏感的场景，可以考虑使用for循环合并操作

这些数组方法极大地提高了JavaScript处理集合数据的表达能力，是现代JavaScript开发中不可或缺的工具。