[笔记] 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,再给予输出

按赞加入粉丝团

延伸阅读