JavaScript数组常用处理方法：map、filter与reduce用法

一、map 方法：一对一的数据形态转换

map() 方法的作用是遍历当前数组，对每一个元素执行一次传入的回调函数，并将每次调用的返回值收集起来，最终组合成一个与原数组长度完全相同的新数组。

1. 语法规范与参数解析

const newArray = arr.map(function(currentValue, index, array) {
  // 返回变换后的新元素
  return transformedValue;
}, thisArg);

• currentValue：当前正在处理的数组元素（必选）。
• index：当前处理元素的索引值（可选）。
• array：调用 map 的原始数组实例（可选）。
• thisArg：执行回调函数时绑定的 this 对象（可选，若使用箭头函数则被忽略）。

2. 典型实战场景

最常见的场景是提取对象数组中的特定字段，或者对接口返回的数据结构做统一的标准化转换：

// 场景 1：提取对象属性
const users = [
  { id: 101, name: 'Alice', role: 'admin' },
  { id: 102, name: 'Bob', role: 'user' },
  { id: 103, name: 'Charlie', role: 'user' }
];
const userNames = users.map(user => user.name);
// 结果：['Alice', 'Bob', 'Charlie']

// 场景 2：数值格式化与计算
const rawPrices = [29.9, 99.0, 149.5];
const formattedPrices = rawPrices.map(price => `¥${price.toFixed(2)}`);
// 结果：['¥29.90', '¥99.00', '¥149.50']

二、filter 方法：基于断言条件的子集筛选

filter() 方法用于按指定条件对数组元素进行检验。回调函数返回一个布尔值（或可转为布尔的真假值），所有返回 true 的元素将被收集入新数组，返回 false 的元素则被丢弃。

1. 语法规范与参数解析

const filteredArray = arr.filter(function(currentValue, index, array) {
  // 返回 true 则保留该元素，返回 false 则剔除
  return booleanCondition;
}, thisArg);

2. 典型实战场景

数据过滤是前端列表展示中最常见的需求，例如多条件组合搜索、排除无效或空值元素等：

// 场景 1：多条件筛选
const inventory = [
  { name: 'Apple', stock: 12, price: 5 },
  { name: 'Banana', stock: 0, price: 3 },
  { name: 'Orange', stock: 4, price: 8 },
  { name: 'Mango', stock: 0, price: 15 }
];
// 筛选有库存且单价高于 4 的水果
const availablePremium = inventory.filter(item => item.stock > 0 && item.price > 4);
// 结果：[{ name: 'Apple', stock: 12, price: 5 }, { name: 'Orange', stock: 4, price: 8 }]

// 场景 2：快速过滤数组中的所有假值 (Falsy values)
const mixedData = [0, 'hello', '', false, 42, null, undefined, NaN];
const truthyData = mixedData.filter(Boolean);
// 结果：['hello', 42]

三、reduce 方法：折叠聚合与累加推导

如果说 map 和 filter 处理的是维度不变或缩减同质数组，那么 reduce() 则是最强大、灵活性最高的聚合器。它的核心思想是“折叠”（Fold）：接收一个累加器（Accumulator）和当前元素，通过逐项合并，最终将一个数组归约成单一结果。这个最终结果可以是一个数值、一个字符串、一个重构后的深层对象，甚至另一个新数组。

1. 语法规范与核心签名

const result = arr.reduce(function(accumulator, currentValue, currentIndex, array) {
  // 必须返回当前轮次计算后的 accumulator，供给下一轮使用
  return nextAccumulator;
}, initialValue);

• accumulator：累加器，保留了上一轮回调执行后返回的值，或者初始值 initialValue。
• currentValue：当前正在参与合并的数组元素。
• currentIndex：当前元素的索引（若提供了 initialValue 则从 0 开始；未提供则从 1 开始）。
• initialValue：累加计算的初始值（强烈建议必须提供）。

2. 典型实战场景

除了常规的数值累加，reduce 在复杂业务数据加工中更是不可或缺：

// 场景 1：基础累加求和与购物车总价
const cart = [
  { item: 'Keyboard', price: 299, count: 1 },
  { item: 'Mouse', price: 99, count: 2 },
  { item: 'Cable', price: 19, count: 3 }
];
const totalPrice = cart.reduce((sum, item) => sum + item.price * item.count, 0);
// 结果：554

// 场景 2：按分类对数据进行分组 (GroupBy 聚合)
const pets = [
  { name: 'Max', species: 'dog' },
  { name: 'Milo', species: 'cat' },
  { name: 'Bella', species: 'dog' }
];
const groupedPets = pets.reduce((acc, pet) => {
  const key = pet.species;
  if (!acc[key]) {
    acc[key] = [];
  }
  acc[key].push(pet.name);
  return acc;
}, {});
// 结果：{ dog: ['Max', 'Bella'], cat: ['Milo'] }

四、方法组合：链式调用与选型决策

因为 map 和 filter 均返回一个全新的数组，所以它们可以无缝结合实现函数式“数据管道”（Pipeline）。

1. 声明式数据管道实战

例如，我们需要处理一份电商订单数据：筛选出已付款的订单，提取商品结算价格，并计算包含税费后的最终总流水：

const orders = [
  { id: 'A1', paid: true, amount: 120 },
  { id: 'A2', paid: false, amount: 80 },
  { id: 'A3', paid: true, amount: 250 },
  { id: 'A4', paid: true, amount: 310 }
];

// 链式管道流：filter -> map -> reduce
const totalRevenue = orders
  .filter(order => order.paid)             // 1. 筛选已支付订单
  .map(order => order.amount * 1.05)       // 2. 转换为含税金额 (增值税 5%)
  .reduce((sum, amount) => sum + amount, 0); // 3. 汇总求和

// 结果：714

这种链式风格的优点在于可读性极强，每一个环节单一职责、逻辑自洽。但需要注意：每一次链式调用都会创建一个新的中间数组。当处理十万级以上的密集海量数据时，如果关注极端性能和内存开销，可以考虑将 filter 和 map 的逻辑合并到单一的 reduce 或标准 for...of 循环中一次性搞定。

2. 核心特性与决策矩阵

五、知识回顾与关键总结

为了在日常编码中快速查阅与对齐逻辑，以下表格整理了三者的关键对比项：

熟练掌握 map、filter 与 reduce 的语义化分工，不仅能消除冗长晦涩的临时循环索引变量，更能够自然地向现代函数式、纯函数编程范式过渡，让数据流动路径一目了然。