0

0

如何深度克隆对象javascript_有哪些可行的方法【教程】

狼影

狼影

发布时间:2026-01-30 19:30:40

|

494人浏览过

|

来源于php中文网

原创

JavaScript深度克隆推荐structuredClone()(现代环境)、JSON序列化(仅POJO)、手写递归(需WeakMap防循环)或Lodash的cloneDeep()(工程首选),需注意类型支持与引用一致性。

如何深度克隆对象javascript_有哪些可行的方法【教程】

JavaScript 没有原生的“深度克隆”函数,Object.assign() 和展开运算符 {...obj} 都只做浅拷贝,嵌套对象/数组仍共享引用——这是绝大多数意外修改的根源。

structuredClone()(推荐但注意兼容性)

这是目前最标准、语义最清晰的深度克隆方案,能正确处理 DateMapSetArrayBuffer 等内置类型,且自动跳过不可枚举属性和函数。

  • 仅支持现代环境:Chrome 98+、Firefox 94+、Edge 98+;Node.js 17.0+(需启用 --harmony-structured-clone 标志,18.12+ 默认开启)
  • 不支持 RegExpErrorPromisefunctionundefinedSymbol 键——遇到会直接抛错:DataCloneError
  • 示例:const clone = structuredClone(originalObj);

JSON.parse(JSON.stringify(obj))(快但限制极多)

这是最常被误用的“伪深克隆”,本质是序列化再反序列化,只适用于纯数据对象(POJO)。

  • 会丢失:Date(变成字符串)、undefined(被忽略)、function(被忽略)、RegExp(变成空对象)、NaN/Infinity(变成 null
  • 无法处理循环引用,直接报错:TypeError: Converting circular structure to JSON
  • BigInt 报错:TypeError: Do not know how to serialize a BigInt
  • 仅适合临时调试或已知结构简单、无副作用的数据

手写递归克隆(可控但易漏边界)

当需要支持 RegExpDateMapSet 或处理循环引用时,必须自己实现。关键不是“写得短”,而是覆盖类型判断和引用缓存。

j2me3D游戏开发简单教程 中文WORD版
j2me3D游戏开发简单教程 中文WORD版

本文档主要讲述的是j2me3D游戏开发简单教程; 如今,3D图形几乎是任何一部游戏的关键部分,甚至一些应用程序也通过用3D形式来描述信息而获得了成功。如前文中所述,以立即模式和手工编码建立所有的3D对象的方式进行开发速度很慢且很复杂。应用程序中多边形的所有角点必须在数组中独立编码。在JSR 184中,这称为立即模式。希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以过来看看

下载

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

  • 必须用 WeakMap 缓存已克隆的对象,否则循环引用会溢出
  • 区分 Array.isArray()typeof obj === 'object',避免把 null 当对象处理
  • new obj.constructor() 不安全:自定义类可能没有无参构造函数,或构造函数有副作用
  • 更稳妥的做法是按类型分别处理:if (obj instanceof Date)new Date(obj.getTime())if (obj instanceof RegExp)new RegExp(obj.source, obj.flags)

Lodash 的 _.cloneDeep()(工程首选)

在真实项目中,除非有强约束(如不能引入依赖),否则直接用 _.cloneDeep() 是最省心的选择。

  • 支持所有常见类型:DateRegExpMapSetTypedArray、甚至 Buffer(Node.js)
  • 自动检测并处理循环引用,不报错也不卡死
  • 可被 Tree-shaken(ESM 导入下),体积影响可控:import { cloneDeep } from 'lodash-es';
  • 注意:不要用 lodash 全量包,它默认是 CommonJS,破坏 ESM 构建链路

真正麻烦的从来不是“怎么克隆”,而是“克隆后谁负责维护引用一致性”。比如克隆一个含事件监听器或 DOM 节点的对象,深克隆反而会让逻辑断裂——这时候该考虑的往往不是克隆,而是重构数据流或使用不可变更新模式。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

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

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

420

2023.08.07

json是什么
json是什么

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

536

2023.08.23

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

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

312

2023.10.13

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

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

77

2025.09.10

chrome什么意思
chrome什么意思

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

841

2023.08.11

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

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

746

2023.11.06

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

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

1423

2023.08.21

IE浏览器自动跳转EDGE如何恢复
IE浏览器自动跳转EDGE如何恢复

ie浏览器自动跳转edge的解决办法:1、更改默认浏览器设置;2、阻止edge浏览器的自动跳转;3、更改超链接的默认打开方式;4、禁用“快速网页查看器”;5、卸载edge浏览器;6、检查第三方插件或应用程序等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

382

2024.03.05

C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.6万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号