項(xiàng)目中遇到的問題:

在elementui中表格點(diǎn)擊按鈕傳值的時(shí)候，通過bus中的$emit傳對(duì)象，在彈出的模態(tài)框中用bus的$on接收對(duì)象，然后對(duì)傳的對(duì)象進(jìn)行改變，結(jié)果發(fā)現(xiàn)改變了原表格的數(shù)據(jù)。

然后就用了展開運(yùn)算符把對(duì)象給了另一個(gè)變量接收，對(duì)對(duì)象改變之后發(fā)現(xiàn)原數(shù)據(jù)就沒有被改變了。

所以用展開運(yùn)算符是深拷貝還是淺拷貝呢？

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

以下是我個(gè)人的理解：

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

案例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(); //多進(jìn)行操作一步 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的對(duì)比可以發(fā)現(xiàn)奇妙之處，根據(jù)案例返回的結(jié)果可以確定展開運(yùn)算符只能深拷貝第一層的值，多維數(shù)組則不能深拷貝成功。 如果數(shù)組內(nèi)的值, 是值類型, 那么遍歷一層, 就相當(dāng)于拷貝了它的值, 如果是引用類型, 比如二維數(shù)組, 那么就是拷貝了它的引用。

以上就是我個(gè)人的粗略見解。

??各位看官，點(diǎn)個(gè)贊就是對(duì)我最大的支持，謝謝！！！??

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。