如何用JavaScript的.filter和.reduce链式调用计算数组项总费用

嘿，我完全懂你现在的困惑——把.filter和.reduce链式起来用刚开始确实有点摸不着头脑，但这俩组合起来绝对是精简代码、实现声明式逻辑的好工具！

先给你理清楚核心逻辑：先用.filter筛选出你需要的目标项，再用.reduce把这些项的费用属性累加起来。我给你举个具体的例子，你一看就明白：

假设我们有这样一个包含订单信息的数组（和你实际的数据结构类似）：

const orders = [
  { id: 1, item: '耳机', category: '数码', cost: 199 },
  { id: 2, item: 'T恤', category: '服饰', cost: 59 },
  { id: 3, item: '键盘', category: '数码', cost: 299 },
  { id: 4, item: '抱枕', category: '家居', cost: 39 },
];

如果你想计算所有category为「数码」的订单总费用，链式调用的代码会是这样：

// 链式调用：筛选 + 累加
const totalDigitalCost = orders
  // 第一步：筛选出符合条件的项
  .filter(order => order.category === '数码')
  // 第二步：对筛选后的数组累加费用
  .reduce((totalSum, currentItem) => totalSum + currentItem.cost, 0);

console.log(totalDigitalCost); // 输出：498

拆解每一步的作用： #

• .filter() 阶段：
  回调函数里的order是数组中的每一项，我们判断它的category是否等于目标值，返回true的项会被保留到新数组里。这一步结束后，我们得到的就是所有「数码」类的订单数组。

• .reduce() 阶段：

  • 第一个参数是累加器函数：totalSum是当前已经累加的总和，currentItem是当前遍历到的筛选后的项。我们只需要把currentItem.cost加到totalSum上即可。
  • 第二个参数0是累加器的初始值，这个一定要加！如果不加，当筛选后的数组为空时会返回undefined，而且初始值能确保我们从0开始累加，避免出现奇怪的结果。

额外小提示： #

• 如果你需要更复杂的筛选条件（比如费用大于100的项），直接在.filter的回调里修改逻辑就行：

  orders.filter(order => order.cost > 100)
  

• 一定要确认你访问的属性名和数组项的属性完全一致（比如别把cost写成price，大小写也不能错），不然会得到NaN或者错误的结果。

这样写出来的代码完全符合你「精简代码、不用for循环」的需求，而且逻辑清晰，可读性也很强～

内容的提问来源于stack exchange，提问作者Nik