JavaScript扩展运算符：克隆对象后深层属性正在更改[重复]答案

【问题标题】：JavaScript spread operator: deep attribute is changing after cloning the object [duplicate]JavaScript扩展运算符：克隆对象后深层属性正在更改[重复]
【发布时间】：2021-09-21 11:44:06
【问题描述】：

我得到的输出是 5，但我假设是 3。背后的逻辑是什么，我怎样才能输出 3。

const obj = {
  a: 1,
  b: 2,
  c: {
    p: 3
  }
}
const obj1 = { ...obj}
obj.c.p = 5

console.log(obj1.c.p)

【问题讨论】：

首先评估您认为答案应该是 3 的原因。（提示：您将 reference 复制到 c 而不是它的值）
obj.c.p 是参考值，而不是实际值。当您将obj 传播到obj1 时，将保留对obj.c.p 的引用，而不是值，因此当您执行obj.c.p = 5 时，该值将被更新，并且obj1 包含对该值的引用。

标签： javascript

【解决方案1】：

上面只克隆了第一层，所以改变obj的deep属性会改变obj1中的引用

const obj = {
  a: 1,
  b: 2,
  c: { p: 3 }
};

const obj1 = { ...obj, c: {...obj.c} };
obj.c.p = 5;

console.log(obj1.c.p);

【讨论】：

【解决方案2】：

obj 扩展到 obj1 但 c 属性中的对象保持不变，例如c 是同一个对象。可以像这样深度克隆对象

const obj1 = JSON.parse(JSON.stringify(obj))

【讨论】：