一、區別：簡單點來說，就是假設B複製了A，當修改A時，看B是否會發生變化，如果B也跟著變了，說明這是淺拷貝，如果B沒變，那就是深拷貝。

此篇文章中也會簡單闡述到棧堆，基本資料型別與引用資料型別，因為這些概念能更好的讓你理解深拷貝與淺拷貝。

例如：

let a=[0,1,2,3,4],
    b=a;
console.log(a===b);   //  true
a[0]=1;
console.log(a,b);   // a: [1,1,2,3,4] b:[1,1,2,3,4]    淺拷貝   

二·、從基本型別和引用的資料儲存上面區別理解： 

     a.基本型別--名值儲存在棧記憶體中

當你b=a複製時，棧記憶體會新開闢一個記憶體，例如這樣：

所以當你此時修改a=2，對b並不會造成影響，因為此時的b已自食其力，翅膀硬了，不受a的影響了。當然，let a=1,b=a;雖然b不受a影響，但這也算不上深拷貝，因為深拷貝本身只針對較為複雜的object型別資料。

b.引用資料型別--名存在棧記憶體中，值存在於堆記憶體中，但是棧記憶體會提供一個引用的地址指向堆記憶體中的值，我們以上面淺拷貝的例子畫個圖：

當b=a進行拷貝時，其實複製的是a的引用地址，而並非堆裡面的值。

而當我們a[0]=1時進行陣列修改時，由於a與b指向的是同一個地址，所以自然b也受了影響，這就是所謂的淺拷貝了。

那，要是在堆記憶體中也開闢一個新的記憶體專門為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);

可以看到

跟之前想象的一樣，現在b脫離了a的控制，不再受a影響了。
這裡再次強調，深拷貝，是拷貝物件各個層級的屬性，可以看個例子。JQ裡有一個extend方法也可以拷貝物件，我們來看看

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

那是不是說slice方法也是深拷貝了，畢竟b也沒受a的影響，上面說了，深拷貝是會拷貝所有層級的屬性，還是這個例子，我們把a改改

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

拷貝的不徹底啊，b物件的一級屬性確實不受影響了，但是二級屬性還是沒能拷貝成功，仍然脫離不了a的控制，說明slice根本不是真正的深拷貝。

這裡引用知乎問答裡面的一張圖

第一層的屬性確實深拷貝，擁有了獨立的記憶體，但更深的屬性卻仍然公用了地址，所以才會造成上面的問題。

同理，concat方法與slice也存在這樣的情況，他們都不是真正的深拷貝，這裡需要注意。

2.除了遞迴，我們還可以借用JSON物件的parse和stringify

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

可以看到，這下b是完全不受a的影響了。

附帶說下，JSON.stringify與JSON.parse除了實現深拷貝，還能結合localStorage實現物件陣列儲存。有興趣可以閱讀部落格這篇文章。

localStorage儲存陣列，物件，localStorage,sessionStorage儲存陣列物件

3.除了上面兩種方法之外，我們還可以借用JQ的extend方法。

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

deep表示是否深拷貝，為true為深拷貝，為false，則為淺拷貝

target Object型別 目標物件，其他物件的成員屬性將被附加到該物件上。

object1  objectN可選。 Object型別 第一個以及第N個被合併的物件。 

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

可以看到，效果與上面方法一樣，只是需要依賴JQ庫。

說了這麼多，瞭解深拷貝也不僅僅是為了應付面試題，在實際開發中也是非常有用的。例如後臺返回了一堆資料，你需要對這堆資料做操作，但多人開發情況下，你是沒辦法明確這堆資料是否有其它功能也需要使用，直接修改可能會造成隱性問題，深拷貝能幫你更安全安心的去操作資料，根據實際情況來使用深拷貝，大概就是這個意思。