js浅拷贝(地址引用)和深拷贝(克隆)

Posted 2020-09-05 学无止尽tpf

浅拷贝和深拷贝相对于引用类型而言的。

js有两大类型值类型（基本数据类型）和引用类型（object，function，array）；

值类型保存在栈上，引用类型保存在堆上。

浅拷贝只是单纯的拷贝对象的地址。

//对象的浅拷贝                                                              
var aa = { name: \'aa\', age: 26, dx: { dxName: \'dxName\', dxAge: 24 } };
var bb = aa;    
console.log(bb===aa); 　　　　//true //这里表示是指向的同一个地址                                                      
console.log(bb.name);        //aa                                      
bb.name=\'bb\';                                                         
console.log(aa.name);        //bb                                      
console.log(bb.name);        //bb                                      

对象保存在堆上面，而aa变量只是保存的aa对象的地址6ff65a1c;

bb=aa只是把地址6ff65a1c给了bb，所以指向的还是同一个对象，所以改了bb.name，aa.name也跟着变化了。

 

深拷贝是把对象完全复制一份。

var a = { name: \'aa\', age: 26, dx: { dxName: \'dxName\', dxAge: 24 } }; 
var b = new Object();                                                 
                                                                      
b.name = a.name;                                                      
b.age = a.age;                                                        
b.dx = {};                //开辟一块空间，然后复制                                 
b.dx.dxName=a.dx.dxName;                                              
b.dx.dxAge=a.dx.dxAge;                                                
                                                                      
b.name = \'bb\';                                                        
b.dx.dxAge = 30;                                                      
console.log(a===b);                                                   
console.log(\'a\');                                                     
console.log(a);                                                       
console.log(\'b\');                                                     
console.log(b);                                                       

由于b是拿到的是a的一个副本，所以改变b不会影响的a

var deepCopy = function (source) {    //深拷贝函数                                                    
    var result = {};                                                                           
    for(var key in source) {                                                                   
        //递归把object类型的值复制出来，这里没考虑function类型                                                    
        result[key] = typeof(source[key]) === \'object\' ? deepCopy(source[key]) : source[key];  
    }                                                                                          
    return result;                                                                             
}                                                                                              

var a = { name: \'aa\', age: 26, dx: { dxName: \'dxName\', dxAge: 24 } }; 
/*var b = new Object();                                               
                                                                      
b.name = a.name;                                                      
b.age = a.age;                                                        
b.dx = {};                //开辟一块空间，然后复制                                 
b.dx.dxName=a.dx.dxName;                                              
b.dx.dxAge=a.dx.dxAge;*/                                              
var b=deepCopy(a);                                                    
                                                                      
b.name = \'bb\';                                                        
b.dx.dxAge = 30;                                                      
console.log(a===b);                                                   
console.log(\'a\');                                                     
console.log(a);                                                       
console.log(\'b\');                                                     
console.log(b);                                                       

数组的浅拷贝和深拷贝

//数组浅拷贝                                                                          
var arr = ["One", "Two", "Three"];                                               
var arrto = arr;                                                                 
arrto[1] = "test";                                                               
document.writeln("数组的原始值：" + arr + "<br />"); //Export:数组的原始值：One,test,Three     
document.writeln("数组的新值：" + arrto + "<br />"); //Export:数组的新值：One,test,Three     
                                                                                 
//数组深拷贝                                                                          
var arr2 = ["One", "Two", "Three"];                                              
var arrtoo = arr.slice(0);                                                       
arrtoo[1] = "set Map";                                                           
document.writeln("数组的原始值：" + arr2 + "<br />"); //Export:数组的原始值：One,Two,Three     
document.writeln("数组的新值：" + arrtoo + "<br />"); //Export:数组的新值：One,set Map,Three