JS中的深拷贝和浅拷贝

为什么要使用深拷贝和浅拷贝

在使用JS的过程中，我们有时候想要去备份一份原引用数据，但是我们会发现，当我们改变原数据的值时，会发现我们备份的数据也会跟着发生变化，而我们想要的是互不干扰的两份数据，比如两份相同的电脑文档，是一个独立的个体，修改其中一个，另外一个并不会因此受到影响。下面是举例。
例：

    // 原数组arr1
    var arr1 = [1, 2, 3, 4];
    // 复制的arr2
    var arr2 = arr1;
    console.log(arr2);
    arr1.push("123");
    console.log(arr1);
    console.log(arr2);

我们会在浏览器的控制台上得到如下的结果：

我们可以很明显的看出arr1为原数组，arr2为拷贝arr1的数组，我们改变了arr1的值，再次输出arr2，会发现arr2的值也发生了改变，这很明显并不是我们的本意，我们想要的两个独立的个体，在此例子简单的就是我们想要的是，改变arr1的值，arr2不会跟着改变。所以为了解决这种问题，我们需要用到浅拷贝和深拷贝的知识。

浅复制（浅拷贝）

浅拷贝是怎么实现的呢，其实很简单，原理就是，我们新建一个空的数组或者对象，然后把原引用数据的值装进新的数组或者对象中。

    function lightCopy(copyVal, newVal) {
        newVal = (copyVal instanceof Array) ? [] : {};
        for (var ins in copyVal) {
            newVal[ins] = copyVal[ins]
        }
        return newVal
    }
    var arr1 = [1,2,3,4,5];
    var arr2 = lightCopy(arr1);
    console.log(arr2);
    arr1.push(99);
    console.log(arr1);
    console.log(arr2);

同过控制台，我们可以看到：

我们可以很明显的看到arr2为复制后的数组，我们再改变原数组arr1的数组，可以看到只有arr1发生改变。arr2是不发生改变的。这就是浅拷贝，此方法也同样适用于对象。这时候我们又突发奇想了，如果我们遇到下面这样的情况，浅拷贝还能成功的完成吗？
arr = [1,2,3,[4,5,6]];
我们先来尝试一下

可以看到当我们改变原数组的值时，copy后的数组也会跟着改变，很显然，当我们遇见引用值中套用引用值时，浅复制时无法使用的，是不成功的，那么我们就需要另外一种复制，深复制

 var arr1 = [1,2,3,[4,5],{name: "张三"}]
    function deepCopy(copyVal , newVal){
        newVal = (copyVal instanceof Array) ? [] : {};
        for(var ins in copyVal){
            // console.log(copyVal[ins])
            if(typeof copyVal[ins] != "object"){
                newVal[ins] = copyVal[ins]
            }else{
                newVal[ins] = deepCopy(copyVal[ins])
            }
        }
        return newVal
    };
    var arr2 = deepCopy(arr1);
    arr1[3].push(100000)
    console.log(arr2);

在深复制中我们利用的知识就是，我们需要判断引用值里面的值的typeof返回值，如果不是object的话，就代表它是一个字符串，数字，或者是布尔值，那么我们直接放进新的数组就可以，如果是object，那么就需要再次调用函数，直到每个值都被复制（特别说明：在这里我们不考虑null和undefined的情况）
我们在浏览器控制台上会得到这样的结果；

我们可以看到，我们改变与原数组arr1中的[4,5]中的值，但是我们输出copy后的值，会发现arr2的值并不受影响，两个数组都是独立的数组，彼此不受影响，如此，我们便成功的进行了深复制。
以上就是关于深浅复制的内容！