如何根据指定key id更新数组中对应对象的部分或全部属性？

下面分两种常用场景给出实现：

场景1：直接修改原数组 #

直接用find()方法定位到id为102的对象，配合Object.assign()批量更新属性即可，数组内的对象是引用类型，修改找到的对象会直接同步到原数组：

// 定位目标对象
const target = tblUsers.find(item => item.id === 102);
// 加判断避免找不到对应id时报错
if (target) {
  // 部分更新：只改需要变动的键值，原有其他属性保留
  Object.assign(target, {
    status: 'Active',
    firstName: 'William',
    modified: '2024-05-20 14:30:00'
  });

  // 如果需要全量替换该对象的所有键值，直接覆盖所有属性即可
  // Object.assign(target, {
  //   id: 102,
  //   user: 'user2_v2',
  //   password: 'new_pwd_2024',
  //   created: '2021-01-01 23:59:59',
  //   modified: '2024-05-20 14:30:00',
  //   status: 'Active',
  //   firstName: 'William',
  //   lastName: 'Gates'
  // });
}

场景2：不修改原数组，返回新数组 #

如果是React状态更新等需要不可变操作的场景，用map()方法遍历数组，匹配到id时返回合并新属性的新对象即可：

const newTblUsers = tblUsers.map(item => {
  if (item.id === 102) {
    // 展开原有属性，覆盖需要更新的字段
    return {
      ...item,
      status: 'Active',
      lastName: 'Gates',
      modified: '2024-05-20 14:30:00'
    }
  }
  // 非目标对象直接返回
  return item;
});

// 如需覆盖原变量，可手动赋值
// tblUsers = newTblUsers;

额外说明 #

• 如果需要删除目标对象的某个属性，定位到对象后用delete target.属性名操作即可
• 如果确定id一定存在，可以省略查找后的存在性判断

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