比较两个数组并替换/合并另一个数组(js)中存在的id值

Question

我有两个数组，我希望能够比较这两个数组，并将info数组中存在的id的对象值替换为details数组，并按原样填充其余部分。我还没找到这样的东西。回归相似点的最佳方式是什么?

const details = [{
id: "id1",
description: "new description-1"
},
{
id: "id3",
linkUrl: "new link-1"
}
]
const info = [{
id: "id1",
description: "old description-1",
linkUrl: "#id1link-1",
image: "#imageUrl-1"
},
{
id: "id2",
description: "description-2",
linkUrl: "#id1link-2",
image: "#imageUrl-2"
},
{
id: "id3",
description: "description-3",
linkUrl: "#old link-2",
image: "#imageUrl-2"
}
]
const result = [{
id: "id1",
description: "new description-1",
linkUrl: "#id1link-1",
image: "#imageUrl-1"
},
{
id: "id2",
description: "description-2",
linkUrl: "#id1link-2",
image: "#imageUrl-2"
},
{
id: "id3",
description: "description-3",
linkUrl: "#new link-2",
image: "#imageUrl-2"
}
]

Answer 1

使用map, Find和Destructuring赋值

const result = info.map(item => {
const new_info = details.find(detail => detail.id === item.id);
return {
...item,
...new_info,
};
})

Answer 2

对于较大的数据量，最好首先为详细信息数据创建一个映射，以便在固定时间内检索id:

const details = [{id:"id1",description: "new description-1"},{id: "id3",linkUrl: "new link-1"}];
const info = [{id: "id1",description: "old description-1",linkUrl: "#id1link-1",image: "#imageUrl-1"},{id: "id2",description: "description-2",linkUrl: "#id1link-2",image: "#imageUrl-2"},{id: "id3",description: "description-3",linkUrl: "#old link-2",image: "#imageUrl-2"}];
const map = new Map(details.map(({id, ...rest}) => [id, rest]));
const result = info.map(o => ({...o, ...map.get(o.id)}));
console.log(result);