JavaScript数组常用方法：map、filter与reduce实战详解

Noah

发布时间：2026-10-21 | 2人浏览过

原创

在处理前端数据时，数组操作是最频繁的任务之一。传统的 for 循环虽然直观，但往往伴随着大量的样板代码和可变状态管理。JavaScript 提供的高阶数组方法，如 map、filter 和 reduce，不仅能让代码更加声明式，还能显著降低出错概率。理解这三个核心方法的适用场景，是写出优雅 JavaScript 代码的关键一步。

JavaScript数组常用方法：map、filter与reduce实战详解

JavaScript数组高阶函数概念示意图

关于 map 方法

map 方法用于创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。它最核心的特征是“一对一”的映射关系：原数组有多少个元素，新数组就有多少个元素。

使用 map 时，回调函数接收当前元素、索引和原数组作为参数。最常见的场景是将对象数组转换为特定格式的字符串或提取某个属性值。例如，从用户列表中提取所有用户名。

const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 }
];

// 提取所有用户名
const names = users.map(user => user.name);
console.log(names); // ['Alice', 'Bob', 'Charlie']

需要注意的是，map 不会改变原数组，而是返回一个新数组。如果回调函数中没有 return 语句，新数组的元素将是 undefined。此外，map 适合用于纯转换操作，不适合用于过滤数据或累积计算。

JavaScript数组常用方法：map、filter与reduce实战详解

关于 map 方法

关于 filter 方法

filter 方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。它的核心逻辑是“布尔判断”：回调函数返回 true 则保留该元素，返回 false 则丢弃。

filter 常用于数据清洗或条件筛选。例如，从一个数字数组中筛选出偶数，或者从商品列表中找出库存大于零的商品。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 筛选偶数
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6, 8, 10]

// 筛选年龄大于28的用户
const olderUsers = users.filter(user => user.age > 28);
console.log(olderUsers); 
// [{ id: 2, name: 'Bob', age: 30 }, { id: 3, name: 'Charlie', age: 35 }]

与 map 一样，filter 也不会修改原数组。在实际开发中，filter 经常与 map 链式调用，先筛选出符合条件的数据子集，再对子集进行格式转换。这种组合方式比在单个循环中同时做判断和转换要清晰得多。

JavaScript数组常用方法：map、filter与reduce实战详解

filter方法筛选数据流程图解

关于 reduce 方法

reduce 方法对数组中的每个元素执行一个由您提供的 reducer 函数，将其结果汇总为单个返回值。它是三者中最灵活也最复杂的方法，核心在于“累积”。

reducer 函数接收四个参数：累积器（accumulator）、当前值（currentValue）、当前索引（currentIndex）和源数组（sourceArray）。通常我们只使用前两个参数。reduce 还可以接受第二个参数作为累积器的初始值。

最常见的用例是求和或计算乘积。

const prices = [10, 20, 30, 40];

// 计算总价，初始值为0
const total = prices.reduce((acc, current) => acc + current, 0);
console.log(total); // 100

除了数值计算，reduce 还能用于将数组转换为对象，或者进行更复杂的数据扁平化处理。例如，统计数组中每个元素出现的次数。

const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];

const count = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});

console.log(count); // { apple: 3, banana: 2, orange: 1 }

使用 reduce 时，务必注意初始值的设置。如果未提供初始值，reduce 会将数组的第一个元素作为初始累积器，并从第二个元素开始遍历。这在空数组上会抛出错误，因此在不确定数组是否为空时，建议始终提供初始值。

JavaScript数组常用方法：map、filter与reduce实战详解

reduce方法累积计算示意

综合实战：链式调用

在实际业务中，这三个方法往往不是孤立使用的。通过链式调用，可以构建出清晰的数据处理管道。例如，从一个订单列表中，找出已支付的订单，提取商品单价，并计算总金额。

const orders = [
  { id: 1, status: 'paid', amount: 100 },
  { id: 2, status: 'pending', amount: 200 },
  { id: 3, status: 'paid', amount: 150 },
  { id: 4, status: 'cancelled', amount: 50 }
];

const totalPaidAmount = orders
  .filter(order => order.status === 'paid') // 第一步：筛选已支付订单
  .map(order => order.amount)              // 第二步：提取金额
  .reduce((sum, amount) => sum + amount, 0); // 第三步：求和

console.log(totalPaidAmount); // 250

这种写法虽然创建了中间数组，但在现代 JavaScript 引擎和数据量不大的情况下，其性能损耗完全可以接受，而带来的代码可读性提升却是巨大的。每一步操作都有明确的语义，便于后续维护和调试。

JavaScript数组常用方法：map、filter与reduce实战详解