深拷贝与浅拷贝的区别

1.基本数据类型

String、Number、Boolean、Undefined、Null

2.引用数据类型

Function、Array、Object

3.浅拷贝

浅拷贝就是拷贝一个对象的数据，但是两者的指针会指向同一个引用地址。假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝。

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

当赋值操作b=a时，数组b能够得到数组a的数据，但是当数组a中的数据改变时，会导致数组b的数组也跟着改变，因为两个数组都指向了同一个引用地址。

4.实现深拷贝

深拷贝就是使数组a发生改变时，数组b不会跟着发生改变。
（1）递归实现深拷贝

function deepClone(obj){
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判断ojb子元素是否为对象，如果是，递归复制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是，简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}    
let a=[1,2,3,4],
    b=deepClone(a);
a[0]=2;
console.log(a,b);

（2）slice实现深拷贝？？？

var a = [1,2,3,4];
var b = a.slice(0); // 返回从下标0开始一直到末尾的元素组成的新数组
a[0] = 99;
console.log(b); // [1,2,3,4]

上述代码很明显数组b中的值没有随a的改变而改变，但是这样就说明实现了深拷贝了吗？那么再看一段代码。

var c = [1,2,[3,4],5];
var d = c.slice(0);
c[0] = 888;
c[2][0] = 999;
console.log(d) // [1,2,[999,4],5];

拷贝的不彻底啊，b对象的一级属性确实不受影响了，但是二级属性还是没能拷贝成功，仍然脱离不了a的控制，说明slice根本不是真正的深拷贝。
（3）借助JSON对象的parse和stringify函数

var a = [1,2,3,4];
var temp = JSON.stringify(a);// "[1,2,3,4]" 此处是字符串string类型
var b = JSON.parse(temp); // [1,2,3,4] 此处是数组Array类型
a[0]=999;
console.log(b[0]); // 1

此时数组b也不随着a的改变而改变了
（4）利用JQuery库的$.extend()函数
$.extend( [deep ], target, object1 [, objectN ] )

• deep表示是否深拷贝，为true为深拷贝，为false，则为浅拷贝
• target Object类型 目标对象，其他对象的成员属性将被附加到该对象上。
• object1 objectN可选。 Object类型 第一个以及第N个被合并的对象。

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

5.总结

说了这么多，了解深拷贝也不仅仅是为了应付面试题，在实际开发中也是非常有用的。例如后台返回了一堆数据，你需要对这堆数据做操作，但多人开发情况下，你是没办法明确这堆数据是否有其它功能也需要使用，直接修改可能会造成隐性问题，深拷贝能帮你更安全安心的去操作数据，根据实际情况来使用深拷贝，大概就是这个意思。
本文转自【深拷贝与浅拷贝的区别】

本文纯属记录自己学习的过程，若有不懂之处，请跳转至上述原文链接。