如何用JavaScript的.reduce()替代.filter().map()添加属性并保护原数组

背景说明 #

我原本用.filter().map()实现了一段功能正常的代码：筛选水果对象数组里的新鲜水果，并给每个符合条件的对象添加foo: 'bar'属性。为了减少迭代次数（原方法需要两次遍历数组），我尝试改用.reduce()实现，但第一次尝试时发现原数组fruitArray被意外修改，后来用扩展运算符解决了这个问题。

问题与解答 #

1. 为什么扩展运算符是必要的？第一次.reduce()尝试失败的原因是什么？ #

第一次用.reduce()失败的核心原因是对象的引用特性：
JavaScript里的对象是引用类型，当你直接把原数组里的水果对象push进reduce的累加器数组，再给这个对象添加foo: 'bar'属性时，本质上是在修改原数组中对应对象的内存地址内容——因为累加器里的对象和原数组里的对象指向同一块内存空间，自然会导致原数组被意外修改。比如错误的写法：

// 错误写法：直接修改原对象，导致原数组被改动
const modifiedFruits = fruitArray.reduce((acc, fruit) => {
  if (fruit.isFresh) {
    fruit.foo = 'bar';
    acc.push(fruit);
  }
  return acc;
}, []);

而扩展运算符{...fruit}的作用是创建原对象的浅拷贝：它会把原对象的所有可枚举属性复制到一个新的对象里，新对象和原对象是独立的引用。这时候给新对象添加foo: 'bar'属性，只会影响新对象，不会触碰原数组里的对象，也就避免了意外修改原数组的问题。正确的写法：

// 正确写法：浅拷贝后修改新对象，不影响原数组
const modifiedFruits = fruitArray.reduce((acc, fruit) => {
  if (fruit.isFresh) {
    acc.push({...fruit, foo: 'bar'});
  }
  return acc;
}, []);

2. 使用.reduce()相比.filter().map()是否有实质性能优势？是否建议普遍用.reduce()替代.filter().map()？ #

• 性能优势：理论上.reduce()只需要遍历数组一次，而.filter().map()需要遍历两次，所以在处理超大数组（比如十万级以上数据量）时，.reduce()会有轻微的性能提升。但在日常开发的绝大多数场景下，这种性能差异可以忽略——现代JavaScript引擎已经对数组方法做了深度优化，两次遍历的耗时差距极小，几乎不会成为性能瓶颈。
• 是否建议普遍替代：不建议。.filter().map()的代码逻辑更清晰、可读性更强：一眼就能看出是先筛选符合条件的元素，再对元素做转换；而.reduce()的逻辑相对隐晦，需要阅读者理解累加器的处理逻辑，增加了维护成本。除非你明确遇到了因数组遍历次数导致的性能问题，否则优先选择更易读的.filter().map()组合。

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