1. 程式人生 > >JavaScript深拷貝與淺拷貝

JavaScript深拷貝與淺拷貝

javascript深拷貝與淺拷貝

1.先看一個例子:
技術分享圖片
從中可以看出,obj1拷貝了obj的值,但只是進行了地址的引用,修改obj1的值也影響到了obj的值,沒有創建新對象。

淺拷貝:對基本數據類型進行值傳遞,對引用數據類型進行引用傳遞般的拷貝。

深拷貝:對基本數據類型進行值傳遞,對引用數據類型,創建一個新的對象,並復制其內容

obj2= {
name: ‘LiLei‘,
school: ‘HBUT‘,
age: {
age: ‘3‘
},
run: function aa () {console.log(this.name)}
}
技術分享圖片
父對象的屬性等於數組或另一個對象,那麽實際上,子對象獲得的只是一個內存地址(obj3.grade===obj2.grade),而不是真正的拷貝

對於上面的對象,如何實現深拷貝
技術分享圖片

function deepCopy (obj) {
temp = obj.constructor === Array ? [] : {}
for (let val in obj) {
temp[val] = typeof obj[val] == ‘object‘ ? deepCopy(obj[val]) : obj[val]
}
return temp
}
實現對父對象中的數組或者對象屬性進行循環拷貝

2.Object.assign(目標對象,拷貝來源)
正在做的一個vue項目中,頻繁使用Object.assign來實現對像的拷貝。
當源目標中屬性都是直接類型時,此時是深拷貝;當源目標中含有引用類型的屬性時,此時是淺拷貝。

技術分享圖片
例子中obj2的屬性grade對象只是引用傳值,沒有實現真正的拷貝。

JavaScript深拷貝與淺拷貝