關於ES6的拓展運算子進行深拷貝
阿新 • • 發佈:2018-11-14
很多部落格說ES6的拓展運算子…也可進行深拷貝物件,但其實是有坑的。
物件的一般格式為:
// key是鍵,value是值
let obj = { key :value }
- 當value是基本資料型別,比如String,Number,Boolean時,是可以使用拓展運算子進行深拷貝的。比如:
// value是基本資料型別
let oldObj = { id: 1 }
let newObj = { ...oldObj }
oldObj.id = 2
console.log(oldObj) // {id: 2}
console.log(newObj) // {id: 1} // 不隨著oldObj的改變而改變
- 但是,當value是引用型別,比如Object,Array,這時使用拓展運算子進行深拷貝,得到的結果是和深拷貝的概念有矛盾的。主要是因為引用型別進行深拷貝也只是拷貝了引用地址。比如:
// value是引用型別
let oldObj = { type: { id: 1 } }
let newObj = { ...oldObj } // 此時拷貝了{id : 1}的引用地址
oldObj.type.id = 2 // 改變引用物件裡面的值
console.log(oldObj) // {type: {id: 2}}
console.log(newObj) // {type: {id: 2}} 隨著oldObj的改變而改變
oldObj.type = { id: 3 } // 改變引用的物件,實際改變了引用物件的地址
console.log(oldObj) // {type: {id: 3}}
console.log(newObj) // {type: {id: 2}} 不隨著oldObj的改變而改變
總結:深拷貝最好使用lodash的cloneDeep方法或者JSON資料轉換,參考Javascript深拷貝