JS对象新增属性赋值原属性值，修改原属性后新属性同步变更问题

问题原因分析 #

你给出的示例代码中a是数字类型（属于JS原始值类型），按照JS的赋值规则，原始值赋值是传值拷贝，理论上修改obj.a不会影响obj.z，你遇到的同步变更问题，大概率是实际业务场景中a存储的是对象、数组这类引用类型的值，直接赋值时传递的是内存地址，才会导致两个属性指向同一块内存空间，修改任意一个都会联动变更。

解决方法 #

情况1：属性值为原始值类型（数字、字符串、布尔、null、undefined、Symbol、BigInt）

你贴的示例代码本身逻辑是正确的，正常运行后obj.z会保持为1，不会跟随obj.a变更，可以运行下方代码验证：

const obj = {
 a: 1,
 b:2,
 c:3
} 
const first = obj.a;
obj.z = first;
obj.a = '';
console.log(obj.z) // 输出结果为1，符合预期

如果运行结果不符合预期，建议检查是否有其他代码逻辑同时修改了obj.z的值。

情况2：属性值为引用类型（对象、数组等）

需要做值拷贝而非直接赋值引用，根据属性值的复杂度选择对应方案：

• 单层引用类型用浅拷贝即可：
  • 若为数组：obj.z = [...obj.a]
  • 若为普通对象：obj.z = {...obj.a} 或者 obj.z = Object.assign({}, obj.a)
• 多层嵌套的引用类型需要用深拷贝：
  优先用JS原生的结构化克隆方法：obj.z = structuredClone(obj.a)，支持大部分常见数据类型。如果数据中没有函数、循环引用、Symbol等特殊类型，也可以用obj.z = JSON.parse(JSON.stringify(obj.a))实现深拷贝。

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