为何reduce累加器会重置？如何保留reduce函数的累加值？

嘿，我来帮你捋清楚这个问题哈～

问题原因 #

你当前的reduce回调函数犯了一个关键错误：每次迭代都返回了一个全新的对象，完全没有复用之前的累加器acc。

看你的代码：

const f = a.reduce((acc, val) => { 
  console.log({ acc }) 
  return { [val]: { age: b[val].age } } 
}, {})

初始时acc是你传入的空对象{}，但第一次迭代后，你返回了{1: {age:25}}，把初始的空对象丢了；第二次迭代时，acc就变成了这个新对象，但你又返回了{2: {age:28}}，再次丢掉之前的结果……以此类推，最后自然只剩下最后一次迭代生成的{5: {age:25}}。

两种解决方法 #

方法一：直接修改累加器并返回（推荐，性能更优）

直接在原有累加器acc上添加属性，然后返回修改后的acc，这样每次迭代都会保留之前的累加结果：

const a = [1, 2, 3, 4, 5];
const b = { 1: { name: 'Dan', age: 25 }, 2: { name: 'Peter', age: 28 }, 3: { name: 'Mark', age: 38 }, 4: { name: 'Larry', age: 32 }, 5: { name: 'Simon', age: 25 }, }

const f = a.reduce((acc, val) => {
  acc[val] = { age: b[val].age };
  return acc;
}, {})

console.log(f); 
// 输出：{ 1: { age: 25 }, 2: { age: 28 }, 3: { age: 38 }, 4: { age: 32 }, 5: { age: 25 } }

方法二：使用对象展开运算符生成新对象（纯函数风格）

如果你不想修改原累加器对象（符合函数式编程的纯函数原则），可以用对象展开运算符...把之前的acc和当前新属性合并，返回一个新对象：

const f = a.reduce((acc, val) => {
  return {
    ...acc,
    [val]: { age: b[val].age }
  };
}, {})

这种方式每次都会创建新对象，适合对数据不可变性有要求的场景，但数组较大时性能会略逊于第一种方法。

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