JavaScript高阶函数实战：map、filter和reduce使用示例

高阶函数（Higher-Order Function）是指能够接受函数作为参数，或者把函数作为返回值输出的函数。在日常的JavaScript数组处理中，map、filter和reduce是最核心、使用频次最高的三大原生高阶函数。掌握它们不仅能摆脱繁冗易错的命令式循环，还能让数据转换流程清晰自洽。

一、高阶函数处理模型与三者核心职责

在传统的数组遍历中，我们通常使用 for 或 while 循环，不仅需要手动维护索引游标，还常常产生变量突变。而数组的高阶函数采用声明式思路：开发者定义“针对每个元素做什么”，底层引擎自动处理遍历机制，并返回处理后的全新结果，不修改原数组。

图1：map、filter、reduce 输入形态与输出职责对比

从输入与输出的关系上可以清晰区分：

• map（映射）：输入数组长度与输出数组长度严格一致，关注的是“形态变换”；
• filter（过滤）：输出数组长度小于等于原数组长度，关注的是“条件取舍”；
• reduce（归纳）：将整个数组聚合成一个最终实体（可以是数值、字符串、对象或新结构），关注的是“累积与折叠”。

二、map 映射转换：一对一的数据结构重塑

map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的回调函数后的返回值组成。

1. 语法签名

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

图2：map() 回调函数对输入槽位进行映射并填充至新数组

2. 实战示例：提取与格式化服务端返回的原始列表

前端从后端接口获取用户列表时，往往需要清洗数据，转换为前端视图组件所需的结构：

// 模拟接口返回的原始数据
const apiUsers = [
  { id: 101, firstName: "三", lastName: "张", score: 86 },
  { id: 102, firstName: "四", lastName: "李", score: 92 },
  { id: 103, firstName: "五", lastName: "王", score: 78 }
];

// 需求：格式化全名，并生成状态字段
const userViewModels = apiUsers.map(user => {
  return {
    userId: `USR-${user.id}`,
    fullName: `${user.lastName}${user.firstName}`,
    passed: user.score >= 80
  };
});

console.log(userViewModels);
// 示例输出:
// [
//   { userId: 'USR-101', fullName: '张三', passed: true },
//   { userId: 'USR-102', fullName: '李四', passed: true },
//   { userId: 'USR-103', fullName: '王五', passed: false }
// ]

三、filter 条件筛选：精确剔除无用项

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

1. 语法签名

const filteredArray = arr.filter(function predicate(element, index, array) {
  // 返回布尔值：true 保留，false 丢弃
}, thisArg);

图3：filter() 依据断言函数（Predicate）的布尔判断保留或丢弃元素

2. 实战示例：商超商品的库存与上架过滤

在电商系统中，常常需要快速筛选出“在售且有库存”的有效商品：

const inventory = [
  { sku: "A1", name: "无线鼠标", inStock: true, count: 12 },
  { sku: "A2", name: "机械键盘", inStock: false, count: 0 },
  { sku: "A3", name: "4K显示器", inStock: true, count: 0 }, // 状态为true但库存为0异常
  { sku: "A4", name: "降噪耳机", inStock: true, count: 5 }
];

// 筛选规则：必须在售，并且库存数量大于0
const availableProducts = inventory.filter(item => item.inStock && item.count > 0);

console.log(availableProducts);
// 示例输出:
// [
//   { sku: 'A1', name: '无线鼠标', inStock: true, count: 12 },
//   { sku: 'A4', name: '降噪耳机', inStock: true, count: 5 }
// ]

四、reduce 聚合折叠：多维度的终极收敛

reduce() 是数组中最强大的高阶函数。它对数组中的每个元素按序执行由你提供的“reducer”回调函数，每一次运行都将上一次运行的结果作为参数传入，最后将其结果汇总为单个返回值。

1. 语法签名与关键参数

const result = arr.reduce(function callback(accumulator, currentValue, currentIndex, array) {
  // 返回计算后的下一轮 accumulator
}, initialValue);

四个核心参数说明：

• accumulator（累加器）：上一次回调返回的值，或者提供的 initialValue。
• currentValue（当前值）：当前正在处理的数组元素。
• currentIndex（当前索引）：若指定了 initialValue，则索引从 0 开始；若未指定，从 1 开始。
• initialValue（初始值）：首次调用回调时作为第一个参数的值。强烈建议显式提供，否则数组为空时会直接抛出 TypeError: Reduce of empty array with no initial value。

2. 实战示例 1：购物车总金额计算（单值汇总）

const cart = [
  { item: "咖啡机", price: 399, qty: 1 },
  { item: "咖啡豆", price: 88, qty: 3 },
  { item: "滤纸", price: 15, qty: 2 }
];

const totalPrice = cart.reduce((total, prod) => {
  return total + (prod.price * prod.qty);
}, 0); // 初始值传入 0

console.log(totalPrice); // 示例输出: 693

3. 实战示例 2：按分类对数据进行字典聚合（数据结构重构）

reduce 的累加器不仅可以是数字，还可以是对象、Map 或数组：

const tasks = [
  { id: 1, title: "需求评审", status: "done" },
  { id: 2, title: "接口联调", status: "pending" },
  { id: 3, title: "自动化测试", status: "pending" },
  { id: 4, title: "上线部署", status: "todo" }
];

const tasksByStatus = tasks.reduce((acc, task) => {
  const { status } = task;
  // 如果分类键不存在，先初始化空数组
  if (!acc[status]) {
    acc[status] = [];
  }
  acc[status].push(task);
  return acc;
}, {});

console.log(tasksByStatus);
// 示例输出:
// {
//   done: [ { id: 1, title: '需求评审', status: 'done' } ],
//   pending: [
//     { id: 2, title: '接口联调', status: 'pending' },
//     { id: 3, title: '自动化测试', status: 'pending' }
//   ],
//   todo: [ { id: 4, title: '上线部署', status: 'todo' } ]
// }

五、实战组合拳：方法链（Chaining）流水线

在实际生产业务中，单一的高阶函数往往不足以支撑复杂需求。通过函数式管道/链式调用，可以让数据像在工厂流水线上一样依次流经各个环节。

业务场景：统计高意向客户的意向订单总额

现有销售线索数据，需求如下：

1. 筛选：排除未成单或退款的订单（状态为 "completed"）；
2. 映射：换算美元为人民币（汇率 7.2），并加入运费平摊；
3. 聚合：计算所有合格订单的最终净成交额。

const orders = [
  { id: 1001, usdAmount: 50, status: "completed" },
  { id: 1002, usdAmount: 120, status: "refunded" },
  { id: 1003, usdAmount: 200, status: "completed" },
  { id: 1004, usdAmount: 15, status: "pending" },
  { id: 1005, usdAmount: 85, status: "completed" }
];

const USD_TO_CNY = 7.2;

const totalCompletedCNY = orders
  // 步骤 1：过滤掉未完成状态
  .filter(order => order.status === "completed")
  // 步骤 2：转换汇率并计算人民币金额
  .map(order => order.usdAmount * USD_TO_CNY)
  // 步骤 3：累加求和
  .reduce((sum, cny) => sum + cny, 0);

console.log(`净成交额: ￥${totalCompletedCNY.toFixed(2)}`);
// 计算细节: (50 + 200 + 85) * 7.2 = 335 * 7.2 = 2412.00
// 示例输出: 净成交额: ￥2412.00

六、综合总结与技术选型决策

为了帮助读者在日常编码时迅速作出正确选择，下表总结了三者的核心差异与选型依据：

图4：JavaScript 数组高阶函数选用决策路径图

编写现代JavaScript代码时，善用 map、filter 和 reduce 能显著提高代码的可读性、可测试性与模块化水平。在处理实际业务时，建议遵循“单一职责”原则，让每个转换环节逻辑纯粹，从而构建出健壮优雅的数据处理流。