如何用JavaScript扩展运算符实现对象数组的ID匹配增改单行方案？

示例代码 #

let arr = [
  {id: 1, data: {foo: "bar 1"}},
  {id: 2, data: {foo: "bar 2"}}
];

// 当ID不存在时，作为新元素添加到数组
arr = [...arr, {id: 3, data: {foo: "bar 3"}}]
console.log(arr);

// 当ID存在时，替换对应对象的data（当前写法只会新增，不会替换）
arr = [...arr, {id: 2, data: {foo: "new data object"}}]
console.log(arr);

// 期望输出:
[
  {id: 1, data: {foo: "bar 1"}},
  {id: 2, data: {foo: "new data object"}},
  {id: 3, data: {foo: "bar 3"}}
]

问题说明 #

如上述代码所示，直接使用扩展运算符仅能新增元素，即使ID重复也不会替换原有对象。需要一种单行实现方式：传入对象时，若数组中已有相同ID的对象则替换它，若无则添加为新元素（已知可通过arr.find(i => i.id == newObject.id)判断后分情况处理，但希望用单行代码解决）。

单行解决方案 #

方案1：过滤后合并（适用于单个对象操作）

arr = [...arr.filter(item => item.id !== newObject.id), newObject];

逻辑说明：先通过filter移除原数组中与新对象ID匹配的元素（如果存在），再用扩展运算符将过滤后的数组与新对象合并。原数组有匹配ID时，旧元素被过滤掉，新对象补上实现替换；无匹配ID时，直接追加新对象。

方案2：利用Map去重（适用于批量对象操作）

如果需要一次性处理多个对象，这个方案更高效：

// 假设newObjects是包含多个待添加/替换对象的数组
arr = [...new Map([...arr, ...newObjects].map(item => [item.id, item])).values()];

逻辑说明：将原数组和待处理对象数组合并后，把每个元素转换为[对象ID, 对象]的键值对，传入Map构造函数——Map会自动用新值覆盖相同键的旧值，最后通过values()提取所有对象并转回数组。

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