JS中有關引用對象的拷貝問題 問題描述：在開發過程中，拷貝一個對象數組給另一個數組的時候，改變新數組中對象的屬性值，原數組中的對象屬性值也跟著改變了。 例如新定義一個數組arr1，裡面有兩個對象，然後再新定義一個數組arr2，將arr1的值通過slice()方法拷貝給arr2，由於slice()方法 ...
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
