JavaScript中的深拷贝与浅拷贝如何实现_性能差异有多大

浅拷贝只复制第一层引用，深拷贝递归复制所有层级；Object.assign()和展开运算符仅顶层浅拷贝，JSON.parse(JSON.stringify())最简但限制多，structuredClone()是现代推荐方案，支持更多类型且性能更优。

浅拷贝只复制第一层引用，深拷贝递归复制所有层级

浅拷贝创建一个新对象，但只复制原始对象的顶层属性值；如果某个属性是对象或数组，拷贝后两者仍指向同一内存地址。深拷贝则递归地为每个嵌套对象/数组分配新内存，确保完全独立。

常见误判是以为 Object.assign() 或展开运算符 {...obj} 能处理嵌套结构——它们只是浅拷贝，对 obj.a.b = 1 的修改会同时影响源和拷贝对象。

• Object.assign({}, obj) 和 {...obj}：仅顶层浅拷贝，不处理嵌套
• Array.prototype.slice()、Array.from(arr)、[...arr]：对数组是浅拷贝，元素为对象时仍共享引用
• 直接赋值 let b = a：连浅拷贝都不是，只是引用复制

JSON.parse(JSON.stringify()) 是最简深拷贝，但有严重限制

这是前端最常用的一行式深拷贝方案，原理是先序列化再反序列化，天然跳过引用关系。

但它无法处理：undefined、function、Symbol、BigInt、Date、RegExp、Map、Set、循环引用，且会丢失原型链和不可枚举属性。

const obj = { a: 1, b: () => {}, c: undefined, d: new Date() };
console.log(JSON.parse(JSON.stringify(obj))); // { a: 1 } —— 其余全丢

所以它只适合「纯数据对象」（POJO），比如从 API 接收的 JSON 响应体。

structuredClone() 是现代浏览器推荐的深拷贝方案

structuredClone() 是 ES2025 引入的原生方法，能正确处理 Date、RegExp、Map、Set、ArrayBuffer、TypedArray 等，也支持循环引用，且保留可枚举属性。

但它仍不支持 function、undefined、Symbol、BigInt（会抛错），也不克隆原型链或不可枚举属性。

• 兼容性：Chrome 98+、Firefox 94+、Safari 15.4+，Node.js 17.0+（需启用 --harmony-structured-clone）
• 性能优于 JSON.parse(JSON.stringify())，尤其在大数据量时
• 不能用于 window、document 等宿主对象

const obj = { a: new Date(), b: new Map([['x', 1]]), c: /test/ };
const cloned = structuredClone(obj); // ✅ 正常工作

性能差异取决于数据结构深度、大小和类型

简单测试（1000 个键的扁平对象）：structuredClone() 比 JSON.parse(JSON.stringify()) 快约 2–3 倍；但对含大量嵌套对象的结构，差距可能缩小甚至反转（因 structuredClone() 需做更多类型检查）。

真正拖慢性能的是深层递归 + 大量引用（如树形结构含 10k 节点），此时手写优化版（如用 WeakMap 缓存已拷贝对象避免循环）比通用方案更稳。

• Object.assign() 和展开运算符：最快，但只是浅拷贝
• JSON.parse(JSON.stringify())：中等速度，但序列化/反序列化开销随数据体积线性增长
• structuredClone()：底层 C++ 实现，小到中等数据最快；对超大对象（>10MB）可能触发 GC 压力
• 手写递归深拷贝：可控性强，可跳过特定字段、处理特殊类型，但易出错且维护成本高

实际项目中，优先用 structuredClone()；降级场景用 JSON.parse(JSON.stringify()) 并加 try/catch；涉及函数或复杂状态时，考虑是否真需要深拷贝——很多时候用不可变更新（如 immer）更合理。

# javascript  # java  # js  # 前端  # node.js  # json  # node  # 大数据  # 浏览器  # safari  # c++ 

相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 网络优化76771 】 【 技术知识130152 】 【 IDC云计算60162 】 【 营销推广131313 】 【 AI优化88182 】 【 百度推广37138 】 【 网站推荐60173 】 【 精选阅读31334 】

相关推荐： 如何使用Golang指针与结构体结合_修改结构体内部字段  Windows任务计划服务异常原因_任务调度失败的处理方案  Win11如何设置省电模式 Win11开启电池节电功能【优化】  Windows10系统怎么查看防火墙状态_Win10安全中心网络保护  php能跑在stm32上吗_php在stm32微控制器上的移植方法【介绍】  c++怎么编写动态链接库dll_c++ __declspec(dllexport)导出与调用【方法】  Win11怎样彻底卸载自带应用_Win11彻底卸载自带应用方法【步骤】  Win11怎么关闭防火墙通知_屏蔽Win11安全中心安全警告弹窗【技巧】  如何更改Windows资源管理器的默认启动位置？（快速访问/此电脑）  Win10怎样卸载DockerDesktop_Win10卸载DockerDesktop步骤【步骤】  Win11怎么解压RAR文件 Win11自带解压功能使用方法  如何使用Golang实现RPC序列化与反序列化_Golang RPC数据编码与解码方法  Win10怎样卸载TeamViewer_Win10卸载TeamViewer步骤【教程】  Win11开机速度慢怎么优化_Win11系统启动加速设置指南【方法】  如何在 Go 项目开发中正确处理本地包导入与远程模块路径的一致性问题  php删除数据怎么加限制_带where条件删除避免全删【指南】  Win11摄像头无法使用怎么办_Win11相机隐私权限开启教程【详解】  php中$this和::能混用吗_对象与静态作用域冲突解决【方法】  php8.4新语法match怎么用_php8.4match表达式替代switch【方法】  MAC怎么设置程序窗口永远最前_MAC窗口置顶插件安装与快捷设置【方法】  如何使用Golang table-driven fuzz测试_多数据随机化发现缺陷  c++中如何计算坐标系中两点间距离_c++勾股定理求距离  Win10闹钟铃声怎么自定义 Win10闹钟自定义铃声教程【方法】  LINUX如何查看文件类型_Linux中file命令的识别与应用  SAX解析器是什么，它与DOM在处理大型XML文件时有何不同？  Win11怎么设置虚拟内存最佳大小_Windows11性能选项自定义分页文件  Python模块的__name__属性如何由导入方式决定？  如何使用Golang开发简单的聊天室消息存储_Golang WebSocket数据持久化方法  VSC怎么创建PHP项目_从零开始搭建项目的步骤【操作】  Bpmn 2.0的XML文件怎么画流程图  Win11怎么设置右键刷新选项_Windows11显示更多选项技巧  Windows如何设置登录时的欢迎屏幕背景？（锁屏界面）  MAC怎么截图并快速编辑_MAC自带截图快捷键与标注工具使用【方法】  VSC怎样用终端运行PHP_命令行执行脚本的步骤【教程】  如何在Golang中验证模块完整性_Golanggo.sum校验与安全实践  Mac的Time Machine怎么用_Mac系统备份与数据恢复【完整指南】  如何使用Golang开发基础文件下载功能_Golang HTTP文件响应与缓存实现  如何在 Go 中可靠地测试含 time.Time 字段的结构体  如何使用Golang构建基础消息队列模拟_Golang消息发送与消费实现方法  Mac的访达（Finder）怎么用_Mac文件管理入门教程【详解】  Win10如何卸载Skype_Win10卸载Skype步骤【步骤】  c++怎么使用std::filesystem遍历文件夹_c++ 递归查找文件与权限修改【技巧】  Win11如何添加/删除输入法 Win11切换中英文输入法快捷键【设置】  C#怎么创建控制台应用 C# Console App项目创建方法  Mac怎么进行语音输入_Mac听写功能设置与使用【教程】  Windows蓝屏错误0x00000018怎么处理_驱动初始化错误解决  小程序里php怎么变mp4_小程序调用php生成mp4视频方法【教程】  c++怎么用jemalloc c++替换默认内存分配器【性能】  如何在 Python 中将 ISO 8601 时间戳转换为日期并计算日期差值  Win10任务栏天气和资讯怎么关闭 Win10禁用新闻和兴趣功能【教程】 

 2025-12-30