0

0

javascript如何实现深拷贝_有哪些方法和陷阱【教程】

夢幻星辰

夢幻星辰

发布时间:2026-01-21 19:05:16

|

806人浏览过

|

来源于php中文网

原创

json.parse(json.stringify()) 不能用于生产环境,因其会丢失 date、regexp、undefined、function、symbol、bigint 等类型,并无法处理循环引用;仅限纯 json 安全结构的临时调试。

javascript如何实现深拷贝_有哪些方法和陷阱【教程】

JSON.parse(JSON.stringify()) 为什么不能用在生产环境

它看似简单直接,但会默默丢失很多关键信息。遇到 DateRegExpundefinedfunctionSymbolBigInt 或循环引用时,要么报错,要么变成 null 或空对象。

比如:JSON.stringify({ d: new Date(), f() {} }) 返回 {"d":"2024-01-01T00:00:00.000Z"} —— 函数没了,Date 变成字符串,再 parse 就只是个普通字符串,不是 Date 实例。

实操建议:

Dora
Dora

创建令人惊叹的3D动画网站,无需编写一行代码。

下载
  • 仅限临时调试或确定数据是纯 JSON 安全结构(即只含 nullbooleannumberstringarrayobject,且无循环)时快速使用
  • 永远不要用于表单状态、配置对象、API 响应缓存等真实业务场景
  • 如果必须用,加一层 try...catch 并记录降级日志

structuredClone() 是目前最靠谱的原生方案吗

是的,但得看运行环境。它是浏览器和 Node.js(v17.0+ 启用 --experimental-structured-clone,v18.15+ 默认启用)提供的标准深拷贝 API,支持 DateMapSetRegExpArrayBufferTypedArrayBigInt 和循环引用,且不序列化为字符串。

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

但它不支持 functionundefinedSymbol —— 这些值会被忽略(不是报错),而且无法自定义处理逻辑。

实操建议:

  • 检查目标环境是否支持:typeof structuredClone === 'function'
  • 对含 function 的对象(如 Vue/React 组件选项、带方法的类实例),不能依赖它
  • Node.js 中若版本低于 18.15,需启动参数或改用其他方案
  • 它比手写递归快,也比 JSON 方案更安全,适合多数现代前端项目的数据层拷贝

手写递归实现深拷贝要注意哪些关键点

核心是识别类型、处理循环引用、保留原型链(可选)、跳过不可枚举或特殊属性。漏掉任一环节都可能引发静默错误或内存爆炸。

常见陷阱:

  • typeof 判断对象类型不准 —— typeof null === 'object'typeof [] === 'object',必须结合 Object.prototype.toString.call()Array.isArray()
  • 没缓存已遍历对象 → 遇到循环引用直接溢出
  • 直接用 new obj.constructor() 复制实例 → 构造函数可能有副作用,或不接受无参调用
  • 忽略 Map/Set 的键值对顺序或引用关系 → 拷贝后行为异常

一个最小可行骨架示例(仅示意逻辑):

function deepClone(obj, cache = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (cache.has(obj)) return cache.get(obj);
  
  const cloned = Array.isArray(obj) ? [] : {};
  cache.set(obj, cloned);
  
  for (const key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      cloned[key] = deepClone(obj[key], cache);
    }
  }
  return cloned;
}

Lodash 的 cloneDeep() 在什么情况下会出问题

它覆盖了绝大多数边界情况,但仍有几个隐蔽坑点:

  • 对带有自定义 toJSON() 方法的对象,会优先调用该方法再拷贝返回值,而不是按原结构深拷贝 —— 这可能导致意外截断(例如某些 ORM 模型对象)
  • 拷贝 PromiseGeneratorProxy 等非标准可枚举对象时,结果是空对象或浅拷贝,文档里没强调这点
  • 如果对象含有大量嵌套且深度超过 V8 调用栈限制(约 10k 层),仍会抛 RangeError: Maximum call stack size exceeded
  • 打包体积:单独为一个 cloneDeep 引入整个 Lodash,在轻量项目里可能得不偿失

如果你的项目已用 Lodash,它仍是当前最省心的选择;但若只是需要深拷贝,建议评估是否真要承担它的体积和隐式行为。

真正难的从来不是“怎么拷”,而是“拷完还像原来那样工作”——类型、引用、构造逻辑、不可枚举属性、环境兼容性,缺一不可。随便挑一个没处理好的点,上线后就可能表现为某个表单提交丢失时间、某个图表渲染错乱、某次撤销操作回退失败。

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

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

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

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

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

455

2023.08.07

json是什么
json是什么

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

546

2023.08.23

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

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

334

2023.10.13

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

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

82

2025.09.10

string转int
string转int

在编程中,我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算,或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1010

2023.08.02

java中boolean的用法
java中boolean的用法

在Java中,boolean是一种基本数据类型,它只有两个可能的值:true和false。boolean类型经常用于条件测试,比如进行比较或者检查某个条件是否满足。想了解更多java中boolean的相关内容,可以阅读本专题下面的文章。

367

2023.11.13

java boolean类型
java boolean类型

本专题整合了java中boolean类型相关教程,阅读专题下面的文章了解更多详细内容。

42

2025.11.30

c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

254

2023.09.22

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

3

2026.03.11

热门下载

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

精品课程

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

共42课时 | 9.4万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 1.6万人学习

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

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