Question

因此，我有一个名为elements的变量，其中包含一堆数据。举例来说，就是这样：

{
  name: "Jeff",
  age: "18",
  carList: [
    "car1": "...",
    "car2": "..."
  ],
  surname: "Matt"
}

一开始我也有一个空数组，声明如下：

public myArray: Model[] = [];

Model只是一个包含elements定义的类。

我要达到的目标是拥有一个elements的副本，而不保留对原始变量的任何引用。但我想念一些东西。这是伪代码（几乎可以做到）：

myfunction(){
  //Do stuff that change `car1` from `...` to `hello`
  myArray.push(Object.assign({}, this.elements));
}

最后我有一个函数可以打印myArray变量中的所有内容：

function print(){
  this.myArray.forEach(el => {
    console.log(el);
  });
}

问题是数组的每个元素都由我完成了最新更新。因此，如果多次调用myFunction，例如：

将“ Jeff”更改为“ Jack”
将年龄“ 18”更改为“ 25”
将姓氏更改为“ Seth”

我看到的是三个log显示此数据：

{
  name: "Jeff",
  age: "25",
  carList: [
    "car1": "...",
    "car2": "..."
  ],
  surname: "Seth"
}

我的问题是：为什么即使使用Object.asign仍然保留对原始对象的引用？我应该保留每次修改的历史记录，而不仅仅是我所做的三个编辑中的最后一个。

谢谢。

Answer 1

尝试以下操作：

JSON.parse(JSON.stringify(element));

它不保留任何内容，如下面的代码片段所示：

let element = { name: "Jeff", age: "18", carList: [ {"car1": "x"}, {"car2": "y"} ], surname: "Matt" };

let result = JSON.parse(JSON.stringify(element));
result.name = "x";

console.log(result);
console.log("****element*****");
console.log(element);

复制但不保留参考

1 个答案: