1. 程式人生 > >淺談物件的深複製和淺複製的區別。

淺談物件的深複製和淺複製的區別。

  場景

  當你的元件裡需要用到同一個資料,但身負不同的責任。

  舉個例子:vue的雙向繫結

  你在與後端的互動中請求回來的資料,res,  let a = res; let b = res;

 因為是會用到checkbox,在外層的列表裡選中資料,以及在Modal裡面會新增資料,提交表單會分別以兩個陣列的方式提交,這樣做的bug是忽略了a陣列與b陣列都是淺複製了res,導致在外面的資料選中之後新增的資料也會選中,可這並不是想要的(出現的原因:同一個物件賦值給兩個變數,這兩個變數的指標都是源物件的記憶體地址,a的資料選中之後其實是源物件res的資料發生了變化,所以a和b都會發生變化

);怎麼做呢,最後b陣列深複製res物件資料之後,就不會與a陣列同時指向同一個地址,不會因為源物件res的值得變化而變化,這就是深複製與淺複製的區別,

淺複製的坑。。。。。。。。

深複製程式碼貼一個:

let b = JSON.parse(JSON.stringify(res));

當然還有其他程式碼,我僅淺談區別。