【JS】深拷貝與淺拷貝的區別，實現深拷貝的幾種方法

 壹 ❀ 引

如何區分深拷貝與淺拷貝，簡單點來講，就是假設B複製了A，當修改A時，看B是否會發生變化，若是B也跟着變了，說明這是淺拷貝，拿人手短，若是B沒變，那就是深拷貝，自食其力。

此篇文章中也會簡單闡述到棧堆，基本數據類型與引用數據類型，由於這些概念能更好的讓你理解深拷貝與淺拷貝。

咱們來舉個淺拷貝例子：

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

 

嗯？明明b複製了a，爲啥修改數組a，數組b也跟着變了，這裏我不由陷入了沉思。

那麼這裏，就得引入基本數據類型與引用數據類型的概念了。

 貳 ❀ 基本數據與複雜(引用)數據

面試常問，基本數據類型有哪些，number，string，boolean，null，undefined，symbol以及將來ES10新增的BigInt(任意精度整數)七類。

引用數據類型(Object類)有常規名值對的無序對象{a:1}，數組[1,2,3]，以及函數等。

而這兩類數據存儲分別是這樣的：

a.基本類型--名值存儲在棧內存中，例如let a=1;

當你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.咱們怎麼去實現深拷貝呢，這裏能夠遞歸遞歸去複製全部層級屬性。

這麼咱們封裝一個深拷貝的函數(PS：只是一個基本實現的展現，並不是最佳實踐)

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庫。

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

 肆 ❀ 總

那麼到這裏，咱們知道了深拷貝與淺拷貝的區別，同時從數據存儲規則來解釋，也明白了爲何要使用深拷貝；其次，咱們知道了幾種簡單粗暴的深拷貝辦法，也明白在何種狀況下咱們應該使用深拷貝。

對於文章中簡單說起的棧堆概念，我專門整理了一篇關於JS內存空間的文章，如有興趣歡迎閱讀 JS 從內存空間談到垃圾回收機制 這篇文章。

其實stringify與parse在平常開發中使用特別頻繁，若是你們對於它兩還有不解，能夠閱讀博主 json.stringify()的妙用，json.stringify()與json.parse()的區別 這篇文章。

 伍 ❀ 參考

本文算是我的對於深淺拷貝的學習筆記整理，這裏借用瞭如下資料的思想。

【 js 基礎 】 深淺拷貝

js面試題：實現對象深度克隆（deepClone）的三種方案

javascript中的深拷貝和淺拷貝？