快捷導(dǎo)航

一文帶你了解JavaScript基礎(chǔ)之深拷貝和淺拷貝

更新時(shí)間：2021年12月02日 17:08:04 作者：小豬弟

這篇文章主要為大家介紹了JavaScript深拷貝和淺拷貝，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助

淺拷貝

var person={
    name:"張三",
    age:22
}
var person1={};
for( key in person){
    console.log(key);
    person1[key]=person[key];
}
console.log(person);
console.log(person1);

在這里插入圖片描述

person1.name="李四";
console.log(person);
console.log(person1);

在這里插入圖片描述

可以看出沒(méi)有彼此影響，但是又會(huì)涉及到新的問(wèn)題，那就是person對(duì)象的屬性都是基本數(shù)據(jù)類(lèi)型，如果是引用類(lèi)型呢？比如數(shù)組，對(duì)象呢？

var person={
    name:"張三",
    age:22,
    son:{
        firstSon:"張大毛"
    }
}
var person1={};
for( key in person){
    console.log(key);
    person1[key]=person[key];
}
console.log(person);
console.log(person1);

在這里插入圖片描述

現(xiàn)在修改一下person1的送屬性。

person1.son={firstSon:"李大毛"};
console.log(person);
console.log(person1);

在這里插入圖片描述

這樣看似乎也沒(méi)有彼此影響嗎？但是這個(gè)前面說(shuō)過(guò)對(duì)象.屬性=這樣等于重寫(xiě)賦值了person1.son的屬性，自然會(huì)斷開(kāi)引用彼此的影響，畢竟兩個(gè)地址不一樣。但是如下修改呢？

person1.son.secondeSon="李大毛";
console.log(person);
console.log(person1);

在這里插入圖片描述

驚不驚喜，意不意外還是彼此影響了，這個(gè)時(shí)候就需要一種新的操作了那就是深拷貝，說(shuō)白了就是將屬性值的有可能會(huì)為用引用類(lèi)型。

補(bǔ)充：

如果person的原型上有屬性值，也會(huì)被person1取到，賦值給person1.這個(gè)前面說(shuō)到過(guò)，那樣的話就會(huì)用到hasOwnProperty這個(gè)來(lái)判斷是否屬于自己的屬性值。

深拷貝

其實(shí)深拷貝和淺拷貝的區(qū)別，相信看到這里幾乎已經(jīng)明白了差不多了，就是考慮屬性值的類(lèi)型而已。

// 上面補(bǔ)充了說(shuō)了原型上的值也會(huì)被拷貝下來(lái)，為了方便直接用對(duì)象的原型鏈最后Object添加屬性。
Object.prototype.address="你猜";
var person={
    name:"張三",
    age:22,
    son:{
        firstSon:"張大毛"
    }
}
strtype=Object.prototype.toString;
var person1={};
// 為了方便這個(gè)地方用遞歸方法
function coleFun(origin,target){
 // 防止目標(biāo)對(duì)象本身有屬性
    target=target||{}
    for( key in origin){
        if(origin.hasOwnProperty(key)) 
         if(strtype.call(origin[key])=="[object Object]"){
            target[key]={};
            target[key]=coleFun(origin[key],target[key])
         }else{
            target[key]=origin[key];
          }   
    }
    return target;
}
person1=coleFun(person,person1)
console.log(person);
console.log(person1);

在這里插入圖片描述

看結(jié)果沒(méi)有問(wèn)題現(xiàn)象修改一下屬性值試試

person1.son.secondeSon="李大毛";
console.log(person);
console.log(person1);

在這里插入圖片描述

現(xiàn)在看沒(méi)有問(wèn)題。

所謂的深淺拷貝，說(shuō)白了就是考慮屬性值是否會(huì)有引用類(lèi)型，然后在進(jìn)行拷貝而已。如果上面代碼沒(méi)有看懂的話，可能需要重溫一下引用數(shù)據(jù)和基本數(shù)據(jù)的區(qū)別，以及this指向，還有數(shù)據(jù)類(lèi)型的判斷方法。這寫(xiě)前面的文章都有聊過(guò)，可以翻看一下。

補(bǔ)充

有個(gè)朋友在評(píng)論區(qū)說(shuō)如果如果用JavaScript中的JSON的方法進(jìn)行拷貝數(shù)據(jù)，是深拷貝還是淺拷貝？

其實(shí)這個(gè)很容易證明的，那就是直接拷貝一個(gè)帶有引用數(shù)據(jù)類(lèi)型的對(duì)象，然后判斷其是否會(huì)彼此影響即可。

首先看一下其含有的兩種方法以及作用：

方法	作用
`JSON.parse()`	用于將一個(gè)`JSON`字符串轉(zhuǎn)換為 JavaScript 對(duì)象。
`JSON.stringify()`	用于將 JavaScript 值轉(zhuǎn)換為`JSON`字符串。

然后代碼演示：

var person={
    name:"張三",
    age:22,
    son:{
        firstSon:"張大毛"
    }
}
var str=JSON.stringify(person);
var person1=JSON.parse(str);
console.log(person);
console.log(person1);

在這里插入圖片描述

拷貝的目前看結(jié)果至少?zèng)]有問(wèn)題。

現(xiàn)在開(kāi)始測(cè)試，是否相互影響

person1.son.secondeSon="李大毛";
console.log(person);
console.log(person1);

在這里插入圖片描述

可見(jiàn)沒(méi)有相互影響，其是通過(guò)JOSN進(jìn)行拷貝其實(shí)是JavaScript一種常見(jiàn)的方式，畢竟比自己寫(xiě)要方便的很多。其本質(zhì)就是將對(duì)象轉(zhuǎn)成一個(gè)JSON格式的字符串，而通過(guò)字符串再生成一個(gè)對(duì)象而已，所以說(shuō)其也是一種深拷貝。