如何在JavaScript中修改对象数组指定元素的属性

嘿，这个需求在日常JavaScript开发里挺常见的，我给你几种实用的实现方式，你可以根据自己的场景来选择：

方式一：直接修改原数组（使用forEach遍历） #

如果不需要保留原数组的原始状态，用forEach遍历数组，定位到目标元素后直接修改属性是最直接的方式：

const arr = [{id:'first',name:'John'},{id:'fifth',name:'Kat'},{id:'eitghth',name:'Isa'}];

arr.forEach(item => {
  // 匹配到id为'fifth'的元素时修改其id
  if (item.id === 'fifth') {
    item.id = 'sixth';
  }
});

console.log(arr);
// 输出：[{id:'first',name:'John'},{id:'sixth',name:'Kat'},{id:'eitghth',name:'Isa'}]

因为数组里的对象是引用类型，所以直接修改遍历到的元素，就会同步修改原数组里的对应元素。

方式二：精准定位后修改（使用find方法） #

如果你只想快速找到第一个匹配的元素并修改，find方法会更高效，它专门用来返回数组中第一个满足条件的元素：

const arr = [{id:'first',name:'John'},{id:'fifth',name:'Kat'},{id:'eitghth',name:'Isa'}];

// 找到id为'fifth'的元素
const targetItem = arr.find(item => item.id === 'fifth');

// 先判断是否找到元素，避免找不到时修改undefined的属性报错
if (targetItem) {
  targetItem.id = 'sixth';
}

console.log(arr);
// 输出结果和上面一致

方式三：生成新数组（不修改原数组，推荐React等场景） #

如果需要保持原数组的不可变性（比如在React状态管理中），可以用map方法生成一个新数组，只修改目标元素的属性：

const arr = [{id:'first',name:'John'},{id:'fifth',name:'Kat'},{id:'eitghth',name:'Isa'}];

const newArr = arr.map(item => {
  if (item.id === 'fifth') {
    // 用展开运算符复制原对象的所有属性，再覆盖id
    return {...item, id: 'sixth'};
  }
  // 其他元素直接返回原对象
  return item;
});

console.log(newArr);
// 新数组：[{id:'first',name:'John'},{id:'sixth',name:'Kat'},{id:'eitghth',name:'Isa'}]
console.log(arr); // 原数组保持不变

这种方式不会改动原数组和原对象，符合数据不可变的设计原则，能避免很多意外的副作用。

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