数组中的json发生共用空间、污染原始对象的处理方法

当后台传输一个数组中有json数据时，你想重新赋值给其他变量后修改新的变量时，你会发现你修改新的变量时，原始的数组也会发生变化，究竟是什么场景呢，我们来还原一下。

var arr = [{"a":11111},{"b":11111},{"c":11111},{"d":11111},{"e":11111},{"f":11111},{"g":11111}];
var arr1 = [];
//****这里是处理的方法
arr1[0]['a']=22222;  //这里是修改新变量的数据
console.log(arr,arr1);  //当我们输出时你会发现是这样的数据

item1.png

这可不是我们想要的，出现这种情况我试了两种办法。

1、

var arr = [{"a":11111},{"b":11111},{"c":11111},{"d":11111},{"e":11111},{"f":11111},{"g":11111}];
var arr1 = [...arr];  //这里是处理的方法
arr1[0]['a']=22222;  //这里是修改新变量的数据
console.log(arr,arr1);  //当我们输出时你会发现是这样的数据

2、

var arr= [{"a":11111},{"b":11111},{"c":11111},{"d":11111},{"e":11111},{"f":11111},{"g":11111}];
var arr1 = [];
for(var i=0;i<arr.length;i++){
     arr1.push(arr[i])
}
arr1[0]['a']=22222;
console.log(arr,arr1);

事实证明以上两种方法都无法达到我们想要的结果。怎么办呢？

解决办法1、

var arr= [{"a":11111},{"b":11111},{"c":11111},{"d":11111},{"e":11111},{"f":11111},{"g":11111}];
var arr1 = [];
for(var i=0;i<arr.length;i++){
     arr1.push(Object.assign({},arr[i]))
}
arr1[0]['a']=22222;
console.log(arr,arr1);

解决办法2、

var arr= [{"a":11111},{"b":11111},{"c":11111},{"d":11111},{"e":11111},{"f":11111},{"g":11111}];
var arr1=JSON.parse(JSON.stringify(arr));
arr1[0]['a']=22222;
console.log(arr,arr1);

这个就是会吧原来的数据转化为字符串，这是针对对象的所有引用关系就不复存在了，然后再转化回来就是一个全新的对象。不在出现新对象改动污染原始对象的问题了！！

办法来源链接：https://www.cnblogs.com/anhaiming/p/deepClone.html

item2.png

这才是我们想要的数据。