如何基于属性高效替换JavaScript数组中的对象？

需求说明 #

基于对象的id属性，将数组中匹配的对象替换为新对象，示例中需要把oldEmployees里id=2的对象替换为newEmployee。

1. 原地修改（性能最优） #

如果允许直接修改原数组，这是最高效的方案：通过findIndex快速定位匹配元素的索引，找到后直接替换原数组对应位置。findIndex会在找到第一个匹配项后停止遍历，时间复杂度为O(n)，且无额外内存开销。

const oldEmployees = [
  {id: 1, name: 'Jon', age: 38}, 
  {id: 2, name: 'Mike', age: 35},
  {id: 3, name: 'Shawn', age: 40}
];

const newEmployee = {id: 2, name: 'Raj', age: 32};

// 找到匹配id的元素索引
const targetIndex = oldEmployees.findIndex(emp => emp.id === newEmployee.id);

// 存在匹配项则替换
if (targetIndex !== -1) {
  oldEmployees[targetIndex] = newEmployee;
}

console.log(oldEmployees);
// 输出：[{id:1,...}, {id:2,name:'Raj',...}, {id:3,...}]

2. 返回新数组（不修改原数组） #

如果需要保持原数组不可变（比如React等框架的状态管理场景），推荐用findIndex结合数组切片的方式，相比map遍历整个数组更高效（尤其是数组较大时）：

const oldEmployees = [
  {id: 1, name: 'Jon', age: 38}, 
  {id: 2, name: 'Mike', age: 35},
  {id: 3, name: 'Shawn', age: 40}
];

const newEmployee = {id: 2, name: 'Raj', age: 32};

const targetIndex = oldEmployees.findIndex(emp => emp.id === newEmployee.id);

// 拆分原数组并插入新对象，生成新数组
const updatedEmployees = targetIndex !== -1 
  ? [...oldEmployees.slice(0, targetIndex), newEmployee, ...oldEmployees.slice(targetIndex + 1)]
  : [...oldEmployees]; // 无匹配项则返回原数组的副本

console.log(updatedEmployees);

如果数组规模较小，也可以用更简洁的map写法（虽然会遍历整个数组，但代码更短）：

const updatedEmployees = oldEmployees.map(emp => 
  emp.id === newEmployee.id ? newEmployee : emp
);

效率对比 #

• 原地修改：时间O(n)，空间O(1)，性能最优。
• 新数组方案（findIndex+slice）：时间O(n)，空间O(n)，但仅遍历到匹配项就停止，比map遍历全数组更高效。
• map写法：时间O(n)，空间O(n)，代码简洁但数组较大时效率略低。

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