JS - 什么是深拷贝和浅拷贝?

什么是深拷贝和浅拷贝?

什么是拷贝
拷贝就是一个变量的值传给另外一个变量。

深拷贝和浅拷贝的区别
深拷贝:浅拷贝是指把存放变量的地址值传给被赋值,最后两个变量引用了同一份地址;

浅拷贝:深拷贝是指被赋值的变量开辟了另一块地址用来存放要赋值的变量的值(内容)。在python中引用copy模块,copy模块中有deepcopy()方法,调用它完成变量的深copy,观察变量地址

简单来说,深拷贝就是拷贝者和被拷贝者发生改变的时候,相互不会受到影响
浅拷贝,就是会因拷贝者和被拷贝者的改变而改变

如何区分?

首先深复制和浅复制只针对像 Object, Array 这样的复杂对象的。简单来说,浅复制只复制一层对象的属性,而深复制则递归复制了所有层级。
浅拷贝:

var obj = {
 a:1, 
arr: [2,3]
 };
var shallowObj = shallowCopy(obj);

function shallowCopy(src) {
  var dst = {};
  for (var prop in src) {
    if (src.hasOwnProperty(prop)) {
      dst[prop] = src[prop];
    }
  }
  return dst;
}

结果:

shallowObj.arr[1] = 5;
obj.arr[1]   // = 5

因为浅复制只会将对象的各个属性进行依次复制,并不会进行递归复制,而 JavaScript 存储对象都是存地址的,所以浅复制会导致 obj.arr 和 shallowObj.arr 指向同一块内存地址、

而深复制则不同,它不仅将原对象的各个属性逐个复制出去,而且将原对象各个属性所包含的对象也依次采用深复制的方法递归复制到新对象上。这就不会存在上面 obj 和 shallowObj 的 arr 属性指向同一个对象的问题。

var obj = { a:1, arr: [1,2] };
var obj2 = deepCopy(obj);

需要注意的是,如果对象比较大,层级也比较多,深复制会带来性能上的问题。在遇到需要采用深复制的场景时,可以考虑有没有其他替代的方案。在实际的应用场景中,也是浅复制更为常用。

如何封装一个深拷贝?
递归实现深拷贝分装的作用 实现多层复杂的数据类型的深拷贝

        function deepCopy(data){
            if(data.constructor.name === 'Array'){//为数组
                var arrCopy=[]
                for(var i=0,len=data.length;i<len;i++){
                    if(data[i] instanceof Object)//数组或者对象
                    {
                        arrCopy.push(deepCopy(data[i]))
                    }else{
                        arrCopy.push(data[i])
                    }
                }
                return arrCopy;
              
            }else{//为对象
                var  objCopy={}
                for(x in data){
                    if(data[x] instanceof Object){
                        objCopy[x]=deepCopy(data[x])
                    }else{
                        objCopy[x]=data[x]
                    }
                    
                }
                
            }
        return objCopy;
    
        }
        var a=deepCopy(data)
        // 方法的作用:实现多层复杂的数据类型的深拷贝
        var data=[
            {
                'list':[{name:'yq',age:18},{name:'lwb',age:23}]
        }
    ]

猜你喜欢

转载自blog.csdn.net/qq_44352182/article/details/89564781