前端的浅拷贝和深拷贝

一、浅拷贝和深拷贝的区别

数据都是存储在内存当中，而我们调用数据的时候都是通过地址来调用数据。

对于浅拷贝来说，比如一个数组，只要我们修改了一个拷贝数组，那么原数组也会改变！

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

因为他们引用的是同一个地址的数据！拷贝的时候并没有给拷贝的数组创造独立的内存！
而深拷贝就与其相反，拷贝数组是存在一个独立的内存中，互不影响。

二、浅拷贝和深拷贝的原理（参考了某大大的博客并引用了他的图，手动滑稽~~）

　　浅拷贝和深拷贝一般是对于引用数据类型（如对象）来讲的，而基本数据类型（如undefined、null、number、string、boolean以及es6新增的Symbol），只要是复制，就一定是另开辟以存储空间！

①基本数据类型存储：名值都存在栈内存中

如let a = 1;

　　

当let b = a时，b复制了a，栈内存会新开辟一个内存

　　　

所以两者互不影响，修改谁都没问题！

②引用数据类型：名存在栈内存中，值存在于堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值

以上面浅拷贝的例子画图：
　　
　　

b复制了a后，b是引用了a的值的存储地址，而不是把a的值复制了下来！

　　

所以改了b，a也会受到影响。

三、实现深拷贝

　方法1、层级拷贝，用递归实现。

何为层级？如，var a = [0,1,2,[3,4],5];
　a有两层，第一层是[3,4]外围的一层；第二层是[3,4];

如果我们深拷贝的时候，这样，

    function deepClone(obj){
        let objClone = Array.isArray(obj)?[]:{};
        for(let i in obj){
            objClone[i] = obj[i];
        }
        return objClone;
    }
    var a = [0,1,2,[3,4],5];
    var b = deepClone(a);

我们得到的b它的首层是另辟存放空间的，也就是上面所说的[3,4]的外面一层存放在另开辟的存储空间中。但是[3,4]这第二层他仍然是引用数据地址，因为上面的遍历只遍历了首层！

　所以我们应该在上面的代码中加入判断，当碰到数组、对象等时递归函数。

    function deepClone(obj){
        //定义对象来判断当前的参数是数组还是对象
        let objClone = Array.isArray(obj)?[]:{};
        //如果obj存在并且为对象      
        if(obj&&typeof obj == "object"){
            for(let key in obj){
                if(obj.hasOwnProperty(key)){
                    //如果obj的子元素为对象，那么递归（层级遍历）
                    if(obj[key]&&typeof obj[key] == "object"){
                        objClone[key] = deepClone(obj[key]);
                    }else{
                    //如果不是，直接赋值
                        objClone[key] = obj[key];
                    }
                }
            }
        }   
        return objClone;
    }

方法2、JSON解析（底层原理也是层级遍历）

依旧是上面的例子，var a =  [0,1,2,[3,4],5];

var b = JSON.parse(JSON.stringify(a));

b就是拷贝的结果，修改b不影响a。但是这种方法也有缺陷：

1. 无法复制函数
2. 原型链没了，对象就是object，所属的类没了。