JS中有關參考物件的拷貝問題
問題描述：在開發程序中，拷貝一個物件陣列給另一個陣列的時候，改變新陣列中物件的屬性值，原陣列中的物件屬性值也跟著改變了，
例如新定義一個陣列arr1，里面有兩個物件，然后再新定義一個陣列arr2，將arr1的值通過slice()方法拷貝給arr2，由于slice()方法是深層拷貝，所以arr2指向的是一個新的陣列，而不是arr1指向的陣列，如下代碼所示：
在瀏覽器控制臺列印如下:
通過slice方法拷貝，arr1和arr2理應指向的是不同的陣列，然而當我們改變arr2里面元素的內容的時候，arr1里面的元素也跟著改變了，代碼如下：
控制臺列印如下：
可以看出，arr1里面的第一個元素的name屬性值也跟著改變了，
原因：這是因為slice()方法只是實作了對第一層的深拷貝，對于第二層的物件仍然是淺拷貝，也就是arr1[0]和arr2[0]指向的還是同一個物件，所以當arr1[0]里面的屬性值改變時arr2[0]里面的屬性值也跟著改變了，
- 解決方法：
（1） 通過JSON決議解決
let arr2 = JSON.parse(JSON.stringify(arr1));
控制臺列印如下：
問題得到解決，而且方式很簡單，但是這種方法有一定的局限性，詳情參考：https://www.jianshu.com/p/b084dfaad501
（2） 回圈陣列里面的物件屬性，獲取到每一個屬性值再賦給一個新物件，
控制臺列印如下：
其他方法參考：https://www.cnblogs.com/myzy/p/8561353.html
有關JS深拷貝和淺拷貝參考：https://www.vue-js.com/topic/5da046776f28f2d37a40465b
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/179776.html
標籤：JavaScript
上一篇：WebSocket斷開原因、心跳機制防止自動斷開連接
下一篇：vue實作一個評論串列