使用 Object.assign() 用於複製時要注意的事

前言

  在之前的 在 JavaScript 裡複製物件的新選項 提到 Object.assign() 的使用，但實際使用時發現有淺層與深層複製的問題，在此把學習的過程做個紀錄。

內容

  範例如下

let obj = { 
  a : { 
    b : 4
  },
  c : 1234
}
let dstObj = Object.assign( {} , obj );
let dstObj1 = JSON.parse( JSON.stringify( obj ) );
//
obj.c =5678;
console.log( dstObj.c );//1234
console.log( dstObj1.c );//1234
//
obj.a.b = 5;
console.log( dstObj.a.b );//5
console.log( dstObj1.a.b );//4

透過 Object.assign() 複製物件是一種淺層複製，也就是範例的 dstObj ，要深層複製的話就要透過 JSON 來複製，也就是範例的 dstObj1 ，淺層複製在複製 Number 或 String 時沒什麼問題，無論 obj.c 如何更改，dstObj 與 dstObj1 都不會更改，但如果複製 Object 的話就會有麻煩，淺層複製 Object 時，只會複製它的參照，並不會複製 Object 的內容，所以當 obj.a.b 更改時，dstIbj.a.b 也跟著更改了，因為根本是同一物件，但透過深層複製的 dstObj1 就沒這個問題。

參考資料

[ developer.mozilla.org ] Object.assign()

相關文章與資料

在 JavaScript 裡複製物件的新選項