如何使用Array.find()修改数组指定对象的name、age等多个属性

你可以通过两种常用方式实现： #

方法1：先存储匹配到的对象，再逐个修改属性 #

这是可读性最高的写法，适合修改属性数量不多的场景：

const arr = [
  {
    id: 101,
    name: "Jone",
    age: 1
  },
  {
    id: 102,
    name: "Jane",
    age: 2
  },
  {
    id: 103,
    name: "johnny",
    age: 3
  }
];
// 先把匹配到的对象存到变量中
const target = arr.find(element => element.id == 101);
// 加判断避免匹配不到对象时报错
if (target) {
  target.name = "jimmy";
  target.age = 10;
  // 可继续添加其他需要修改的属性
}
console.log(arr);

方法2：使用Object.assign()批量赋值 #

如果需要修改的属性较多，可以用这个方法一次性完成赋值，代码更简洁：

const arr = [
  {
    id: 101,
    name: "Jone",
    age: 1
  },
  {
    id: 102,
    name: "Jane",
    age: 2
  },
  {
    id: 103,
    name: "johnny",
    age: 3
  }
];
const target = arr.find(element => element.id == 101);
if (target) {
  Object.assign(target, {
    name: "jimmy",
    age: 10
    // 其他要修改的属性直接写在该对象内即可
  })
}
console.log(arr);

注意事项 #

• 两种方法都是直接修改原数组中的对象，不需要额外返回值
• 必须加非空判断，避免find未匹配到对应对象时，访问属性抛出Cannot set properties of undefined的报错

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