object深复制与浅复制

时间:2022-08-23 14:48:43

问题由来

Javascript中对一个对象赋值,会存在以下问题

        var obj1 = {
a: '1',
b: '2',
c:{
d:'3',
e:'4'
}
}
var obj2 = obj1;
console.log(obj2.c.d ); //3
console.log(obj2.c.d === '3'); //true

obj1.c.d = '33'
console.log(obj2.c.d ); //33
console.log(obj2.c.d === '3');//false

当你对一个对象进行赋值操作,其实并没有将这个对象在内存中重新拷贝一份出来,而是将原来内存的指针赋值,也就是说,obj1和obj2 在内存中指向的是同一个地方,那么如果一个发生修改,另一个也会发生变化。这就是浅复制。

那么如果可以复制一个obj 并不和原来的对象相关联那么就叫做深复制

··· 是我自己的理解

怎么进行深复制

我们平时的赋值都是浅复制,那怎么进行深复制呢?

方法一:jquery $.extend() 可以用参数来进行深复制

jQuery.extend第一个参数可以是布尔值,用来设置是否深度拷贝的:
jQuery.extend(true, { a : { a : "a" } }, { a : { b : "b" } } ); //深复制
jQuery.extend( { a : { a : "a" } }, { a : { b : "b" } } ); //浅复制

方法二:通过递归的方法

        var obj1 = {
a: '1',
b: '2',
c:{
d:'3',
e:'4'
}
}
//深复制,要想达到深复制就需要用递归
function deepCopy(o,c){
var c = c || {}
for(var i in o){
if(typeof o[i] === 'object'){
//要考虑深复制问题了
if(o[i].constructor === Array){
//这是数组
c[i] =[]
}else{
//这是对象
c[i] = {}
}
deepCopy(o[i],c[i])
}else{
c[i] = o[i]
}
}
return c
}

var obj2 = {}
obj2 = deepCopy(obj1,obj2)
console.dir(obj2)
obj1.a = '111';
console.dir(obj1)
console.dir(obj2)

object深复制与浅复制

方法三:

var obj2 = JSON.parse(JSON.stringify(obj1))

深复制函数

    var cloneObj = function(obj){
var str, newobj = obj.constructor === Array ? [] : {};
if(typeof obj !== 'object'){
return;
} else if(window.JSON){
str = JSON.stringify(obj),
newobj = JSON.parse(str);
} else {
for(var i in obj){
newobj[i] = typeof obj[i] === 'object' ?
cloneObj(obj[i]) : obj[i];
}
}
return newobj;
};