JavaScript 数组方法：map、filter、reduce 的使用

掌握 JavaScript 数组的 map、filter 与 reduce 方法，能省去 80% 的冗余循环代码。以下指南将拆解 每个方法的执行逻辑与标准步骤，确保直接套用到实际业务中。

使用 map 转换 数组结构（长度保持不变）

1. 声明 包含原始数据的数组变量。
2. 调用 .map() 方法并紧跟圆括号。
3. 传入 箭头函数作为回调，基础签名为 (item, index) => 转换表达式。
4. 计算 新值，在箭头右侧直接编写字段映射或数学运算逻辑。
5. 接收 返回的新数组，该数组与原数组索引一一对应，原数组保持不可变。

const rawScores = [85, 90, 78];
// 将原始分数转换为带格式的字符串
const formattedScores = rawScores.map(score => `得分: ${score}`);
console.log(formattedScores); // ["得分: 85", "得分: 90", "得分: 78"]

使用 filter 提取 目标元素（长度动态缩减）

1. 准备 待处理的数据源。
2. 挂载 .filter() 到数组实例末尾。
3. 设置 判定条件，在回调函数内部编写比较表达式（如 val > 60）。
4. 返回 布尔值，表达式判定为 true 则保留该元素进入新数组，判定为 false 则直接丢弃。
5. 获取 过滤后的子集数组，常用于剔除无效数据或筛选权限项。

const users = [
  { id: 1, name: 'Alice', status: 'active' },
  { id: 2, name: 'Bob', status: 'inactive' },
  { id: 3, name: 'Charlie', status: 'active' }
];
// 仅提取状态为 active 的用户
const activeUsers = users.filter(user => user.status === 'active');
console.log(activeUsers.length); // 2

使用 reduce 合并 数组结果（收敛为单一值或对象）

1. 明确 聚合目标，确认最终输出应为数字、对象还是字符串。
2. 调用 .reduce() 方法并传入两个实参：累加回调函数与初始值（推荐显式传入初始值以防空数组报错）。
3. 定义 累加器 (acc, cur) => {}，acc 记录历史累计状态，cur 代表当前遍历项。
4. 更新 状态对象，在函数体内执行累加、分组或键值提取操作，并务必 返回 修改后的 acc。
5. 获取 终值，遍历彻底结束后，最后一次回调返回的累加器即为最终结果。

const cart = [{ price: 50, qty: 2 }, { price: 30, qty: 1 }];
// 计算购物车总价
const totalCost = cart.reduce((acc, item) => acc + item.price * item.qty, 0);
console.log(totalCost); // 130

执行 链式调用处理复合数据流

1. 梳理 业务处理顺序，遵循“先过滤降噪、再映射提纯、最后聚合汇总”的流水线原则。
2. 串联 .filter() 作为第一节点，快速剔除不符合基础规则的脏数据。
3. 衔接 .map() 作为第二节点，剥离冗余字段，仅保留后续计算所需的核心数据，降低内存占用。
4. 终结 于 .reduce()，将精简后的数据流压缩为业务直接可用的单一值。
5. 验证 链式连续性，确保 filter 和 map 始终返回数组类型，避免后续方法挂载时报错。

const orders = [
  { id: 101, amount: 200, isPaid: false, region: 'CN' },
  { id: 102, amount: 150, isPaid: true, region: 'US' },
  { id: 103, amount: 300, isPaid: true, region: 'CN' }
];

// 提取 CN 地区已支付订单的金额并求和
const cnPaidTotal = orders
  .filter(order => order.region === 'CN' && order.isPaid === true)
  .map(order => order.amount)
  .reduce((sum, val) => sum + val, 0);

console.log(cnPaidTotal); // 300