JavaScript專題之深淺拷貝

理解：

我們可以理解為，將原始數(shù)據(jù)轉(zhuǎn)換為新字符串，再通過新字符串還原為一個新對象，這中改變數(shù)據(jù)類型的方式，間接的繞過了拷貝對象引用的過程，也就談不上影響原始數(shù)據(jù)。

限制：

這種方式成立的根本就是保證數(shù)據(jù)在“中轉(zhuǎn)”時的完整性，而JSON.stringify()將值轉(zhuǎn)換為相應(yīng)的JSON格式時也有缺陷：

• undefined、任意的函數(shù)以及 symbol 值，在序列化過程中會被忽略（出現(xiàn)在非數(shù)組對象的屬性值中時）或者被轉(zhuǎn)換成 null（出現(xiàn)在數(shù)組中時）。
• 函數(shù)、undefined 被單獨轉(zhuǎn)換時，會返回 undefined，
  • 如JSON.stringify(function(){})
  • JSON.stringify(undefined)
• 對包含循環(huán)引用的對象（對象之間相互引用，形成無限循環(huán)）執(zhí)行此方法，會拋出錯誤。
• NaN 和 Infinity 格式的數(shù)值及 null 都會被當做 null。
• 其他類型的對象，包括 Map/Set/WeakMap/WeakSet，僅會序列化可枚舉的屬性。

所以當我們拷貝函數(shù)、undefined等stringify轉(zhuǎn)換有問題的數(shù)據(jù)時，就會出錯，我們在實際開發(fā)中也要結(jié)合實際情況使用。

舉一反三：

既然是通過改變數(shù)據(jù)類型來繞過拷貝引用這一過程，那么單純的數(shù)組深拷貝是不是可以通過現(xiàn)有的幾個API來實現(xiàn)呢？

var arr = [1,2,3]; var newArr = arr.toString().split(',').map(item => Number(item)) newArr[0] = 100; console.log(arr); // [1,2,3] console.log(newArr); // [100,2,3] 


    


    

注意，此時僅能對包含純數(shù)字的數(shù)組進行深拷貝，因為：

1. toString無法正確的處理對象和函數(shù)
2. Number無法處理 false、undefined等數(shù)據(jù)類型

但我愿稱它為純數(shù)字數(shù)組深拷貝！

3.2 Object.assign()

有的人會認為Object.assign()，可以做到深拷貝，我們來看一下

var obj = {a: 1, b: { c: 2 } } var newObj = Object.assign({}, obj) newObj.a = 100; newObj.b.c = 200; console.log(obj); // {a: 1, b: { c: 200 } } console.log(newObj) // {a: 100, b: { c: 200 } } 


    


    

神奇，第一層屬性沒有改變，但第二層卻同步改變了，這是為什么呢？

因為 Object.assign()拷貝的是（可枚舉）屬性值。

假如源值是一個對象的引用，它僅僅會復(fù)制其引用值。MDN傳送門

四、自己實現(xiàn)深淺拷貝

既然現(xiàn)有的方法無法實現(xiàn)深拷貝，不妨我們自己來實現(xiàn)一個吧～

4.1 淺拷貝

我們只需要將所有屬性即其嵌套屬性原封不動的復(fù)制給新變量一份即可，拋開現(xiàn)有的方法，我們應(yīng)該怎么做呢？

var shallowCopy = function(obj) { if (typeof obj !== 'object') return; // 根據(jù)obj的類型判斷是新建一個數(shù)組還是對象 var newObj = obj instanceof Array ? [] : {}; // 遍歷obj，并且判斷是obj的屬性才拷貝 for (var key in obj) { if (obj.hasOwnProperty(key)) { newObj[key] = obj[key]; } } return newObj; } 


    


    

我們只需要將所有屬性的引用拷貝一份即可～

4.2 深拷貝

相信大家在實現(xiàn)深拷貝的時候都會想到遞歸，同樣是判斷屬性值，但如果當前類型為object則證明需要繼續(xù)遞歸，直到最后

var deepCopy = function(obj) { if (typeof obj !== 'object') return; var newObj = obj instanceof Array ? [] : {}; for (var key in obj) { if (obj.hasOwnProperty(key)) { newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key]; } } return newObj; } 


    


    

我們用白話來解釋一下deepCopy都做了什么

const obj = [1, { a: 1, b: { name: '余光'} } ]; const resObj = deepCopy(obj); 

• 讀取 obj，創(chuàng)建 第一個newObj
  • 判斷類型為 []
  • key為 0 (for in 以任意順序遍歷，我們假定按正常循序遍歷)
  • 判斷不是引用類型，直接復(fù)制
  • key為 1
  • 判斷是引用類型
  • 進入遞歸，重新走了一遍剛才的流程，只不過讀取的是obj[1]

另外請注意遞歸的方式雖然可以深拷貝，但是在性能上肯定不如淺拷貝，大家還是需要結(jié)合實際情況來選擇。

作者： 余光

轉(zhuǎn)自：https://blog.csdn.net/jbj6568839z/article/details/107964274?utm_medium=distribute.pc_category.none-task-blog-hot-4.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-4.nonecase&request_id=