js中的浅拷贝和深拷贝

在讨论js的浅拷贝之前，我们先来看一下js的数据类型。

 

一、js的数据类型

　　

• 基本数据类型：存放在栈里面，里面直接开辟一个空间，存放的是值。栈是有结构的，每个区块都是按照后进先出的方式次序存放，基本类型的数据相对是比较稳定的，占的内存也比较小，所有寻找速度比较快，如果基本类型复制的话，栈中重新开辟个新的内存空间来储存新复制的新值，所以两者是独立的，没有任何关联！
• 引用类型：存放在堆里面，首先在栈里面存放地址（十六进制表示），地址在指向堆里面的实例，真正的对象实例存放在堆空间中。堆是没有结构的，数据可以任意存放，我们常常实际操作的是引用而不是操作实际的对象！你可以这么理解，栈中保存着一个地址，这个地址指向堆中的对象，如果复制的是引用类型，那么复制的是栈内存中的引用地址，两个引用地址指向的还是同一个对象！

 

二、什么是深拷贝和浅拷贝？

　　深拷贝和浅拷贝只针对引用数据类型，根本区别在于是否是真正获取了一个对象的复制实体，而不是引用。

       简单来说，假设我们有两个对象A和B,把A复制给B，当我们修改B里面的值时，如果A发生了改变，那么就是浅拷贝，A没有改变则是深拷贝。

 

三、实现浅拷贝

　　直接赋值

var arr1 = [1,2,3];
var arr2 ;
arr2 = arr1;
arr2[0] = 9;
console.log(arr1);//[9,2,3]
console.log(arr2);//[9,2,3]

　　可以看出我们只是对arr2的值进行了改变，但是输出发现arr1的值也发生了改变。实际上当我们把arr1复制给arr2时，只是把指向[1,2,3]这个数值的地址赋给了arr2，就相当于arr1和arr2都指向了这个数值，当我们通过arr2改变这个数值时，再通过arr1去拿也就是改变后的值。

 

四、实现深拷贝

　　1、采用递归去拷贝所有层级属性

function deepClone(obj){
    //Array.isArray() 用于确定传递的值是否是一个 Array。
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            //hasOwnProperty()方法来忽略继承属性。
            if(obj.hasOwnProperty(key)){
                //判断ojb子元素是否为对象，如果是，递归复制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是，简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}
let a=[1,2,3,4],
        b=deepClone(a);
a[0]=2;
console.log(a,b);

 

　　2、JSON对象的parse和stringify

function deepClone(obj){
    let _obj = JSON.stringify(obj),
        objClone = JSON.parse(_obj);
    return objClone
}    
let a=[0,1,[2,3],4],
    b=deepClone(a);
a[0]=1;
a[2][0]=1;
console.log(a,b);

 

 

标签：obj,key,objClone,js,arr2,arr1,拷贝
来源： https://www.cnblogs.com/WuAnqi/p/15439332.html