Javascript 深拷贝和浅拷贝以及解决方案

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

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

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

二、对象实现浅拷贝

const obj1 = {a:1,b:2};
const obj2 = obj1
obj2.a = 2
console.log(obj1);//[a:2,b:2]
console.log(obj2);//[a:2,b:2]

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

三、对象实现深拷贝

方法1：将对象类型的变量转化为字符串，再转回对象类型然后赋值给另外一个变量

const obj1 = {
    a: 1,
    b:undefined,
    arr:[1,2,4],
    fun:() => {}
}
const obj2 = JSON.parse(JSON.stringify(obj1));
obj2.a = 2
obj2.arr[0] = 111;
console.log(obj1, obj2)

结果：

obj1
{
    a: 1,
    arr: [1,2,4],
    b: undefined,
    fun: () => {}
}

obj2
{
    a: 2,
    arr: [111,2,4]
}

缺点：数据类型为function 或这数组值为undefined的情况下无法复制

方法2：使用Object.assign 方法

const obj1 = {
    a: 1,
    b:undefined,
    arr:[1,2,4],
    fun:() => {}
}
const obj2 = Object.assign({},obj1);
obj2.a = 2
obj2.arr[0] = 111;
console.log(obj1, obj2)

结果：

obj1
{
    a: 1,
    arr: [111,2,4],
    b: undefined,
    fun: () => {}
}

obj2
{
    a: 2,
    arr: [111,2,4],
    b: undefined,
    fun: () => {}
}

缺点：只能深拷贝一级属性，二级以上属性（引用类型）就是浅拷贝

方法3：使用扩展运算符

const obj1 = {
    a: 1,
    b:undefined,
    arr:[1,2,4],
    fun:() => {}
}
const obj2 = {...obj1};
obj2.a = 2
obj2.arr[0] = 111;
console.log(obj1, obj2)

结果：

obj1
{
    a: 1,
    arr: [111,2,4],
    b: undefined,
    fun: () => {}
}

obj2
{
    a: 2,
    arr: [111,2,4],
    b: undefined,
    fun: () => {}
}

 缺点：只能深拷贝一级属性，二级以上属性（引用类型）就是浅拷贝

4.递归（较为完美的解决方案）

const obj1 = {
    a: 1,
    b:undefined,
    arr:[1,2,4],
    fun:() => {}
}

const obj2 = CloneDeep(obj1);
obj2.a = 2
obj2.arr[0] = 111;
console.log(obj1, obj2)


function CloneDeep(data){
    const newData = Array.isArray(data) ? [] : {};
    for(let key in data) {
        if(data[key] && typeof data[key] === "object"){
            newData[key] = CloneDeep(data[key]);
        }else{
            newData[key] = data[key]
        }
    }
    return newData
}

结果：
obj1
{
    a: 1,
    arr: [1,2,4],
    b: undefined,
    fun: () => {}
}

obj2
{
    a: 2,
    arr: [111,2,4],
    b: undefined,
    fun: () => {}
}

四、 数组实现深拷贝

方式与上述对象的深拷贝方式一样，多了两个解决方案，如下：

const arr1 = [1,2,3,4,undefined,{b:undefined,func:() => {}}];
const arr2 = arr1.concat();
arr2[0] = 2
arr2[5].b = 2

console.log(arr1,arr2)



/*******************************************************/

const arr1 = [1,2,3,4,undefined,{b:undefined,func:() => {}}];
const arr2 = arr1.slice();
arr2[0] = 2
arr2[5].b = 2

console.log(arr1,arr2)


两种方式结果相同：

[1,2,3,4,undefined,{b:2,func:() => {}}]

[2,2,3,4,undefined,{b:2,func:() => {}}]

缺点：只能深拷贝一级属性，二级以上属性（引用类型）就是浅拷贝 

所以数组的深拷贝完美解决方案依然是递归