關於ES6的拓展運算符進行深拷貝

很多博客說ES6的拓展運算符 … 也可進行深拷貝對象，但其實是有坑的。

對象的一般格式為：

// key是鍵，value是值
let obj = { key ：value }

1、當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的改變而改變

2、但是，當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數據轉換。

另外，關於Object.assign()語法進行對象的拷貝，里面的坑與拓展運算符的坑一樣。

想具體了解 的知識點，參考：【ES6學習筆記之】Object.assign()