項目中遇到的問題:

在elementui中表格點擊按鈕傳值的時候，通過bus中的$emit傳對象，在彈出的模態框中用bus的$on接收對象，然后對傳的對象進行改變，結果發現改變了原表格的數據。

然后就用了展開運算符把對象給了另一個變量接收，對對象改變之后發現原數據就沒有被改變了。

所以用展開運算符是深拷貝還是淺拷貝呢？

MDN里面的解釋：?實際上, 展開語法和 Object.assign() 行為一致, 執行的都是淺拷貝(只遍歷一層)。

以下是我個人的理解：

用擴展運算符對數組或者對象進行拷貝時，只能擴展和深拷貝第一層的值，對于第二層極其以后的值，擴展運算符將不能對其進行打散擴展，也不能對其進行深拷貝，即拷貝后和拷貝前第二層中的對象或者數組仍然引用的是同一個地址，其中一方改變，另一方也跟著改變。

案例1：

var arr1 = [[1,2], [3,4], [5,6]]; var arr2 = [...arr1]; arr2.shift() console.log(arr1); // [[1,2],[3,4],[5,6]] console.log(arr2);// [[3,4],[5,6]]

案例2：

var arr1 = [[1,2], [3,4], [5,6]]; var arr2 = [...arr1]; arr2.shift().shift(); //多進行操作一步 console.log(arr1); // [[2],[3,4],[5,6]] console.log(arr2);// [[3,4],[5,6]]

案例3：

let arr1 = [{}, {}, {}] let arr2 = []for (const item of arr1) {arr2.push(item) } arr2[0]['name'] = '李華'console.log(arr1) //[ { name: '李華' }, {}, {} ] console.log(arr2) //[ { name: '李華' }, {}, {} ]

通過案例1和案例2和案例3的對比可以發現奇妙之處，根據案例返回的結果可以確定展開運算符只能深拷貝第一層的值，多維數組則不能深拷貝成功。 如果數組內的值, 是值類型, 那么遍歷一層, 就相當于拷貝了它的值, 如果是引用類型, 比如二維數組, 那么就是拷貝了它的引用。

以上就是我個人的粗略見解。

??各位看官，點個贊就是對我最大的支持，謝謝！！！??

總結

以上是生活随笔為你收集整理的ES6中展开运算符的深拷贝浅拷贝理解(ElementUI表格点击编辑，模态框内容与表格数据一起变的问题)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。