数组对象的拷贝

数组对象的拷贝

错误方式： 

let arr1 = [{isShow: true,value:testValue}];

let arr2 = [...arr1];// 采用es6解构赋值的方式

let listItems = [];

arr2.foreach( (item)=> {

if (item.isShow == true) {

let reg = RegExp(/Value/);

if (reg.exec(item.value)) {

item.value = item.value.split("V")[0];

}

listItems.push(item.value);

})

console.log("复制后的数组",arr2);

console.log("原数组",arr1);

//结果显示：原数组被污染
//原因： es6的解构赋值只对一维数组的操作，即只对基础类型的拷贝，无法拷贝引用类型。

正确的方式：
（1）深拷贝

deepCopy.js 里写的封装好的deepCopy，如下：

// 深拷贝

class DeepCopy {

deepCopy(arr) {

let copyArr = (arr.constructor === Array) ? [] : {}; // 判断是数组还是对象

for (let i in arr) {

if (typeof arr[i] === 'object') { // 判断是值类型还是引用类型

copyArr[i] = this.deepCopy(arr[i]); // 引用类型的话进行递归操作

} else {

copyArr[i] = arr[i]; // 值类型直接赋值

}

}

return copyArr;

}

}

 

var deepCopy = new DeepCopy();

export default deepCopy;

——————————————————————————

在组件里引用deepCopy.js  ，//放置的路径根据自己项目配置
我的项目路径： import deepCopy from "@/lib/deepCopy.js";

let arr1 = [{isShow: true,value:testValue}];

let copyCols = deepCopy.deepCopy(arr1);

copyCols.forEach(item => {

if (item.isShow == true) {

let reg = RegExp(/Value/);

if (reg.exec(item.value)) {

item.value = item.value.split("V")[0];

}

 listItems.push(item.value);

 }

 });

console.log("原数组",arr1); // 此时原数组未被污染

(2) 序列化和反序列化的方式

let arr1 = [{isShow: true,value:testValue}];

let colsString = JSON.stringify(arr1)

let colsArr = JSON.parse(colsString);

colsArr.forEach(item => {

if (item.isShow == true) {

let reg = RegExp(/Value/);

if (reg.exec(item.value)) {

item.value = item.value.split("V")[0];

}

listItems.push(item.value);

}

});

console.log("原数组",arr1); // 此时原数组未被污染