首页 > 解决方案 > 复制而不保留参考

问题描述

所以我有一个名为的变量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多次调用,则执行以下操作:

我看到的是三个log显示这些数据:

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

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

谢谢你。

标签: javascriptangularobject

解决方案


尝试以下操作:

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);


推荐阅读