快捷導(dǎo)航

JS實(shí)現(xiàn)深拷貝的幾種方法介紹

更新時(shí)間：2022年06月21日 10:30:59 作者：小旭2021

這篇文章介紹了JS實(shí)現(xiàn)深拷貝的幾種方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

引

如何區(qū)分深拷貝與淺拷貝，簡(jiǎn)單點(diǎn)來說，就是假設(shè)B復(fù)制了A，當(dāng)修改A時(shí)，看B是否會(huì)發(fā)生變化，如果B也跟著變了，說明這是淺拷貝，拿人手短，如果B沒變，那就是深拷貝，自食其力。

此篇文章中也會(huì)簡(jiǎn)單闡述到棧堆，基本數(shù)據(jù)類型與引用數(shù)據(jù)類型，因?yàn)檫@些概念能更好的讓你理解深拷貝與淺拷貝。

我們來舉個(gè)淺拷貝例子：

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

嗯？明明b復(fù)制了a，為啥修改數(shù)組a，數(shù)組b也跟著變了，這里我不禁陷入了沉思。

那么這里，就得引入基本數(shù)據(jù)類型與引用數(shù)據(jù)類型的概念了。

基本數(shù)據(jù)與復(fù)雜(引用)數(shù)據(jù)

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

引用數(shù)據(jù)類型(Object類)有常規(guī)名值對(duì)的無序?qū)ο髙a:1}，數(shù)組[1,2,3]，以及函數(shù)等。

而這兩類數(shù)據(jù)存儲(chǔ)分別是這樣的：

a.基本類型--名值存儲(chǔ)在棧內(nèi)存中，例如let a=1;

當(dāng)你b=a復(fù)制時(shí)，棧內(nèi)存會(huì)新開辟一個(gè)內(nèi)存，例如這樣：

所以當(dāng)你此時(shí)修改a=2，對(duì)b并不會(huì)造成影響，因?yàn)榇藭r(shí)的b已自食其力，翅膀硬了，不受a的影響了。當(dāng)然，let a=1,b=a;雖然b不受a影響，但這也算不上深拷貝，因?yàn)樯羁截惐旧碇会槍?duì)較為復(fù)雜的object類型數(shù)據(jù)。

b.引用數(shù)據(jù)類型--名存在棧內(nèi)存中，值存在于堆內(nèi)存中，但是棧內(nèi)存會(huì)提供一個(gè)引用的地址指向堆內(nèi)存中的值，我們以上面淺拷貝的例子畫個(gè)圖：

當(dāng)b=a進(jìn)行拷貝時(shí)，其實(shí)復(fù)制的是a的引用地址，而并非堆里面的值。

而當(dāng)我們a[0]=1時(shí)進(jìn)行數(shù)組修改時(shí)，由于a與b指向的是同一個(gè)地址，所以自然b也受了影響，這就是所謂的淺拷貝了。

那，要是在堆內(nèi)存中也開辟一個(gè)新的內(nèi)存專門為b存放值，就像基本類型那樣，豈不就達(dá)到深拷貝的效果了

實(shí)現(xiàn)簡(jiǎn)單的深拷貝

1.我們?cè)趺慈?shí)現(xiàn)深拷貝呢，這里可以遞歸遞歸去復(fù)制所有層級(jí)屬性。

這么我們封裝一個(gè)深拷貝的函數(shù)(PS：只是一個(gè)基本實(shí)現(xiàn)的展示，并非最佳實(shí)踐)

function deepClone(obj){
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判斷ojb子元素是否為對(duì)象，如果是，遞歸復(fù)制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是，簡(jiǎn)單復(fù)制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}    
let a=[1,2,3,4],
    b=deepClone(a);
a[0]=2;
console.log(a,b);

可以看到

跟之前想象的一樣，現(xiàn)在b脫離了a的控制，不再受a影響了。

這里再次強(qiáng)調(diào)，深拷貝，是拷貝對(duì)象各個(gè)層級(jí)的屬性，可以看個(gè)例子。JQ里有一個(gè)extend方法也可以拷貝對(duì)象，我們來看看

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

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

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

拷貝的不徹底啊，b對(duì)象的一級(jí)屬性確實(shí)不受影響了，但是二級(jí)屬性還是沒能拷貝成功，仍然脫離不了a的控制，說明slice根本不是真正的深拷貝。

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

第一層的屬性確實(shí)深拷貝，擁有了獨(dú)立的內(nèi)存，但更深的屬性卻仍然公用了地址，所以才會(huì)造成上面的問題。

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

2.除了遞歸，我們還可以借用JSON對(duì)象的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的影響了。

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

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

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

target Object類型目標(biāo)對(duì)象，其他對(duì)象的成員屬性將被附加到該對(duì)象上。

object1 objectN可選。 Object類型第一個(gè)以及第N個(gè)被合并的對(duì)象。

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

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

說了這么多，了解深拷貝也不僅僅是為了應(yīng)付面試題，在實(shí)際開發(fā)中也是非常有用的。例如后臺(tái)返回了一堆數(shù)據(jù)，你需要對(duì)這堆數(shù)據(jù)做操作，但多人開發(fā)情況下，你是沒辦法明確這堆數(shù)據(jù)是否有其它功能也需要使用，直接修改可能會(huì)造成隱性問題，深拷貝能幫你更安全安心的去操作數(shù)據(jù)，根據(jù)實(shí)際情況來使用深拷貝，大概就是這個(gè)意思。