讲师中心 微信公众号
AI工具推荐 视频效率加速

JavaScript怎样实现深拷贝【教程】

陌墨同学_2224

陌墨同学_2224

发布时间:2026-01-22 17:33:34

|

591人浏览过

|

来源于php中文网

原创

structuredClone()是目前最值得优先尝试的深拷贝方案,它原生支持且能正确处理Date、RegExp、Map、Set等类型及循环引用,但不支持函数、undefined、Symbol;兼容性不足时可选lodash.cloneDeep()。

javascript怎样实现深拷贝【教程】

JavaScript 没有内置可靠的通用深拷贝方法,JSON.parse(JSON.stringify(obj)) 看似简单,但会丢函数、undefined、Symbol、Date、RegExp、Map、Set、循环引用等,实际项目中直接用它等于埋雷。

为什么 structuredClone() 是目前最值得优先尝试的方案

这是浏览器和 Node.js(v17.0+)原生支持的真正深拷贝 API,能正确处理 Date、RegExp、Map、Set、ArrayBuffer、TypedArray、Error、Blob、URL 等,也支持循环引用 —— 前提是目标环境支持。

  • Node.js 需 v17.0+ 且启用 --experimental-structured-cloning(v18.15+ 和 v20.0+ 默认启用)
  • Chrome 98+、Firefox 94+、Safari 15.4+ 已支持;Edge 同 Chromium 版本
  • 不支持函数、undefined、Symbol(报错),这点和 JSON.stringify 一致,但至少明确抛错,而不是静默丢失

用法很简单:const clone = structuredClone(original)。遇到不支持时,它会直接抛出 TypeError: structuredClone is not defined,比静默失败更容易定位问题。

lodash.cloneDeep() 在兼容性要求高时仍是务实选择

当需要支持老旧浏览器(如 IE)、或必须保留函数/Symbol/undefined 时,lodash.cloneDeep() 仍是经过大量生产验证的稳妥方案。但它不是零成本:包体积大(约 70KB min+gzip),且对自定义类实例默认只拷贝属性,不调用构造函数或原型方法。

立即学习“Java免费学习笔记(深入)”;

Edge TTS CN
Edge TTS CN

使用 node-edge-tts npm 包将文本转换为语音,支持多种声音、多语言、语速调节及音调控制等功能。

下载
  • 注意它对 new Date()、/regex/g、new Map() 等内置对象能正确处理
  • 若对象含自定义类实例(如 class User {}),需配合 cloneDeepWith 手动处理构造逻辑
  • 性能上比 structuredClone 慢 2–5 倍(取决于嵌套深度和类型),但对多数前端场景无感

示例:const clone = _.cloneDeep({ a: 1, b: new Date(), c: /test/g })

手写简易深拷贝函数只适合学习,别进生产

网上常见递归 + typeof 判断的手写实现,看似可控,实则极易漏掉边界情况:WeakMap/WeakSet 无法遍历、arguments 对象类型特殊、Promise 和 Generator 不该被“拷贝”而应被拒绝、document 节点或 window 引用一碰就崩……

  • 哪怕加上循环引用检测(用 WeakMap 记录已访问对象),也难覆盖所有内置类型行为差异
  • 比如 new Number(42) 和 new Boolean(true) 是对象,但 JSON.stringify 会转成原始值,手写逻辑稍有不慎就和 JSON 行为不一致
  • 真正需要极致控制的场景(如状态序列化、跨 worker 通信),应明确约束输入类型,而非试图“通吃”

真要写,至少先加一层防御:if (obj === null || typeof obj !== 'object') return obj,再分 Array/Object/Date/RegExp 等处理 —— 但这只是起点,不是终点。

深拷贝的代价常被低估:先问自己是否真的需要

很多场景下所谓“深拷贝需求”,其实是状态管理混乱或设计过早优化的结果。例如:

  • React 中用 useState 更新嵌套对象,用展开运算符或 Immer 更安全高效
  • 配置合并(如 Object.assign 或 lodash.merge)不需要完整深拷贝
  • 仅读取或临时计算时,用 structuredClone 或 cloneDeep 没问题;但高频操作(如每帧深拷贝渲染数据)可能成为性能瓶颈

真正棘手的从来不是“怎么拷”,而是“哪些字段不该拷”“哪些引用该保留”“拷完后如何校验一致性”——这些没法靠一个函数解决。

热门AI工具

更多
WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2195

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

3442

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1156

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

3939

2025.09.10

chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

2806

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

5599

2023.11.06

Chrome开启无痕模式
Chrome开启无痕模式

本专题整合了Chrome无痕模式开启相关内容,阅读专题下面的文章了解更多详细教程。

3987

2026.03.24

edge是什么浏览器
edge是什么浏览器

Edge是一款由Microsoft开发的网页浏览器,是Windows 10操作系统中默认的浏览器,其目标是提供更快、更安全、更现代化的浏览器体验。本专题为大家提供edge浏览器相关的文章、下载、课程内容,供大家免费下载体验。

3022

2023.08.21

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

100

2026.10.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn