本篇內(nèi)容介紹了“javascript賦值、淺拷貝、深拷貝的概念”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),西秀企業(yè)網(wǎng)站建設(shè),西秀品牌網(wǎng)站建設(shè),網(wǎng)站定制,西秀網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,西秀網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

一、棧、堆、指針地址

棧內(nèi)存：個(gè)人理解是，基本數(shù)據(jù)類型和引用數(shù)據(jù)類型都會(huì)用到的一個(gè)空間，這個(gè)空間以key-value形式存在，value本身不可修改，只能賦值替換；

堆內(nèi)存：堆，就是堆積，每一個(gè)被開(kāi)辟的空間可以想象成一個(gè)空紙盒子，紙盒子所在的紙盒子堆就是 “堆” 。基本數(shù)據(jù)類型沒(méi)有堆的概念。堆，只針對(duì)引用數(shù)據(jù)類型。存儲(chǔ)方式應(yīng)該是以對(duì)象（object）形式保存，對(duì)象內(nèi)容包含key-value形式數(shù)據(jù)，value本身同樣不可修改，只能賦值替換；

指針地址：針對(duì)引用數(shù)據(jù)類型在棧保存的值就是指針地址，地址指向保存在堆里面的對(duì)象。

二、賦值

賦值分兩個(gè)，一個(gè)是基本數(shù)據(jù)類型的賦值，一個(gè)是引用數(shù)據(jù)類型的賦值，基本數(shù)據(jù)類型賦的是 “值”，引用數(shù)據(jù)類型賦的是 “指針地址”。

1.基本數(shù)據(jù)類型賦值

//在棧內(nèi)開(kāi)辟一個(gè)空間，空間名稱叫a，存放值1；
var a = 1;

//在棧內(nèi)開(kāi)辟一個(gè)空間，空間名字叫b。接著先把a(bǔ)的值1復(fù)制一份，然后存放進(jìn)b
var b = a;

如下圖：

2.引用數(shù)據(jù)類型賦值

//首先在棧開(kāi)辟一個(gè)空間a存放指針地址，設(shè)指針地址為address1；同時(shí)會(huì)在堆里面開(kāi)辟一個(gè)空間放置對(duì)象數(shù)據(jù) 2 var a = {
 no: 1,
 per: {
  name: "jack"
 },
 per2: {
  name: "rose"
 }
}

//a賦值給b,此時(shí)b會(huì)在棧開(kāi)辟一個(gè)空間b，用來(lái)放置address1，這個(gè)指針指向a所在堆的對(duì)象數(shù)據(jù)
var b = a;

//修改賦值后的值b，其實(shí)就是修改b的指針address1所指向的對(duì)象數(shù)據(jù)
b.no = 1314;

//修改b會(huì)影響原數(shù)據(jù)（所有層次的數(shù)據(jù)都會(huì)影響）
//這個(gè)原數(shù)據(jù)其實(shí)不是原數(shù)據(jù)，因?yàn)閍和b其實(shí)都是同一個(gè)數(shù)據(jù)
//就像從中國(guó)去美國(guó)，可以從a地點(diǎn)（比如北京）或者b地點(diǎn)（比如上海）坐飛機(jī)去，但是到達(dá)的都是同一個(gè)地方（也就是對(duì)象數(shù)據(jù)）
b.per.name = "王五";

console.log(a, b)

上面代碼打印如圖：

 

對(duì)b的修改會(huì)影響a原本的值。對(duì)a的修改同樣會(huì)同步b的值，對(duì)a的修改本人沒(méi)有寫(xiě)出，你們可以自己試試，結(jié)果是一樣的。

針對(duì)上面的代碼，引用數(shù)據(jù)類型賦值，如下圖所示：

無(wú)論修改a對(duì)象還是b對(duì)象，都是在修改 “obj” 這個(gè)對(duì)象

三、淺拷貝

引用數(shù)據(jù)類型的淺拷貝，代碼如下：

//在棧開(kāi)辟一個(gè)空間a，存放a的指針地址，設(shè)指針地址為address2a，同時(shí)在堆開(kāi)辟一個(gè)空間，設(shè)這空間為A，存放a對(duì)象數(shù)據(jù)
var a = {
 no: 1,
 per: {
  name: "jack",
 },
 per2: {
  name: "rose"
 }
}

//在棧開(kāi)辟一個(gè)空間b，存放b的指針地址，設(shè)指針地址為address2b，同時(shí)在堆開(kāi)辟一個(gè)空間，設(shè)這空間為B，存放b對(duì)象數(shù)據(jù)
var b = {};

//對(duì)a的數(shù)據(jù)進(jìn)行循環(huán)，判斷如果有key，就把值賦到B對(duì)應(yīng)的key位置
//這個(gè)循環(huán)，遇到數(shù)據(jù)類型為基本數(shù)據(jù)類型，賦的是值；遇到引用數(shù)據(jù)類型，賦的是指針地址
for(var p in a) {
 if(a.hasOwnProperty(p)) {
  b[p] = a[p]
 }
}

//對(duì)b的第一層修改
b.no = 1314;
b.per2 = [];

//對(duì)b的第二層修改
b.per.name = "王五";

//淺拷貝，修改b后，第一層修改都不影響原數(shù)據(jù)，第二層以及以上層次的修改都影響原數(shù)據(jù)
//當(dāng)前沒(méi)有寫(xiě)第三層及以上層次，可自行測(cè)試。
console.log(a, b)

運(yùn)行結(jié)果如圖：

可以理解為，a原本的東西被完全復(fù)制了一份，放到了b里面，然會(huì)對(duì)b的操作，就只關(guān)b的事情了。a原本是什么值，現(xiàn)在依然是什么值，b的修改對(duì)a完全沒(méi)有影響。

最后，可用下圖表示深拷貝：

四、深拷貝

深拷貝，說(shuō)白了，就是對(duì)淺拷貝的遞歸，也就是淺拷貝章節(jié)所述的，淺拷貝第一層已經(jīng)被完全拷貝到新的地方，然后第二層以及以上層次，它們的屬性值又將都會(huì)被拷貝到新的地方，最后就井水不犯河水了。

代碼如下：

//在棧開(kāi)辟一個(gè)空間a，存放a的指針地址，設(shè)指針地址為address3a，同時(shí)在堆開(kāi)辟一個(gè)空間，設(shè)這空間為space1a，存放a對(duì)象數(shù)據(jù)
var a = {
 no: 2,
 per: {
  name: "jack"
 },
 per2: {
  name: "rose"
 }
}

//用遞歸的方式對(duì)a進(jìn)行拷貝屬性和值,然后賦值給temp，然后return出去。此時(shí)不拷貝指針地址。
function getDeep(obj) {
 var temp = Array.isArray(obj) ? [] : {};
 for(var p in obj) {
  if(typeof obj[p] == "object") {
   temp[p] = getDeep(obj[p])
  } else {
   temp[p] = obj[p]
  }
 }
 return temp;
}

//在棧開(kāi)辟一個(gè)空間b，存放b的指針地址，設(shè)指針地址為address3b。同時(shí)b在堆開(kāi)辟一個(gè)空間，設(shè)這空間為D，存放temp的對(duì)象數(shù)據(jù)
var b = getDeep(a);

//深拷貝后，修改b的值，不論修改屬性值，還是整個(gè)值替換都不影響原數(shù)據(jù)a
b.no = 1314;
b.per = []
b.per2 = {
 name:"王五"
}

console.log(a, b)

淺拷貝只拷貝了第一層，深拷貝是拷貝到最后一層。代碼運(yùn)行結(jié)果如圖：

可以理解為，a原本的東西被完全復(fù)制了一份，放到了b里面，然會(huì)對(duì)b的操作，就只關(guān)b的事情了。a原本是什么值，現(xiàn)在依然是什么值，b的修改對(duì)a完全沒(méi)有影響。

最后，可用下圖表示深拷貝：

五、總結(jié)

1.賦值：

基本數(shù)據(jù)類型就是類似a同學(xué)有一臺(tái)電腦，b同學(xué)也想要，就也給b同學(xué)買了一臺(tái)一模一樣的電腦b，電腦a和電腦b各自怎么被操作都是a同學(xué)和b同學(xué)各自的事，電腦顯示互不影響（數(shù)據(jù)結(jié)果）；

引用數(shù)據(jù)類型就是只有一臺(tái)電腦，放在了電腦室，a同學(xué)和b同學(xué)各自從宿舍到電腦室操作電腦，都能影響電腦顯示；在a同學(xué)和b同學(xué)的眼里，最后結(jié)果這臺(tái)電腦顯示什么，取決于最后一個(gè)操作電腦的同學(xué)（數(shù)據(jù)結(jié)果）；

2.淺拷貝：

a同學(xué)有一臺(tái)筆記本電腦并且配置了全套裝備，觸感舒爽的鼠標(biāo)、按鍵響亮的機(jī)械鍵盤(pán)等。b同學(xué)沒(méi)錢買電腦，但是又很想體驗(yàn)，所以先買了和a同學(xué)一樣的鼠標(biāo)鍵盤(pán)自個(gè)先看著爽。然后向a同學(xué)借電腦過(guò)來(lái)玩。a同學(xué)和b同學(xué)各自的鼠標(biāo)鍵盤(pán)出了啥問(wèn)題，兩個(gè)人之間互不影響對(duì)方的使用。而對(duì)電腦的操作就是誰(shuí)最后操作了電腦，電腦就是顯示最后那個(gè)人的操作界面（數(shù)據(jù)修改）。

3.深拷貝：

a同學(xué)有筆記本+全套裝備，b同學(xué)羨慕不已，自己讓a同學(xué)照著買了一整套一模一樣的給自己，但是他們各自的使用電腦情況，取決于他們各自的操作，電腦之間互不影響（數(shù)據(jù)結(jié)果）。

“javascript賦值、淺拷貝、深拷貝的概念”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

當(dāng)前題目：javascript賦值、淺拷貝、深拷貝的概念
文章URL：http://vcdvsql.cn/article0/pddhio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、云服務(wù)器、App開(kāi)發(fā)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站維護(hù)、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)