[筆記] JavaScript 淺拷貝 深拷貝 效能一覽表

章節連結

在 JavaScript 的世界中,物件 Object 的傳遞由於是 By Reference 的緣故,當需要複製一份物件時,就得注意自己的複製型式。這篇筆記下各種淺拷貝、深拷貝的效能比較。
[筆記] JavaScript 淺拷貝 深拷貝 效能一覽表


類型

淺複製( 拷貝, Shallow Copy )

適用於僅有一層子層的模式,且每個 key 對應的 value 必須為 Primitive Type。否則第二層之後的值,會依舊是 Pass By Reference,而沒有達成一般認知上的「複製」。

深複製( 拷貝, Deep Copy )

每一層的 key, value 都是完整的用 Pass By Value 複製出來,你可以自由的操作複製出來的值,而不用擔心不小心改動的原有的物件。

效能比較

這篇是挖取 Stack Overflow 上的討論串中的回應,有人做出詳加的比較。有興趣可以點擊以下連接觀看:
https://stackoverflow.com/a/61523278

淺拷貝跑分結果:https://jsbench.me/t0k9l64319/1

深拷貝跑分結果:https://jsbench.me/euk9l6x9jx/1

Shallow Copy 部分

  • 使用 ES6 語法的 { … obj } 或是 Object.assign({}, obj) 都是不錯的方式
  • 用 JSON.stringify(obj) 的效能不佳

Deep Copy 部分

  • 常見的 lodash 資料庫的 cloneDeep 方法,速度跑分大概在中等
  • 用 JSON.stringify(obj) 的效能不佳
  • 推薦可以使用以下的方法,原理是利用遞迴便利每一個 key 中的每一個 value,再給予輸出

按讚加入粉絲團

延伸閱讀