小編今天帶大家了解如何分析web前端中的深拷貝和淺拷貝，文中知識(shí)點(diǎn)介紹的非常詳細(xì)。覺(jué)得有幫助的朋友可以跟著小編一起瀏覽文章的內(nèi)容，希望能夠幫助更多想解決這個(gè)問(wèn)題的朋友找到問(wèn)題的答案，下面跟著小編一起深入學(xué)習(xí)“如何分析web前端中的深拷貝和淺拷貝”的知識(shí)吧。

恭城ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書(shū)銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書(shū)合作）期待與您的合作！

深拷貝和淺拷貝是經(jīng)常在面試中會(huì)出現(xiàn)的，主要考察你對(duì)基本類型和引用類型的理解深度。我在無(wú)數(shù)次的面試中，應(yīng)聘者還沒(méi)有一個(gè)人能把這個(gè)問(wèn)題回答情況，包括很多機(jī)構(gòu)的培訓(xùn)老師。這篇文章會(huì)讓你把基本類型和引用類型的區(qū)別搞得清清楚楚，搞清楚這兩者的區(qū)別，你對(duì)任何編程語(yǔ)言的都不怕，因?yàn)?，這不是js一門語(yǔ)言，是任何編程語(yǔ)言中都需要掌握的知識(shí)，而且，在任何編程語(yǔ)言中，兩者都是一樣的。

深拷貝和淺拷貝主要是針對(duì)對(duì)象的屬性是對(duì)象（引用類型）

一、基本類型和引用類型的區(qū)別

1、先了解內(nèi)存

任何編程語(yǔ)言的內(nèi)存分區(qū)幾乎都是一樣的

內(nèi)存是存儲(chǔ)數(shù)據(jù)的，不同類型的數(shù)據(jù)要存儲(chǔ)在不同的區(qū)域，即分類存放，不同的區(qū)域作用和功能也不一樣。就像你家里的衣柜一樣，也分了不同的區(qū)域：如掛西裝的區(qū)域，放襪子的區(qū)域等等，我相信每個(gè)人都會(huì)把這兩個(gè)東西放在不同的區(qū)域。要不然，當(dāng)你西裝革履地參加一個(gè)高檔的宴會(huì)，手塞在褲兜里，掏出來(lái)一只臭襪子，是不是很尷尬?。?！哈哈！??！

以下為內(nèi)存的分區(qū)圖。內(nèi)存分為四個(gè)區(qū)域：棧區(qū)（堆棧），堆區(qū)，全局靜態(tài)區(qū)，只讀區(qū)（常量區(qū)和代碼區(qū)）。

https://blog.csdn.net/jiang7701037/article/details/98728249

2、基本類型和引用類型在內(nèi)存上存儲(chǔ)的區(qū)別

現(xiàn)在只看棧區(qū)和堆區(qū)，不管其它區(qū)域，也假定只是局部變量。

以上函數(shù)testf在調(diào)用時(shí)，

       1）、 定義局部變量  age，由于age是局部變量，所以在棧中申請(qǐng)內(nèi)存空間，起名為age，又由于給age賦的值250是基本類型，所以，值直接存儲(chǔ)在棧中。

        2）、定義局部變量arr，由于arr是局部變量，所以在棧中申請(qǐng)空間，但是arr的內(nèi)存中存儲(chǔ)的是什么？由于給arr賦的值不是基本類型，而是引用類型（new出來(lái)的），所以，先在堆中申請(qǐng)空間存放數(shù)據(jù)  12,23,34,。再把堆區(qū)的地址賦給arr。

3、到底什么是基本類型和引用類型

1）、基本類型：就是值類型，即在變量所對(duì)應(yīng)的內(nèi)存區(qū)域存儲(chǔ)的是值，如：上面的age變量所對(duì)應(yīng)的內(nèi)存存儲(chǔ)的就是值250.

2）、引用類型：就是地址類型。

  何為地址：地址就是編號(hào)，要地址何用，就是為了容易找到。每個(gè)人的家里為什么要有一個(gè)唯一的地址，就是在郵寄時(shí)，能夠找到你家。

比如：我們最早的超市存包的格子，每個(gè)格子都有個(gè)編號(hào)，你存包時(shí)，服務(wù)員會(huì)把你的東西放在某個(gè)格子里，再把這個(gè)格子的編號(hào)給你（一個(gè)牌子）。你購(gòu)物完畢取包時(shí)，直接給服務(wù)員你的牌子（有編號(hào)），服務(wù)員根據(jù)你的編號(hào)就會(huì)找到你的包。這個(gè)編號(hào)就是格子的地址。內(nèi)存也是一樣的，每個(gè)內(nèi)存都有一個(gè)編號(hào)，方便cpu查找。要不然，浩瀚的內(nèi)存海洋，cpu要找到數(shù)據(jù)靠啥找。

以上的變量arr就是引用類型，arr所對(duì)應(yīng)的內(nèi)存中存儲(chǔ)著地址，真正的數(shù)據(jù)是在地址對(duì)應(yīng)的內(nèi)存區(qū)域里，就像，你填寫簡(jiǎn)歷時(shí)，會(huì)在簡(jiǎn)歷的那張紙上寫上你家的地址。簡(jiǎn)歷上寫你家地址的地方就相當(dāng)于arr。而你家是根據(jù)這個(gè)地址可以找到的。簡(jiǎn)歷上寫你家地址的地方就相當(dāng)于引用著你家（可以想象一根無(wú)形的線牽引著你家，在簡(jiǎn)歷上的這根無(wú)形的線，順藤摸瓜就能找到你家）。所以叫做引用類型。

二、基本類型和引用類型在賦值時(shí)內(nèi)存的變化

你可以認(rèn)為，賦值就是在拷貝。

1、基本類型：

2、引用類型：

如果給arr[0]賦值的話，arr1[0]的值也會(huì)發(fā)生變化，因?yàn)椋琣rr和arr1保存著相同的地址，它門兩個(gè)引用的數(shù)據(jù)是共享的。就像你在很多地方（簡(jiǎn)歷的那張紙，戶口本上的那張紙）會(huì)寫上你的家庭地址。這么多張紙都引用著你家。根據(jù)一張紙上找到你家，給你家放上一百萬(wàn)的現(xiàn)金(數(shù)據(jù)改變了，相當(dāng)于arr[0]=10)，再根據(jù)另外一張紙的地址也找到了你家，你發(fā)現(xiàn)你一百萬(wàn)在（不要給我說(shuō)被人拿了）

如果在上面的基礎(chǔ)上增加一句代碼：arr[0]=10;那么內(nèi)存將會(huì)有如下變化：

三、基本類型和引用類型作為函數(shù)參數(shù)的區(qū)別（這個(gè)可以不看）

1、基本類型作為函數(shù)的參數(shù)

2、引用類型作為函數(shù)的參數(shù)：

四、深拷貝和淺拷貝：

  終于說(shuō)到了深拷貝和淺拷貝。

其實(shí)在第二點(diǎn)已經(jīng)說(shuō)到了拷貝，所謂拷貝，就是賦值。把一個(gè)變量賦給另外一個(gè)變量，就是把變量的內(nèi)容進(jìn)行拷貝。把一個(gè)對(duì)象的值賦給另外一個(gè)對(duì)象，就是把一個(gè)對(duì)象拷貝一份。

1、基本類沒(méi)有問(wèn)題，

因?yàn)?，基本類型賦值時(shí)，賦的是數(shù)據(jù)（所以，不存在深拷貝和淺拷貝的問(wèn)題）。

      如：

   Var x  = 100;

   Var  y = x; //此時(shí)x和y都是100;

  如果要改變y的值，x的值不會(huì)改變。

2、引用類型有問(wèn)題

因?yàn)?，引用類型賦值時(shí)，賦的值地址（就是引用類型變量在內(nèi)存中保存的內(nèi)容），強(qiáng)烈建議把前面的第二點(diǎn)（基本類型和引用類型在賦值時(shí)內(nèi)存的變化）多看幾遍，以保證理解深刻。這樣，一勞永逸，以后在碰到任何跟引用類型有關(guān)的話題（如：繼承時(shí)，父類的屬性是引用類型）都沒(méi)有問(wèn)題。

     如：

var  arr1 = new Array(12,23,34)

Var  arr2 = arr1;//這就是一個(gè)最簡(jiǎn)單的淺拷貝

如果要改變arr2所引用的數(shù)據(jù)：arr2[0]=100時(shí)，那么arr1[0]的值也是100。

       原因就是  arr1和arr2引用了同一塊內(nèi)存區(qū)域（以上的第二點(diǎn)中有體現(xiàn)）。  

這是最簡(jiǎn)單的淺拷貝，因?yàn)?，只是把a(bǔ)rr1的地址拷貝的一份給了arr2，并沒(méi)有把a(bǔ)rr1的數(shù)據(jù)拷貝一份。所以，拷貝的深度不夠

3、用json對(duì)象的方式（也是引用類型）來(lái)演示淺拷貝和深拷貝

1）、定義一個(gè)json對(duì)象（對(duì)象的屬性也是對(duì)象）

00001.

var p  = {

"id":"007",

"name":"劉德華",

"books":new Array("三國(guó)演義","紅樓夢(mèng)","水滸傳")//這是引用類型

}

00002.

2）、把該對(duì)象p進(jìn)行復(fù)制一份

· (一)淺拷貝

00001.

var p2  = {};

for(let key  in p){

p2[key]  = p[key];

}

p2.books[0]  ="四國(guó)";

console.log(p2);

console.log(p);

00002.

在控制臺(tái)中打印的結(jié)果（p和p2的books[0]都變成了“四國(guó)”）：

內(nèi)存：

(二) 深拷貝（初步）

var  p2 = {};

for(let  key in p){

if(typeof  p[key]=='object'){

p2[key]=[];//因?yàn)?我上面寫的是數(shù)組,所以,暫時(shí)賦值一個(gè)空數(shù)組.

for(let  i in p[key]){

p2[key][i]  = p[key][i]

}

}else{

p2[key]  = p[key];

}

}

p2.books[0]  ="四國(guó)";

console.log(p2);

console.log(p);

在控制臺(tái)中打印的結(jié)果（只有p2的books[0]變成了“四國(guó)”）

內(nèi)存：

(三)深拷貝（最終）

3.1、深拷貝_如果屬性都是json對(duì)象，那么用遞歸的方式

//如果對(duì)象的屬性是對(duì)象(引用類型),屬性的屬性也是引用類型,即層層嵌套很多.怎么辦,只能遞歸

//如下對(duì)象,要復(fù)制:

00001.

var  p = {

"id":"007",

"name":"劉德華",

"wife":{

"id":"008",

"name":"劉德的妻子",

"address":{

"city":"北京",

"area":"海淀區(qū)"

}

}

}

//寫函數(shù)

function  copyObj(obj){

let  newObj={};

for(let  key in obj){

if(typeof  obj[key] =='object'){//如:key是wife,引用類型,那就遞歸

newObj[key]  = copyObj(obj[key])

}else{//基本類型,直接賦值

newObj[key]  = obj[key];

}

}

return  newObj;

}

let  pNew = copyObj(p);

pNew.wife.name="張三瘋";

pNew.wife.address.city  = "香港";

console.log(pNew);

console.log(p);

3.2、深拷貝_如果屬性是數(shù)組等非鍵值對(duì)的對(duì)象

      就得單獨(dú)處理：要么給數(shù)組增加一個(gè)自我復(fù)制的函數(shù)（建議這樣做），要么單獨(dú)判斷。

```

//給數(shù)組對(duì)象增加一個(gè)方法，用來(lái)復(fù)制自己

Array.prototype.copyself  = function(){

let  arr = new Array();

for(let  i in this){

arr[i]   = this[i]

}

return  arr;

}

var  p = {

"id":"007",

"name":"劉德華",

"books":new  Array("三國(guó)演義","紅樓夢(mèng)","水滸傳")//這是引用類型

}

function  copyObj(obj){

let  newObj={};

for(let  key in obj){

if(typeof  obj[key] =='object'){//如:key是wife,引用類型,那就遞歸

newObj[key]  = obj[key].copyself();

}else{//基本類型,直接賦值

newObj[key]  = obj[key];

}

}

return  newObj;

}

var  pNew = copyObj(p);

pNew.books[0]  = "四國(guó)";

console.log(pNew);

console.log(p);  

```

感謝大家的閱讀，以上就是“如何分析web前端中的深拷貝和淺拷貝”的全部?jī)?nèi)容了，學(xué)會(huì)的朋友趕緊操作起來(lái)吧。相信創(chuàng)新互聯(lián)小編一定會(huì)給大家?guī)?lái)更優(yōu)質(zhì)的文章。謝謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！