JavaScript中的深拷贝与浅拷贝

JavaScript中的深拷贝与浅拷贝

参考博客：https://www.cnblogs.com/echolun/p/7889848.html

1.什么是深拷贝与浅拷贝

  假设B复制了A，当修改A时，看B是否会发生变化。

1. 深拷贝：B不随A改变
2. 浅拷贝：B随着A改变

2.浅拷贝的产生的原因

  根据引用类型的性质我们可以知道，令b=a仅仅能使b通过复制获得a的引用地址，或者说是指向a的内容的指针，因此会形成浅拷贝。

3.一些特殊情况

  array.slice()和array.concat()都可以对一级属性实现深拷贝，但是对其他属性则依旧是浅拷贝。

4.实现深拷贝的方法

1. JavaScript封装一个深拷贝函数

function deepClone(obj){
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj === "object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判断ojb子元素是否为对象，如果是，递归复制
                if(obj[key] && typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }
                else{
                    //如果不是，简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}    

2. 使用JSON对象的parse和stringify

function deepClone(obj){
    let _obj = JSON.stringify(obj),
        objClone = JSON.parse(_obj);
    return objClone
}    

3. 使用jQuery的extend方法

$.extend( [deep], target, object1 [, objectN ] );
let a=[0,1,[2,3],4],
    b=$.extend(true,[],a);

其中，deep表示是否深拷贝，为true为深拷贝，为false，则为浅拷贝；target为目标对象，其他对象的成员属性将被附加到该对象上；object1 object（可选）第一个以及第N个被合并的对象。