JavaScript使用reduce转换对象数组时遍历从索引1开始问题

问题原因 #

你遇到的问题是调用reduce方法时没有传入第二个参数初始累计值。
Array.prototype.reduce的执行规则如下：

• 传入初始值时：第一次回调的prev参数为你传入的初始值，curr从数组索引0的第一个元素开始遍历
• 未传入初始值时：第一次回调的prev参数自动取数组索引0的第一个元素，curr从数组索引1的第二个元素开始遍历

你的代码没有传入初始值，所以第一次迭代时prev就是{key: "a", value: 1}，执行{...prev}后会把这个对象的key、value两个属性直接展开到新对象中，最终输出的结果自然不符合预期。

修复方案 #

不需要单独处理第一个元素，只要给reduce传入空对象{}作为初始累计值即可：

const input = [
  {key: "a", value: 1}, 
  {key: "b", value: 2}, 
  {key: "c", value: 3}, 
  {key: "d", value: 4}
];

// 写法1：直接修改累计对象，性能更高
let output = input.reduce((prev, curr) => {
  prev[curr.key] = curr;
  return prev;
}, {}); // 此处传入空对象作为初始值

// 写法2：保留你原有的展开逻辑，每次返回新对象的不可变写法
let output = input.reduce((prev, curr) => {
  let obj = {...prev};
  obj[curr.key] = curr;
  return obj;
}, {});

两种写法都可以得到你期望的输出结果。

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