如何修改引用对象时不更新原JavaScript数组中的对象？

你遇到的问题本质是JavaScript中对象属于引用类型：find方法返回的是原数组中目标对象的引用，而非新对象。直接修改这个返回值的属性，会同步改动原数组里的对应对象。

要避免修改原数组，你需要基于找到的对象创建一个新对象后再修改属性，具体有几种常见实现方式：

方法1：使用扩展运算符（语法简洁，推荐） #

const students=[
  { "name": "sean"},{"name":"paula"}
];

// 定位到目标对象
const targetStudent = students.find(student => student.name === "sean");
// 基于原对象创建新对象，同时覆盖name属性
const findStudent = { ...targetStudent, name: "jason" };

console.log(findStudent); // 输出 {"name":"jason"}
console.log(students); // 原数组保持不变：[{"name":"sean"},{"name":"paula"}]

方法2：使用Object.assign #

const students=[
  { "name": "sean"},{"name":"paula"}
];

const targetStudent = students.find(student => student.name === "sean");
// 以空对象为基础，拷贝原对象属性后覆盖name
const findStudent = Object.assign({}, targetStudent, { name: "jason" });

console.log(findStudent);
console.log(students); // 原数组不受影响

方法3：处理多层嵌套对象（深拷贝） #

如果你的对象是多层嵌套结构，浅拷贝无法彻底隔离原对象，这时可以用JSON序列化实现深拷贝（注意：此方法不支持函数、Symbol等特殊类型）：

const students=[
  { "name": "sean", info: { age: 20 } },{"name":"paula"}
];

const targetStudent = students.find(student => student.name === "sean");
// 深拷贝生成完全独立的新对象
const findStudent = JSON.parse(JSON.stringify(targetStudent));
findStudent.name = "jason";
findStudent.info.age = 21; // 修改嵌套属性也不会影响原数组

console.log(findStudent); // {"name":"jason","info":{"age":21}}
console.log(students); // 原数组中sean的info.age仍为20

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