ES6中如何合并filter与reduce，一步计算对象数组过滤后的属性总和？

嗨，这事儿很简单，其实你根本不需要分开调用filter和reduce——直接把过滤逻辑塞进reduce的回调函数里就行，还能少遍历一次数组，一举两得！

具体实现代码 #

你可以直接写成简洁的一行箭头函数：

const totalStock = list.reduce((acc, item) => item.topLevel ? acc + item.stock : acc, 0);

如果想让代码可读性更强，也可以写成带大括号的版本：

const totalStock = list.reduce((acc, item) => {
  // 只对符合条件的元素进行累加
  if (item.topLevel) {
    return acc + item.stock;
  }
  // 不符合条件就直接返回当前累加值，相当于跳过该元素
  return acc;
}, 0);

原理说明 #

这个写法的核心是：在reduce的每一步判断当前元素是否满足过滤条件（item.topLevel）。如果满足，就把它的stock属性值加到累加器acc里；如果不满足，直接返回当前的累加器值，相当于对该元素“视而不见”。

对比你原来的两步写法，这种方式只需要遍历数组一次，而先filter再reduce需要遍历两次，在处理大型数组时性能会更优哦～

另外，如果你之前尝试过类似list.filter(item => item.topLevel).reduce(...)的写法，虽然也能整合成一行，但本质还是两次遍历，上面的方法才是更高效的合并方式。

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