js深复制和浅复制/深克隆和浅克隆

什么是深复制和浅复制

1.浅复制：对a进行了复制之后，更改复制出来的b，原来的a也会发生改变。
2.深复制：对a进行了复制之后，更改复制出来的b，原来的a不会发生改变。

让我们来看一个例子：

			var arr = [1,2,3];
			var newArr = arr;
			newArr.push(4);
			console.log(arr,newArr); //[1,2,3,4],[1,2,3,4]

我们发现修改newArr之后，arr也跟着改变了，这就是浅复制。

那么为什么会出现这样的情况呢？

这里就需要先了解一下js里的基本数据类型和引用数据类型

js数据类型

基本数据类型

其中五种基本数据类型：string、number、null、undefine、boolean
基本数据类型值是存储在栈内存中的
复制时直接复制存储在栈内存中的值
所以把a的值赋值给b后，b的修改，不会影响到a
所以对于基本数据类型来说，不存在浅复制和深复制之分

引用数据类型

一种复杂的数据类型（引用数据类型）：object(array,function,object)
引用数据类型是把地址存储在栈内存中，真正的值存储在堆内存里的，栈内存的地址对应指向堆内存中的值，也就是说它是通过地址来找到对应的值的，复制时复制的只是栈内存里的地址，然而复制之后的地址还是指向原来的值。
所以把arr1赋值给arr2后，arr2的修改，会影响到arr1对应的值
所以为了当修改arr2之后arr1不受到影响，就需要在最开始的时候对arr1进行深复制

实现深度克隆的方式

1.递归

function deepClone( obj ){
    let 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] = deepClone(obj[key]);
                }else{
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}    
let a=[1,2,[2, 3],4],
    b=deepClone(a);
a[2][0]=10;
console.log(a,b);

2. JSON.stringify 和 JSON.parse

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);

3.jQuery中的 $.extend

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

参考文章参考文章：https://www.cnblogs.com/echolun/p/7889848.html