【js】深拷貝和淺拷貝區別,以及實現深拷貝的方式


一、區別:簡單點來說,就是假設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.基本類型--名值存儲在棧內存中,例如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.我們怎么去實現深拷貝呢,這里可以遞歸遞歸去復制所有層級屬性。

這么我們封裝一個深拷貝的函數

復制代碼
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庫。

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM