JavaScript：如何更优实现以ID为键的数组转换（替代循环）

当然有比手动写forEach循环更优雅的实现方式！JavaScript的Array.reduce()方法天生就适合这种“把数组转换为特定结构”的场景，代码更紧凑，可读性也更强。

先回顾下你的原代码 #

let array = [ {id: 1, name: 'name 1'}, {id: 2, name: 'name 2'}, {id: 35, name: 'name 35'} ]
let newArray = []
array.forEach(function(data){
  newArray[data.id] = data
})

优化后的实现 #

用reduce可以把初始化数组、遍历赋值的逻辑整合在一起：

const array = [ {id: 1, name: 'name 1'}, {id: 2, name: 'name 2'}, {id: 35, name: 'name 35'} ]
const newArray = array.reduce((accumulator, currentItem) => {
  accumulator[currentItem.id] = currentItem;
  return accumulator;
}, []); // 这里的[]是初始的空数组，对应你原来的newArray

这段代码运行后得到的newArray和你原来的结果完全一致。

为什么这更优？ #

• 代码更简洁：不需要单独声明空数组再手动遍历赋值，逻辑一步到位
• 意图更清晰：reduce的语义就是“累积计算”，看到它就知道我们正在把数组转换为另一种结构
• 函数式风格：这种写法更贴近现代JavaScript的最佳实践，后续维护起来也更方便

额外提醒：考虑用对象代替数组 #

你当前的实现里，newArray虽然是数组类型，但当id是35时，数组的索引0到34都会是empty占位符——这不仅浪费内存，还可能在后续用map、for...of等方法遍历的时候出现意外行为。如果你的场景不需要数组的有序性，用普通对象存储会更合理：

const newDataMap = array.reduce((accumulator, currentItem) => {
  accumulator[currentItem.id] = currentItem;
  return accumulator;
}, {}); // 初始值换成空对象

得到的结果是：

{
  1: {id: 1, name: "name 1"},
  2: {id: 2, name: "name 2"},
  35: {id: 35, name: "name 35"}
}

这种键值对结构更符合“以id为键存储数据”的语义，查找和操作数据也更高效。

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