如何将对象数组中的id值指定为键并重构数组结构

嘿，我明白你的需求啦～你现在遇到的问题是用map之后得到的是一堆小对象组成的数组，而不是你想要的单个以id为键的大对象，对吧？

首先得纠正一个小细节：你写的目标结构[1:{id: 1, name: "john"}, 2:{id: 2, name: "doe"}]在JS里是不合法的哦，数组不能用这种自定义的非数字索引键，你实际想要的应该是一个普通对象，结构是{1: {id: 1, name: "john"}, 2: {id: 2, name: "doe"}}。

那怎么实现呢？用Array.reduce()就可以完美解决，这正是它的拿手活儿——把数组合并成单个值（这里就是合并成一个对象）。

基础实现代码 #

const myArray = [{id: 1, name: "john"}, {id: 2, name: "doe"}];
const transformedObj = myArray.reduce((accumulator, currentItem) => {
  // 把当前元素的id作为键，原对象作为值存入累加器
  accumulator[currentItem.id] = currentItem;
  // 返回累加器供下一次迭代使用
  return accumulator;
}, {}); // 初始值是空对象，作为累加器的起点

console.log(transformedObj);
// 输出：{1: {id: 1, name: "john"}, 2: {id: 2, name: "doe"}}

简洁版（ES6展开语法） #

如果你喜欢更简洁的写法，也可以用对象展开语法：

const transformedObj = myArray.reduce((acc, item) => ({
  ...acc,
  [item.id]: item
}), {});

为什么你的map写法不行？ #

你用map的时候，每次迭代都会返回一个新的小对象（比如{1: {id:1, name:"john"}}），最终得到的是一个包含这些小对象的数组：[{1: {...}}, {2: {...}}]，这和你想要的单个大对象结构完全不一样。而reduce则是把这些小对象的键值对逐个合并到同一个累加器对象里，最终得到你需要的结构。

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