js深淺拷貝

作為一枚前段，我們知道對象類型在賦值的過程中其實是複製了地址，從而會導致改變了一方其他也都被改變的情況。通常在開發中我們不希望出現這樣的問題，我們可以使用淺拷貝來解決這個情況。

淺拷貝

首先可以通過Object.assign來解決這個問題，很多人認為這個函數是用來深拷貝的。其實並不是，Object.assign只會拷貝所有的屬性值到新的對象中，如果屬性值是對象的話，拷貝的是地址，所以並不是深拷貝。

1 let abc = {
2     a: '123',
3     b: 'aaa',
4     d: 'cccc'
5 }
6 let b = Object.assign({}, abc)
7 abc.a = '222'
8 console.log(b.a) // 123

另外還可通過es6的運算符來. .. 來實現

1 let obj = {
2     age: '23',
3     name: 'chai'
4 }
5 let newobj = {...obj}
6 obj.age = '17'
7 console.log(newobj.age) // 23

淺拷貝只解決了第一層的問題，如果接下去的值中還有對象的話，那麼就又回到最開始的話題了，兩者享有相同的地址。要解決這個問題，我們就得使用深拷貝了。

淺拷貝

通常可以通過JSON.parse(JSON.stringify(object))來解決

1 let a = {
2   age: 1,
3   jobs: {
4     first: 'FE'
5   }
6 }
7 let b = JSON.parse(JSON.stringify(a))
8 a.jobs.first = 'native'
9 console.log(b.jobs.first) // FE

平時就這幾種方法就夠使用了，深拷貝這種方法也是有局限性的，它會忽略undefined，symble,不能序列化函數，如

1 let a = {
2   age: undefined,
3   sex: Symbol('male'),
4   jobs: function() {},
5   name: 'vue'
6 }
7 let b = JSON.parse(JSON.stringify(a))
8 console.log(b) // {name: "vue"}