javascript - 删除复制对象内的对象的键也会删除现有对象

Question

var origin = { a: 1, b: { c: 2, d: 3 } }; // origin object

var copy_obj = { ...origin } // or Object.assign({}, origin.b)

delete copy_obj.b.c; // delete copy object

console.log(origin) // { a: 1, b: { d: 3 } };

我正在研究事物的不变性。

但是，上面的示例显示您要删除 copy_obj 的 bc 元素。但是原点也被删除了。

为什么会这样？

标签： javascript

Answer 1

Object.assign({}, origin.b)或传播语法{...obj}执行浅拷贝。因此，存储在borigin 属性中的对象不会被克隆，即它维护对嵌套对象的引用。

使用以下内容进行深度克隆。

JSON.parse(JSON.stringify(obj))

var origin = { a: 1, b: { c: 2, d: 3 } }; // origin object

var copy_obj = JSON.parse(JSON.stringify(origin));

delete copy_obj.b.c; 

console.log(origin) 

注意：这仅适用于可以序列化的对象

例如：

// Object having functions
const obj= {
  a: 1,
  b: () => {return 2}
}


const copy = JSON.parse(JSON.stringify(obj));

// property `b` won't be copied as it is a function and can't be serialized.
console.log(copy)