js实现对象或者数组深拷贝

今天遇到个问题,就是vue绑定的数组在push中所有的数组都会跟着改变。这个主要是因为 JavaScript中对象或者数组等引用类型,直接拷贝,改变一个另外一个也会改变;

有个简单的方法就是先转换为字符串再转换为json

var arr = [,,];
var arr1 = arr;
arr1.push();
console.log(arr); //[1,2,3,4]
console.log(arr1);//[1,2,3,4]

上面这是没转换的.

1、通过JSON.stringfy()和JSON.parse()转换

var arr = [,,];

var arr1 = JSON.stringify(arr);
var arr2 = JSON.parse(arr1);
arr2.push();
console.log(arr); //[1, 2, 3]
console.log(arr1);//字符串[1,2,3]
console.log(arr2);//[1, 2, 3, 4]

这种方式也会有一下几点的不足:

1、会忽略 undefined

2、会忽略 symbol

3、不能序列化函数

4、不能解决循环引用的对象

5、不能正确处理new Date()

6、不能处理正则

2、通过递归

下面是简单的实现,更加完善的有Lodash这个库,能满足各种使用场景。
function deepCopy(obj) {
if(typeof obj!='object'){
return obj
}
let newObj=obj instanceof Array ? []:{ };
for(let i in obj){
if(Object.prototype.hasOwnProperty.call(obj,i)){
type[i]=typeof obj[i]=='object' ? deep(obj[i]):obj[i]
} }
return newObj
}

至于为什么要深拷贝,可以参考js 数据类型及检测

上一篇:JS的对象、数组等处理方法:解构


下一篇:0417 jQuery基础知识