先读一篇这样的文章扫盲来告诉我们为什么js会出现对象深拷贝的问题,
https://www.jb51.net/article/91053.htm
接下来就是一些实现深拷贝的方法了:
1.数组的深拷贝(es6)
方法1:
var arr1=[1,2,3];
var arr2=Array.from(arr1);
arr1.push(4);
console.log(arr1); //1234
console.log(arr2); //123
arr2.push(5);
console.log(arr1); //1234
console.log(arr2); //1235
方法2:
var arr1=[1,2,3];
var arr2=[...arr1];
arr1.push(4);
console.log(arr1); //1234
console.log(arr2); //123
arr2.push(5);
console.log(arr1); //1234
console.log(arr2); //1235
2.下面是对象深拷贝的方法
方法1:
var obj = {a:1,b:2,c:3};
var cpobj = JSON.parse(JSON.stringify(obj));
cpobj.a = "m";
console.log(obj);//{ a: 1, b: 2, c: 3 }
console.log(cpobj);//{ a: 'm', b: 2, c: 3 }
上述方法可以进行对象的拷贝但是却存在问题,如果对象的属性是函数的话,拷贝得到的对象中不会有这个属性,因此还是需要乖乖的进行递归拷贝,以下代码是借用CSDN上的一篇文章讲解的方法,链接如下:
https://blog.csdn.net/sysuzhyupeng/article/details/70340598
代码如下:
function getType(obj){
//tostring会返回对应不同的标签的构造函数
var toString = Object.prototype.toString;
var map = {
'[object Boolean]' : 'boolean',
'[object Number]' : 'number',
'[object String]' : 'string',
'[object Function]' : 'function',
'[object Array]' : 'array',
'[object Date]' : 'date',
'[object RegExp]' : 'regExp',
'[object Undefined]': 'undefined',
'[object Null]' : 'null',
'[object Object]' : 'object'
};
if(obj instanceof Element) {
return 'element';
}
return map[toString.call(obj)];
}
function deepClone(data){
var type = getType(data);
var obj;
if(type === 'array'){
obj = [];
} else if(type === 'object'){
obj = {};
} else {
//不再具有下一层次
return data;
}
if(type === 'array'){
for(var i = 0, len = data.length; i < len; i++){
obj.push(deepClone(data[i]));
}
} else if(type === 'object'){
for(var key in data){
obj[key] = deepClone(data[key]);
}
}
return obj;
}
以上代码完善简洁,在此记录一下
网友评论