在前端攻城獅的工作實際應用中，有很多情況下在處理數據的時候，會用到數據的深拷貝和淺拷貝

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

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

深拷貝和淺拷貝主要針對于引用類型數據，因為基本數據類型賦值后，改變新數據，不會影響到原來的數據；而引用數據類型賦值后，改變新數據，將會影響到原來的數據，此時應該使用深拷貝和淺拷貝定義出一個跟原數據一樣但互不影響的數據。

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

賦值

基本類型數據的賦值

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

var a = 10; var b = a; a = 20; console.log(a); console.log(b);

此時的b是10，因為將a賦值給b，是將a空間中的值復制了一份，放到了b空間中，改變a，只是在改變a空間，對b空間并沒有影響。

基本類型賦值

引用類型數據的賦值

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

var arr = [1,2,3]; var brr = arr; arr.push(4); console.log(arr); console.log(brr);

此時的brr也有4個元素，跟arr是一模一樣的，因為將arr賦值給brr，是將arr中存儲的數據空間地址復制了一份，放到了brr中，arr和brr共享同一個數據空間，所以改變其中一個的數據，另一個也會發生改變。

引用數據類型的賦值

深拷貝和淺拷貝的出現，就是為了解決這個問題。

淺拷貝

淺拷貝是將原數據中所有的數據復制一份，放到新的變量空間中，兩個變量不共享一個內存地址。

對象淺拷貝

使用系統提供的構造函數Object上的assign方法。

語法：

Object.assign({},原對象) // 返回新對象

例：

var obj = {name:"張三",age:12,gender:"男" } var pbj = Object.assign({},obj); console.log(obj); console.log(pbj);

此時的pbj跟obj是一模一樣的

對象淺拷貝

但是obj和pbj兩個變量中存儲的數據空間地址是不一樣的，例：

obj.name = '李四'; obj.age = 20; console.log(obj); console.log(pbj);

此時的pbj一點變化也沒有，name鍵的值還是"張三"，age鍵的值還是12，因為obj和pbj不共享數據的內存地址。

拷貝后的地址是不一樣的

注意：如果對象中有數據的值是引用數據類型，在創建新對象的過程中，會將這個引用數據類型的地址也放到新對象中。

var obj = {name:"張三",age:12,gender:"男",wife:{name:"翠花",age:11} } var pbj = Object.assign({},obj); obj.wife.gender = "女"; console.log(obj.wife); console.log(pbj.wife);

此時的pbj的wife鍵對應的對象中，也有了gender鍵，且值為"女"。當對象的屬性的值是引用類型數據的時候，淺拷貝會將這個引用類型數據的地址也拷貝過來，也就是說沒有完全的形成一個新對象，還是跟原對象有些關聯。這就是淺拷貝。

淺拷貝中值是引用類型

數組淺拷貝

1、Array系統構造函數原型上的concat方法

var arr = [1,2,3]; var brr = arr.concat() arr.push(4); console.log(arr); console.log(brr);

此時的brr跟原來的arr是一模一樣的，改變了arr后，brr也是沒有發生改變的，因為brr的數據空間是一個新的地址。

數組淺拷貝-concat

2、Array系統構造函數運行上的slice方法

var arr = [1,2,3]; var brr = arr.slice(); arr.push(4); cosnole.log(arr); cosnole.log(brr);

此時的brr跟原來的arr是一模一樣的，改變了arr后，brr也是沒有發生改變的，因為brr的數據空間是一個新的地址。

數組淺拷貝 - slice

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

var arr = [1,2,[3,4]]; var brr = arr.concat(); arr[2].push(5); console.log(arr[2]); console.log(brr[2]);

此時brr的下標2數據中，也會多出5。

數組中有引用類型的淺拷貝

slice也是一樣的

var arr = [1,2,[3,4]]; var brr = arr.slice(); arr[2].push(5); console.log(arr[2]); console.log(brr[2]);

此時brr的下標2數據中，也會多出5。

數組中有引用類型的淺拷貝

這就是淺拷貝，如果數據中都是基本類型數據，就是完全沒有聯系的兩個數據，但是如果數據中引用類型數據，那兩個變量還是有一定的聯系。

所謂淺拷貝，也就是說，數組或對象中的值如果是基本類型數據，那拷貝后的數據和原數據是完全沒有關聯，且互不影響的兩個數據，如果數組或對象的值是引用類型數據的話，拷貝后的數組或對象中的引用類型的值跟原數據中的引用類型的值，還是存在共享同一地址的現象。

深拷貝

深拷貝，就是不管原數據中值是什么類型的數據，拷貝后的新數據跟原數據是完全沒有關聯的。

1、利用json數據和json字符串之間的轉換

var obj = {name:"張三",age:12,wife:{name:"翠花",age:20} } var str = JSON.stringify(obj); var pbj = JSON.parse(str); obj.wife.gender = '女'; console.log(obj.wife); console.log(pbj.wife);

此時pbj的wife數據中沒有gender鍵，不受obj的影響。

對象深拷貝

數組深拷貝

var arr = [1,2,[3,4]]; var str = JSON.stringify(arr); var brr = JSON.parse(str); arr[2].push(5); console.log(arr[2]); console.log(brr[2]);

此時brr下標2的數據沒有5，不受arr的影響。

數組深拷貝

2、利用遞歸遍歷對象或數組

function clone(source){var result;if(Object.prototype.toString.call(source)==='[object Object]'){result = {};}else if(Object.prototype.toString.call(source)==='[object Array]'){result = []}else{return;}for(var attr in source){if(Object.prototype.toString.call(source[attr])==='[object Array]' || Object.prototype.toString.call(source[attr])==='[object Object]'){result[attr] = clone(source[attr])}else{result[attr] = source[attr];}}return result; }

使用：

var arr = [1,2,{name:"張三",age:12,wife:{name:"翠花",age:11} }]; var res = clone(arr) ? res[0] = 5; console.log(arr[0],res[0]); // 1 5 ? res[2].name = '李四' console.log(arr[2].name,res[2].name); // 張三 李四

調用函數得到的新數據和原來的數據互不影響。

利用遞歸深拷貝

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

淺拷貝，當對象或數組中的數據都是基本數據類型的時候，兩個數據之間完全是獨立的，如果對象或數組中的值是引用類型的時候，里面是引用類型的值，還是會保持共同的內存地址；

深拷貝出來的兩個數據是完全獨立的。

千鋒HTML5學院：教你如何在vue中使用國際化?zhuanlan.zhihu.com千鋒HTML5學院：axios的請求攔截和vue路由的導航守衛有什么區別?zhuanlan.zhihu.com千鋒HTML5學院：redux-thunk的理解?zhuanlan.zhihu.com

總結

以上是生活随笔為你收集整理的assign深拷贝_前端深拷贝和浅拷贝的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。