JavaScript 深拷贝与浅拷贝

深拷贝与浅拷贝

简单区分

深拷贝与浅拷贝的简单区分：

假设B复制了A，当修改A时，看B是否跟着改变：
若B也跟着改变，说明是浅拷贝；
若B没有变化，说明是深拷贝。

注意：一般情况下，深拷贝只针对较为复杂的object类型数据。

js数据类型

js中，有基本数据类型以及引用数据类型

基本数据类型

字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）
Symbol（ES6引入的新的原始数据类型，表示独一无二的值，主要用于解决属性名冲突的问题，作为标记）
BigInt（ES2020新增加的，是比Number类型支持范围更大的整数值）

引用数据类型

对象（Object）,其中包含了日期（Date）、函数（Function)、数组（Array）、正则（RegExp）等.

两者存储上的区别

基本数据类型：存储在栈中的简单数据段，它们的值直接存储在变量访问的位置

原因：基本类型数据占据的空间是固定的，所以将他们存储在较小的内存区域——栈，便于迅速查寻变量的值

基本数据类型的名与值都存储在栈内存中，例如：let a=1

当执行b=a时，b复制a的值，栈内存会新开辟一个内存给b

此时，b已经有了独立的存储空间，不受a的影响了，当修改a的值为a=2时，对b并不会造成影响。

虽然b不受a影响，但这也算不上深拷贝，因为深拷贝本身只针对较为复杂的object类型数据。

引用数据类型：存储在堆中的对象，存储在变量处的值是一个指针，指向存储对象的内存地址

原因：引用类型数据的大小会改变，不能把它放在栈中，否则会降低变量查寻速度，相反，地址的大小是固定的，可以存在栈中。

引用数据类型的名存储在栈内存中，值存储在堆内存中，栈内存会提供一个引用地址指向堆内存中的值。例如：

let a=[0,1,2,3],
b=a;
console.log(a===b);
a[0]=1;
console.log(a,b);

let a=[0,1,2,3]

当执行b=a时，即b复制a,b复制了a的引用地址，而并非堆内存中的值。

当使用a[0]=1进行数组修改时，由于a与b指向的是同一个地址，所以b也受影响，这也就是浅拷贝。

在实际开发中，深拷贝是非常有用的。例如后台返回了一堆数据，你需要对这堆数据做操作，但在多人开发情况下，你是没办法明确这堆数据是否有其它功能也需要使用，直接修改可能会造成隐性问题，深拷贝能帮你更安全安心的去操作数据，可以根据实际情况来使用深拷贝。

js实现深拷贝

（1）递归复制所有的层级属性（一层层地复制对象中的属性，直到值为基础类型）

//使用递归的方式实现数组、对象的深拷贝
function deepClone(obj) {
//判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝
    var objClone = Array.isArray(obj) ? [] : {};
    //进行深拷贝的不能为空，并且是对象
    if (obj && typeof obj === "object") {
        for (key in obj) {
            if (obj.hasOwnProperty(key)) {
                if (obj[key] && typeof obj[key] === "object") {
          objClone[key] = deepClone1(obj[key]);
                } else {
                objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}  

常用方法：

（1）借助JSON对象的parse和stringify方法

利用js的内置对象JSON来进行数组对象的深拷贝（无法实现对象中方法的深拷贝）

先来看看JSON对象parse和stringify的用法：

stringify() → JavaScript对象序列化为JSON字符串

parse() → 把JSON字符串解析为原生JavaScript值

例如：

let m=JSON.stringify([1,2,3])
console.log(m)
console.log(typeof(m))
let n=JSON.parse(m)
console.log(n)
console.log(typeof(n))

实现深拷贝：

function deepClone(obj) {   
    var _obj = JSON.stringify(obj),  
    console.log(_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);

（2）jQuery的extend方法

$.extend( [deep ], target, object1 [, objectN ] )

deep表示是否深拷贝，为true为深拷贝，为false，则为浅拷贝

target Object类型是目标对象，其他对象的成员属性将被附加到该对象上。

let a=[0,1,[2,3],4],
    b=$.extend(true,[],a);
a[0]=1;
a[2][0]=1;
console.log(a,b);

效果同上。

（3）Obiect.assign()拷贝
当对象中只有一级属性，没有二级属性的时候，此方法为深拷贝，但是对象中有对象的时候，此方法，在二级属性以后就是浅拷贝.

let obj1 = { a: 1 };
let obj2 = Object.assign({}, obj1);
console.log(obj2)  // { a: 1 }

obj1.a = 2;
console.log(obj1)  // { a: 2 }
console.log(obj2)  // { a: 1 }

Object.assign({}, obj1)的意思是先建立一个空对象{}，接着把obj1中所有的属性复制过去，所以obj2会长得跟obj1一样，这时候再修改obj2.b也不会影响obj1。

let obj1 = { a: { b : 1 }, c: 1 };
let obj2 = Object.assign({}, obj1);
console.log(obj2)  // { a: { b: 1 }, c: 1 }

obj1.a.b = 2;
obj1.c = 3
console.log(obj1)  // { a: { b: 2 }, c: 3 }
console.log(obj2)  // { a: { b: 2 }, c: 1 }

可以看出，对象里面有二级属性的时候，里面的值还是会改变，这不是真正的深拷贝。