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

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

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

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

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

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

　　賦值

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

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

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

　　基本類型賦值

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

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

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

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

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

　　淺拷貝

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

　　對象淺拷貝

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

　　語法：

　　例：

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

　　對象淺拷貝

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

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

　　拷貝后的地址是不一樣的

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

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

　　淺拷貝中值是引用類型

　　數(shù)組淺拷貝

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

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

　　數(shù)組淺拷貝 - concat

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

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

　　數(shù)組淺拷貝 - slice

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

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

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

　　slice也是一樣的

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

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

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

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

　　深拷貝

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

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

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

　　對象深拷貝

　　數(shù)組深拷貝

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

　　數(shù)組深拷貝

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

　　使用：

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

　　利用遞歸深拷貝

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

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

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

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