深淺拷貝：

內(nèi)存中一共分為棧內(nèi)存和堆內(nèi)存兩大區(qū)域，所謂深淺拷貝主要是對(duì)js引用類型數(shù)據(jù)進(jìn)行拷貝一份，淺拷貝就是引用類型數(shù)據(jù)相互賦值之后，例obj1=obj2；如果后面的操作中修改obj1或者obj2，這個(gè)時(shí)候數(shù)據(jù)是會(huì)進(jìn)行相應(yīng)的變化的，因?yàn)樵趦?nèi)存中引用類型數(shù)據(jù)是存儲(chǔ)在堆內(nèi)存中，堆內(nèi)存中存放的是引用類型的值，同時(shí)會(huì)有一個(gè)指針地址指向棧內(nèi)存，兩個(gè)引用類型數(shù)據(jù)地址一樣，如果其中一個(gè)發(fā)生變化另外一個(gè)都會(huì)有影響；而深拷貝則不會(huì)，深拷貝是會(huì)在堆內(nèi)存中重新開(kāi)辟一塊空間進(jìn)行存放；

簡(jiǎn)單來(lái)說(shuō)就是B復(fù)制了A，如果A發(fā)生了改變，如果B隨之變化，那么是淺拷貝，如果B并沒(méi)有發(fā)生變化，則是深拷貝。

基本類型拷貝

let a = 1;
let b = a;
b = 2;
console.log(a);//1
console.log(b);//2

a，b都是屬于基本類型，基本類型的復(fù)制是不會(huì)影響對(duì)方的，因?yàn)榛绢愋褪敲恳淮蝿?chuàng)建變量都會(huì)在棧內(nèi)存中開(kāi)辟一塊內(nèi)存，用來(lái)存放值，所以對(duì)基本類型進(jìn)行拷貝是不會(huì)對(duì)另外一個(gè)變量有影響的，屬于深拷貝。

數(shù)組拷貝 

concat（） slice（）

//  concat()
let list = ['a','b','c'];
let list2 = list.concat();
list2.push('d')
console.log(list);//['a','b','c']
console.log(list2);//['a','b','c','d']
//  slice()
let list = ['a','b','c'];
let list2 = list.slice();
list2.push('d')
console.log(list);//['a','b','c']
console.log(list2);//['a','b','c','d']

上面兩種方法只能實(shí)現(xiàn)數(shù)組類型里面的單層深拷貝，如果是多層無(wú)法實(shí)現(xiàn)深拷貝。

//二維數(shù)組
let list = ['a','b','c',['d','e','f']];
let list2 = list.concat();
list2[3][0] = 'a';
console.log(list);
console.log(list2);

可以看到原二維數(shù)組的值也發(fā)生了變化，說(shuō)明沒(méi)有實(shí)現(xiàn)深拷貝。

由此總結(jié)，concat和slice只能實(shí)現(xiàn)一維數(shù)組的深拷貝，不能對(duì)多維數(shù)組進(jìn)行深拷貝，所以并不是一個(gè)完美的深拷貝方式。

對(duì)象拷貝

new Object（）

let a = {id:1,name:'a',obj:{id:999}};
let b = new Object();
b.id = a.id;
b.name = a.name;
b.obj = a.obj;
a.name = 'b';
a.obj.id = 888;
console.log(a);
console.log(b);

a.name更改并沒(méi)有影響到b.name，好像可以看作深拷貝，但第二層obj里面里面的id隨之更改了，因此其實(shí)并不是深拷貝。

Object.assign

let a = {id:1,name:'a',obj:{id:999}};
function fun(obj){
    let o = {};
    Object.assign(o,obj);
    return o;
}
let a2 = fun(a);
a2.name ='a2';
a2.obj.id = 888;
console.log(a);
console.log(a2);

以上兩種方法，對(duì)于一層對(duì)象都能實(shí)現(xiàn)深拷貝，但對(duì)于多層對(duì)象則無(wú)法實(shí)現(xiàn)，因此也不是一種完美的深拷貝方式。

JSON.parse(JSON.stringify( ))

let a = {
    name : 'a',
    age : 20,
    obj : {id:999},
    action : function(){
        console.log(this.name);
    }
}
let b = JSON.parse(JSON.stringify(a));
a.name = 'b';
a.obj.id = 888;
console.log(a);
console.log(b);

單層對(duì)象name和多層對(duì)象obj.id的改變都沒(méi)影響到原對(duì)象，因此是一個(gè)比較完美的深拷貝，但是能看到function好像并沒(méi)有被拷貝。

可以看出這個(gè)方法對(duì)于一層和多層都能實(shí)現(xiàn)深拷貝，但是這個(gè)方法的缺陷是不能拷貝Function，所以在使用時(shí)，一定要注意數(shù)據(jù)類型。

遞歸

let a = {
    name:'a',
    skin:["red","blue","yellow",["123","456"]],
    child:{
        work:'none',
        obj:{
            id:999
        }
    },
    action:function(){
        console.log(this.name);
    }
}
//封裝的遞歸方法
    function copyWid(obj){
        let newObj = Array.isArray(obj)?[]:{};
        for (var i in obj){
            if(typeof obj[i] === 'object'){  //判斷是不是對(duì)象（數(shù)組或?qū)ο螅?
               newObj[i] = copyWid(obj[i])  //遞歸解決多層拷貝
            }else{
                newObj[i] = obj[i]   
            }
        }
        return newObj;
    };
    let b = copyWid(a);
    b.child.obj.id =888;
    b.skin[3][0] = "pink";
    console.log(a);
    console.log(b);

可以看到，無(wú)論是多層的對(duì)象還是多層的數(shù)組，都能實(shí)現(xiàn)深拷貝，而且能拷貝函數(shù)，這個(gè)是目前來(lái)說(shuō)最完美的深拷貝方法。

通過(guò)這個(gè)遞歸能實(shí)現(xiàn)一個(gè)比較完美的深拷貝，能彌補(bǔ)上述提到的所有方法中的缺點(diǎn)。

展開(kāi)運(yùn)算符

let a = {name:'a',id:99};//如果是數(shù)組[xx,xx,xx]，{...a}需要改成[...a]
let b ={...a};  //[...a]
a.id =88;
console.log(a);
console.log(b);

這個(gè)方法能實(shí)現(xiàn)對(duì)象數(shù)組單層時(shí)的深拷貝，但是多層無(wú)法實(shí)現(xiàn)深拷貝。

以上這么多方法，最優(yōu)解應(yīng)該屬于JSON和遞歸的方法（遞歸解決了JSON無(wú)法拷貝函數(shù)方法的問(wèn)題），但是根據(jù)需求數(shù)據(jù)類型的不同，可以選擇更簡(jiǎn)單的方式。

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容! 

最新評(píng)論