javascript - 复制而不保留参考
问题描述
所以我有一个名为的变量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
多次调用,则执行以下操作:
- 将“杰夫”更改为“杰克”
- 将年龄“18”更改为“25”
- 将姓氏更改为“赛斯”
我看到的是三个log
显示这些数据:
{
name: "Jeff",
age: "25",
carList: [
"car1": "...",
"car2": "..."
],
surname: "Seth"
}
我的问题是:为什么即使使用Object.asign
它仍然保留对它的原始对象的引用?我应该保留每次修改的历史记录,而不是只保留我所做的三个编辑中的最后一个编辑。
谢谢你。
解决方案
尝试以下操作:
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);
推荐阅读
- php - Moodle 和 SAML2 SSO Auth 插件循环
- r - 使用 lapply 函数在 R 中的列表中获取子列表的名称
- r - NULL 值,回归/相关切换
- firebase - Vue.js Firebase RealTime DB Rules - 为应用功能修改的属性设置规则
- java - RestTemplate & ResponseErrorHandler:给定一个不确定的返回对象处理错误的优雅方法
- .net - Tomcat在关机时锁定
- ios - XCode: Scrollview not scrolling
- android - Android Auto Music 应用未显示在“Android auto”应用中
- android - ListView 项目不可点击,内部单个 TextView
- php - 如何使用通配符在 Nginx 中部署 laravel