javascript - 删除一个对象的键也会删除另一个对象中的键 - Javascript

Question

我发现自己遇到了 Javascript 的特殊问题。我正在尝试维护一种形式的状态对象/字典(dict1)和我必须发布的最终对象/字典(dict2)。

当单击某些按钮时，我将对象 dict1 分配给我的对象 dict2。我想要做的是删除 dict2 中的键，但行为很奇怪，因为它也会从 dict1 中删除键。下面是我的代码:

dict1 = {
    123:{
    456:2
  }
}

dict2 = {}

dict2[123] = dict1[123]


delete dict2[123][456]


console.log(dict1)

// It logs {123 : {} } whereas the dict1 shouldn't change

看起来对象正在以某种方式进行浅复制。

Answer 1

使用扩展运算符 (...) 创建对象的“副本”，这样您就不会修改原始对象。

最初，您将 dict1[123] 中存储的引用复制到 dict2[123]。这意味着两个字典属性都指向同一个对象，并且从一个字典所做的修改可以从另一个字典中看到。通过使用扩展运算符，您可以将对象的所有内容添加到新对象中。这意味着 dict1[123] 和 dict2[123] 将存储包含相同数据的 2 个不同引用，并且您可以单独修改它们。

了解有关展开运算符 here 的更多信息。

dict1 = {
  123:{
    456:2
  }
}

dict2 = {}

dict2[123] = {...dict1[123]}

delete dict2[123][456]

console.log(dict1)
console.log(dict2)