如何區(qū)分深拷貝與淺拷貝蛮原，簡(jiǎn)單點(diǎn)來(lái)說(shuō)，就是假設(shè)B復(fù)制了A另绩，當(dāng)修改A時(shí)儒陨，看B是否會(huì)發(fā)生變化，如果B也跟著變了笋籽，說(shuō)明這是淺拷貝蹦漠，拿人手短，如果B沒(méi)變车海，那就是深拷貝笛园，自食其力。
此篇文章中也會(huì)簡(jiǎn)單闡述到棧堆侍芝，基本數(shù)據(jù)類型與引用數(shù)據(jù)類型研铆，因?yàn)檫@些概念能更好的讓你理解深拷貝與淺拷貝。

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

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

image.png

嗯州叠？明明b復(fù)制了a棵红，為啥修改數(shù)組a，數(shù)組b也跟著變了咧栗，這里我不禁陷入了沉思逆甜。
那么這里，就得引入基本數(shù)據(jù)類型與引用數(shù)據(jù)類型的概念了致板。

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

面試常問(wèn)交煞，基本數(shù)據(jù)類型有哪些，number斟或，string素征，boolean，null，undefined稚茅，symbol以及未來(lái)ES10新增的BigInt(任意精度整數(shù))七類。

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

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

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

image.png

image.png

image.png

image.png

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

image.png

image.png

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

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

這么我們封裝一個(gè)深拷貝的函數(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);

可以看到

image.png

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

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

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

image.png

那是不是說(shuō)slice方法也是深拷貝了堕汞，畢竟b也沒(méi)受a的影響勺爱，上面說(shuō)了，深拷貝是會(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);

image.png

同理，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);

image.png

可以看到债蜜，這下b是完全不受a的影響了。
JSON.stringify與JSON.parse除了實(shí)現(xiàn)深拷貝究反，還能結(jié)合localStorage實(shí)現(xiàn)對(duì)象數(shù)組存儲(chǔ)

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ù)小槐。

image.png