浅拷贝和深拷贝是针对数组和对象而言的。对象的浅拷贝只复制了一层对象的属性,对于Array和Object这些引用类型值拷贝的是一个在内存中的地址。而深拷贝会把对象的属性通过递归的方式逐个复制,包括引用类型值。
浅拷贝
function shallowCloneObj(obj) {
var cloneObj = {};
for(var i in obj) {
cloneObj[i] = obj[i]
}
return cloneObj
}
var o = {a:1,b:2,c:[1,2,3]};
var o1 = shallowCloneObj(o);
o.a = 'hello';
o.c[0] = 4;
console.log(o, o1); // {a:'hello',b:2,c:[4,2,3]} {a:1,b:2,c:[4,2,3]}
深拷贝
【方法1】
function clone(obj, cloneObj = {}) {
for(var key in obj) {
if(typeof obj[key] === 'object') {
cloneObj[key] = (obj[key] instanceof Array) ? [] : {};
clone(obj[key], cloneObj[key])
}else{
cloneObj[key] = obj[key]
}
}
return cloneObj
}
// 使用
var o = { num: 1, arr: ['hello', 'world'], obj: { age: 10 } }
var o1 = deepCloneObj(o)
o.arr[0] = 'HELLO'
o.obj.age = 15
console.log(o, o1)
// { num: 1, arr: ['HELLO', 'world'], obj: { age: 15 } }
// { num: 1, arr: ['hello', 'world'], obj: { age: 10 } }
【方法2】
使用JSON全局对象的parse和stringify方法实现深拷贝,可以处理能够被json表示的数据结构。
function jsonClone(obj) {
return JSON.parse(JSON.stringify(obj));
}
// 使用
var o = { num: 1, arr: ['hello', 'world'], obj: { age: 10 } }
var o1 = jsonClone(o)
o.arr[0] = 'HELLO'
o.obj.age = 15
console.log(o, o1)
// { num: 1, arr: ['HELLO', 'world'], obj: { age: 15 } }
// { num: 1, arr: ['hello', 'world'], obj: { age: 10 } }