在前端攻城獅的工作實(shí)際應(yīng)用中，有很多情況下在處理數(shù)據(jù)的時(shí)候，會(huì)用到數(shù)據(jù)的深拷貝和淺拷貝

　　例如：vue中數(shù)據(jù)是雙向綁定的，頁(yè)面顯示依賴(lài)于從后臺(tái)獲取到的數(shù)據(jù)，但要將這個(gè)數(shù)據(jù)當(dāng)做參數(shù)發(fā)送給另外一個(gè)接口的時(shí)候，其中有幾個(gè)字段是多余的，此時(shí)，如果將原數(shù)據(jù)中的字段進(jìn)行刪除，將會(huì)造成頁(yè)面中某些數(shù)據(jù)無(wú)法顯示，但是多余數(shù)據(jù)發(fā)送給接口的話，會(huì)造成請(qǐng)求失敗，此時(shí)就要用到深拷貝和淺拷貝。

　　深拷貝和淺拷貝可以考察出一個(gè)人的能力具體如何，例如：基本功、邏輯能力、編碼能力......

　　深拷貝和淺拷貝主要針對(duì)于引用類(lèi)型數(shù)據(jù)，因?yàn)榛緮?shù)據(jù)類(lèi)型賦值后，改變新數(shù)據(jù)，不會(huì)影響到原來(lái)的數(shù)據(jù);而引用數(shù)據(jù)類(lèi)型賦值后，改變新數(shù)據(jù)，將會(huì)影響到原來(lái)的數(shù)據(jù)，此時(shí)應(yīng)該使用深拷貝和淺拷貝定義出一個(gè)跟原數(shù)據(jù)一樣但互不影響的數(shù)據(jù)。

　　注意：賦值操作和深拷貝淺拷貝不是一回事。

　　點(diǎn)擊加入前端千人大群交流學(xué)習(xí),更多課程視頻-源碼軟件安裝包免費(fèi)贈(zèng)送~

　　賦值

　　基本類(lèi)型數(shù)據(jù)的賦值

　　基本數(shù)據(jù)類(lèi)型包括：number、string、boolean、undefined、null，他們的賦值相對(duì)簡(jiǎn)單，且賦值后兩個(gè)變量互不影響。

　　此時(shí)的b是10，因?yàn)閷賦值給b，是將a空間中的值復(fù)制了一份，放到了b空間中，改變a，只是在改變a空間，對(duì)b空間并沒(méi)有影響。

　　基本類(lèi)型賦值

　　引用類(lèi)型數(shù)據(jù)的賦值

　　引用數(shù)據(jù)類(lèi)型包括：Array、Object，他們的賦值相對(duì)復(fù)雜，且賦值后兩個(gè)變量共享一個(gè)數(shù)據(jù)內(nèi)存空間，改變其中一個(gè)，另一個(gè)也會(huì)發(fā)生改變。

　　此時(shí)的brr也有4個(gè)元素，跟arr是一模一樣的，因?yàn)閷rr賦值給brr，是將arr中存儲(chǔ)的數(shù)據(jù)空間地址復(fù)制了一份，放到了brr中，arr和brr共享同一個(gè)數(shù)據(jù)空間，所以改變其中一個(gè)的數(shù)據(jù)，另一個(gè)也會(huì)發(fā)生改變。

　　引用數(shù)據(jù)類(lèi)型的賦值

　　深拷貝和淺拷貝的出現(xiàn)，就是為了解決這個(gè)問(wèn)題。

　　淺拷貝

　　淺拷貝是將原數(shù)據(jù)中所有的數(shù)據(jù)復(fù)制一份，放到新的變量空間中，兩個(gè)變量不共享一個(gè)內(nèi)存地址。

　　對(duì)象淺拷貝

　　使用系統(tǒng)提供的構(gòu)造函數(shù)Object上的assign方法。

　　語(yǔ)法：

　　例：

　　此時(shí)的pbj跟obj是一模一樣的

　　對(duì)象淺拷貝

　　但是obj和pbj兩個(gè)變量中存儲(chǔ)的數(shù)據(jù)空間地址是不一樣的，例：

　　此時(shí)的pbj一點(diǎn)變化也沒(méi)有，name鍵的值還是"張三"，age鍵的值還是12，因?yàn)閛bj和pbj不共享數(shù)據(jù)的內(nèi)存地址。

　　拷貝后的地址是不一樣的

　　注意：如果對(duì)象中有數(shù)據(jù)的值是引用數(shù)據(jù)類(lèi)型，在創(chuàng)建新對(duì)象的過(guò)程中，會(huì)將這個(gè)引用數(shù)據(jù)類(lèi)型的地址也放到新對(duì)象中。

　　此時(shí)的pbj的wife鍵對(duì)應(yīng)的對(duì)象中，也有了gender鍵，且值為"女"。當(dāng)對(duì)象的屬性的值是引用類(lèi)型數(shù)據(jù)的時(shí)候，淺拷貝會(huì)將這個(gè)引用類(lèi)型數(shù)據(jù)的地址也拷貝過(guò)來(lái)，也就是說(shuō)沒(méi)有完全的形成一個(gè)新對(duì)象，還是跟原對(duì)象有些關(guān)聯(lián)。這就是淺拷貝。

　　淺拷貝中值是引用類(lèi)型

　　數(shù)組淺拷貝

　　1、Array系統(tǒng)構(gòu)造函數(shù)原型上的concat方法

　　此時(shí)的brr跟原來(lái)的arr是一模一樣的，改變了arr后，brr也是沒(méi)有發(fā)生改變的，因?yàn)閎rr的數(shù)據(jù)空間是一個(gè)新的地址。

　　數(shù)組淺拷貝 - concat

　　2、Array系統(tǒng)構(gòu)造函數(shù)運(yùn)行上的slice方法

　　此時(shí)的brr跟原來(lái)的arr是一模一樣的，改變了arr后，brr也是沒(méi)有發(fā)生改變的，因?yàn)閎rr的數(shù)據(jù)空間是一個(gè)新的地址。

　　數(shù)組淺拷貝 - slice

　　注意：如果數(shù)組中的數(shù)據(jù)有引用類(lèi)型數(shù)據(jù)，上面兩個(gè)方法對(duì)于數(shù)組的拷貝，會(huì)將這個(gè)引用類(lèi)型數(shù)據(jù)的地址也拷貝出來(lái)。

　　此時(shí)brr的下標(biāo)2數(shù)據(jù)中，也會(huì)多出5。

　　數(shù)組中有引用類(lèi)型的淺拷貝

　　slice也是一樣的

　　此時(shí)brr的下標(biāo)2數(shù)據(jù)中，也會(huì)多出5。

　　數(shù)組中有引用類(lèi)型的淺拷貝

　　這就是淺拷貝，如果數(shù)據(jù)中都是基本類(lèi)型數(shù)據(jù)，就是完全沒(méi)有聯(lián)系的兩個(gè)數(shù)據(jù)，但是如果數(shù)據(jù)中引用類(lèi)型數(shù)據(jù)，那兩個(gè)變量還是有一定的聯(lián)系。

　　所謂淺拷貝，也就是說(shuō)，數(shù)組或?qū)ο笾械闹等绻腔绢?lèi)型數(shù)據(jù)，那拷貝后的數(shù)據(jù)和原數(shù)據(jù)是完全沒(méi)有關(guān)聯(lián)，且互不影響的兩個(gè)數(shù)據(jù)，如果數(shù)組或?qū)ο蟮闹凳且妙?lèi)型數(shù)據(jù)的話，拷貝后的數(shù)組或?qū)ο笾械囊妙?lèi)型的值跟原數(shù)據(jù)中的引用類(lèi)型的值，還是存在共享同一地址的現(xiàn)象。

　　深拷貝

　　深拷貝，就是不管原數(shù)據(jù)中值是什么類(lèi)型的數(shù)據(jù)，拷貝后的新數(shù)據(jù)跟原數(shù)據(jù)是完全沒(méi)有關(guān)聯(lián)的。

　　1、利用json數(shù)據(jù)和json字符串之間的轉(zhuǎn)換

　　此時(shí)pbj的wife數(shù)據(jù)中沒(méi)有g(shù)ender鍵，不受obj的影響。

　　對(duì)象深拷貝

　　數(shù)組深拷貝

　　此時(shí)brr下標(biāo)2的數(shù)據(jù)沒(méi)有5，不受arr的影響。

　　數(shù)組深拷貝

　　2、利用遞歸遍歷對(duì)象或數(shù)組

　　使用：

　　調(diào)用函數(shù)得到的新數(shù)據(jù)和原來(lái)的數(shù)據(jù)互不影響。

　　利用遞歸深拷貝

　　總之，賦值是賦值，拷貝是拷貝。

　　淺拷貝，當(dāng)對(duì)象或數(shù)組中的數(shù)據(jù)都是基本數(shù)據(jù)類(lèi)型的時(shí)候，兩個(gè)數(shù)據(jù)之間完全是獨(dú)立的，如果對(duì)象或數(shù)組中的值是引用類(lèi)型的時(shí)候，里面是引用類(lèi)型的值，還是會(huì)保持共同的內(nèi)存地址;

　　深拷貝出來(lái)的兩個(gè)數(shù)據(jù)是完全獨(dú)立的。

　　更多關(guān)于html5培訓(xùn)的問(wèn)題，歡迎咨詢(xún)千鋒教育在線名師，如果想要了解我們的師資、課程、項(xiàng)目實(shí)操的話可以點(diǎn)擊咨詢(xún)課程顧問(wèn)，獲取試聽(tīng)資格來(lái)試聽(tīng)我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門(mén)到精通。