JavaScript中如何深拷贝对象_有哪些实现方法

JavaScript深拷贝核心是创建完全独立的新对象,避免引用共享;常用方法包括JSON.parse(JSON.stringify())(简洁但有类型限制)、structuredClone()(现代标准,支持多类型)、手写递归(可控但复杂)和Lodash的cloneDeep()(全面稳妥)。

javascript中如何深拷贝对象_有哪些实现方法

JavaScript中深拷贝对象,核心是创建一个与原对象完全独立的新对象,新对象的属性值(包括嵌套对象、数组)都不与原对象共享引用。直接赋值或浅拷贝(如Object.assign()、展开运算符{...obj})只复制第一层,深层仍共用内存地址,修改嵌套内容会影响原对象。

使用 JSON.parse(JSON.stringify()) —— 简单但有局限

这是最常用、写法最简洁的方法,适合纯数据对象(只含字符串、数字、布尔值、null、数组、普通对象):

✅ 优点:一行代码搞定,无依赖,兼容性好 ❌ 缺点明显:
  • 会丢失函数、undefined、Symbol、Date、RegExp、Map、Set、BigInt等类型
  • 循环引用会直接报错(TypeError: Converting circular structure to JSON
  • Date 变成字符串,正则变成空对象

示例:

const obj = { a: 1, b: { c: 2 } };
const copy = JSON.parse(JSON.stringify(obj)); // ✅ 深拷贝成功

使用 structuredClone() —— 现代浏览器推荐方案

这是 ES2022 新增的标准 API,专为深拷贝设计,支持更多内置类型且能处理循环引用(部分环境):

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

✅ 支持 Map、Set、Date、RegExp、ArrayBuffer、TypedArray、Error、Blob 等 ✅ 原生、安全、无需第三方库 ⚠️ 注意:
  • 目前不支持函数、undefined、Symbol(同 JSON 方法)
  • 循环引用在 Chrome 98+、Firefox 94+、Safari 15.4+ 支持;旧版本不支持会抛错

示例:

const obj = { date: new Date(), re: /abc/g };
const copy = structuredClone(obj); // ✅ 正确保留日期和正则

手写递归深拷贝 —— 完全可控,适合学习或特殊需求

适用于需要自定义行为(如忽略某些字段、处理函数、兼容老环境)的场景。关键逻辑是判断类型、递归处理对象/数组,其他类型直接返回:

typeofArray.isArray() 区分基本类型、数组、普通对象 用 Object.prototype.toString.call()instanceof 识别 Date、RegExp 等内置对象 需用 WeakMap 记录已拷贝的对象,避免循环引用无限递归

简化版示意(不含循环引用处理):

function deepClone(obj) {
  if (obj === null || typeof obj !== ‘object’) return obj;
  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof RegExp) return new RegExp(obj);
  const clone = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepClone(obj[key]);
    }
  }
  return clone;
}

借助第三方库 —— 生产环境稳妥选择

Lodash 的 _.cloneDeep() 是最成熟稳定的方案,覆盖几乎所有边界情况:

✅ 支持函数、undefined、循环引用、各种内置对象、不可枚举属性 ✅ 经过大量测试,性能优化良好 ⚠️ 缺点:引入额外依赖,包体积增加(可按需导入)

示例:

import { cloneDeep } from ‘lodash-es’;
const copy = cloneDeep(originalObj);

基本上就这些。日常开发优先考虑 structuredClone()(兼容性满足时),老项目或需极致兼容用 Lodash;JSON 方案仅限简单数据结构;手写适合教学或定制化强的场景。

以上就是JavaScript中如何深拷贝对象_有哪些实现方法的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1542836.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
如何使用JavaScript连接数据库_MongoDB和MySQL有什么区别呢
上一篇 2025年12月21日 14:32:13
JavaScript加密解密_JavaScript数据安全处理
下一篇 2025年12月21日 14:32:30

相关推荐

  • java中的method怎么理解 方法method的3个核心概念

    java中的method怎么理解 方法method的3个核心概念java中的method怎么理解 方法method的3个核心概念java中的method怎么理解 方法method的3个核心概念java中的method怎么理解 方法method的3个核心概念

    java中的方法是面向对象编程中实现代码复用的重要结构,与函数不同之处在于其必须属于类。1. 方法定义包含访问修饰符、返回类型、名称和参数列表;2. 调用时需通过对象或类(静态方法)执行;3. 方法可重载以支持不同参数;4. 静态方法直接通过类调用,适用于工具类操作;5. 访问修饰符控制可见性,如p…

    2026年8月26日 用户投稿
    000
  • 告别Laravel应用’黑盒’困境:如何使用ans-group/laravel-health-check实现全面健康监控

    Composer在线学习地址:学习地址 线上故障的“黑盒”之痛 在复杂的现代应用架构中,一个 laravel 应用往往依赖于多种服务和外部资源:数据库、缓存(redis/memcached)、消息队列、第三方 api、文件存储等等。当应用出现问题时,仅仅一句“服务器错误”或“连接超时”的日志,并不能…

    用户投稿 2026年8月26日
    000
  • 怎么优化苹果浏览器打开_Safari启动速度优化与缓存清理教程

    先检查网络连接,确认Wi-Fi或蜂窝数据正常,切换网络或重启路由器;若无效,还原网络设置。接着清理Safari缓存与历史记录,关闭多余标签页。更新iOS系统,重置浏览器设置,必要时强制重启手机。最后检查隐私设置与存储空间,关闭“阻止跨网站跟踪”测试,确保剩余空间充足。按序排查网络、缓存、系统问题,可…

    2026年8月26日
    000
  • 表单数据验证与过滤的最佳实践

    我们需要重视表单数据的验证和过滤,以确保应用的安全性和数据的完整性。1) 结合使用客户端和服务器端验证,客户端提供即时反馈,服务器端确保数据安全。2) 验证不同类型的数据,如字符串、数字、日期,确保格式和业务逻辑正确。3) 处理错误时提供友好的错误信息,并防止泄露敏感信息。4) 使用适当的函数过滤数…

    2026年8月26日
    000
  • 抖音星图任务赚钱是真的吗?巨量星图是骗了多少人

    随着抖音的持续火热,越来越多用户开始关注“抖音星图任务赚钱”这一话题。有人声称这是轻松变现的好机会,也有人质疑其真实性,甚至认为是骗局。那么,抖音星图任务到底能不能赚钱?今天我们就来深入剖析这个问题。 一、什么是抖音星图任务赚钱? 抖音星图任务赚钱,指的是通过参与抖音官方推出的“巨量星图”平台发布的…

    2026年8月26日
    300
  • 怎么进入路由器设置界面_浏览器登录路由器管理后台教程

    进入路由器设置界面,说白了就是通过浏览器访问路由器的管理后台。一般情况下,在浏览器地址栏输入路由器背面贴纸上的地址(通常是192.168.1.1或192.168.0.1),然后输入用户名和密码就能进去了。但实际操作中,可能会遇到各种小问题,下面就详细说说。 解决方案 确认路由器已连接: 确保你的电脑…

    2026年8月26日
    000
  • 第三方登录(微信、QQ等)集成方法

    集成第三方登录是为了简化用户注册和登录流程,提高用户体验和安全性。具体步骤包括:1)了解oauth 2.0协议;2)在应用中添加第三方登录入口;3)处理授权码和访问令牌;4)获取用户信息;5)处理常见问题和优化性能。 集成第三方登录(如微信、QQ等)是现代应用开发中常见的需求。为什么要集成第三方登录…

    2026年8月26日
    100
  • 如何使用guzzlehttp/promises优雅地解决PHP中的异步操作与并发难题

    Composer在线学习地址:[学习地址](https://pan.quark.cn/s/371f7205c512] 最近在开发一个电商后台服务时,我遇到了一个典型的性能瓶颈。我们的系统需要在一个请求中,同时从用户服务获取用户信息、从商品服务获取商品详情、再从库存服务查询库存量,最终整合数据后返回。…

    用户投稿 2026年8月26日
    000
  • Java中远程调试的作用 解析attach机制

    Java中远程调试的作用 解析attach机制Java中远程调试的作用 解析attach机制Java中远程调试的作用 解析attach机制Java中远程调试的作用 解析attach机制

    远程调试java应用的核心在于通过jvm参数或attach机制实现本地ide对远端程序的调试。配置时需添加jdwp参数如-agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=5005,或运行时使用jdb、visualvm等工具at…

    2026年8月26日 用户投稿
    000
  • 《旧日飞车》正式版年底登陆多平台 PS5/NS试玩版公开

    《旧日飞车》正式版年底登陆多平台 PS5/NS试玩版公开《旧日飞车》正式版年底登陆多平台 PS5/NS试玩版公开《旧日飞车》正式版年底登陆多平台 PS5/NS试玩版公开《旧日飞车》正式版年底登陆多平台 PS5/NS试玩版公开

    astrolabe games近日宣布,旗下ea阶段备受好评的复古赛车游戏《旧日飞车》现已推出ps5与nintendo switch平台的试玩版,并同步释出全新主机版本宣传影片。本作预计将于2025年结束抢先体验阶段,正式推出完整版本,并将登陆pc与多个主机平台。正式版内容将全面升级,包括超过30辆…

    2026年8月26日 用户投稿
    100
  • 如何实现热更新(代码无需重启服务)?

    热更新可以通过多种方式在不同编程环境中实现。1)在java中,使用java agent和instrumentation api可以动态修改类文件。2)在javascript中,通过webpack和parcel的模块热替换(hmr)实现热更新。3)在python中,使用importlib动态加载和更新…

    2026年8月26日
    000
  • java中的mapper是什么 mapper在数据访问层的角色

    java中的mapper是一种用于数据转换的设计模式。在数据访问层中,mapper的角色是将数据库数据映射到java对象,并封装数据访问逻辑。通过orm框架如mybatis或hibernate,mapper简化了数据访问,提高了代码的可读性和可维护性,但需注意避免过度依赖orm框架和接口设计的复杂性…

    2026年8月26日
    100
  • 如何将163邮箱换绑手机号

    在使用163邮箱时,可能会遇到需要更换绑定手机号的情况。例如原手机号已停用,或出于账户安全的考虑,都需要及时更新绑定信息。那么,如何正确完成163邮箱手机号的更换操作呢?接下来将为你一步步说明具体流程。 第一步,打开浏览器并登录你的163邮箱账号。成功进入邮箱主界面后,点击顶部导航栏中的“设置”按钮…

    2026年8月26日
    000
  • 路由器怎么重新设置_路由器网络参数重新配置教程

    答案:重置路由器需先物理复位,再登录管理界面配置上网方式、Wi-Fi名称密码及管理密码。关键步骤包括:按住Reset键5-10秒恢复出厂设置;用网线或默认Wi-Fi连接路由器;浏览器输入192.168.1.1或192.168.0.1登录管理界面;根据ISP提供的信息选择PPPoE、动态IP或静态IP…

    2026年8月26日
    000
  • Java中如何实现BDD 掌握Cucumber

    Java中如何实现BDD 掌握CucumberJava中如何实现BDD 掌握CucumberJava中如何实现BDD 掌握CucumberJava中如何实现BDD 掌握Cucumber

    bdd在java中通过cucumber实现,其核心是用自然语言描述行为并由代码验证。1. 引入cucumber依赖至pom.xml或build.gradle;2. 编写使用gherkin语法的feature文件,描述业务场景;3. 创建step definitions,将自然语言步骤映射到java代…

    2026年8月26日 用户投稿
    000
  • 如何解决Magento2CSP兼容性难题,yireo/magento2-csp-utilities助你构建更安全的网站

    可以通过一下地址学习composer:学习地址 当安全性遇上兼容性:Magento 2 CSP的痛点 作为一名magento开发者,我们都知道网站安全的重要性。内容安全策略(csp)是防御跨站脚本(xss)攻击的强大工具,它通过限制浏览器可以加载的资源来减少攻击面。在magento 2中启用csp是…

    用户投稿 2026年8月26日
    000
  • 惠普主机内存升级详细操作教程,提高多任务处理能力和运行速度

    惠普主机内存升级详细操作教程,提高多任务处理能力和运行速度惠普主机内存升级详细操作教程,提高多任务处理能力和运行速度惠普主机内存升级详细操作教程,提高多任务处理能力和运行速度惠普主机内存升级详细操作教程,提高多任务处理能力和运行速度

    升级惠普主机内存可提升多任务处理能力和运行速度。一、确认支持的最大容量与类型,通过任务管理器查看当前内存和插槽数量,并查主板支持的ddr版本及频率;二、准备兼容内存条、螺丝刀、防静电设备和干净工作台;三、关机断电后拆机箱,找到内存插槽,卸下旧内存或插入新条,垂直压紧至卡扣固定;四、合机箱后开机验证,…

    2026年8月26日 用户投稿
    000
  • 模型关联:一对一、一对多、多对多关系

    一对一、一对多和多对多关系在构建复杂系统中至关重要。1) 一对一关系通过django的onetoonefield实现,适用于用户和配置表。2) 一对多关系使用foreignkey,常见于用户和订单,需优化查询。3) 多对多关系通过manytomanyfield处理,适合用户和组,需定义中间表和优化查…

    2026年8月26日
    000
  • 谷歌浏览器弹窗广告怎么拦截_谷歌浏览器弹窗广告如何拦截详细方法

    先开启Chrome内置弹窗拦截并安装广告拦截插件,再关闭网站通知权限。具体操作为:进入设置→隐私和安全→网站设置,确保“弹出式窗口和重定向”处于阻止状态;推荐安装uBlock Origin、AdBlock Plus或AdGuard等扩展程序以深度过滤网页广告;同时在“通知”设置中关闭网站发送通知权限…

    2026年8月26日
    100
  • PHPComposer是什么_PHP包管理工具Composer入门

    Composer 是 PHP 依赖管理工具,可声明并自动安装第三方库、生成自动加载文件。通过 composer.json 定义依赖,composer.lock 锁定版本,vendor 目录存放库文件,使用 composer init 初始化项目,composer require 添加依赖,requi…

    2026年8月26日
    000

发表回复

登录后才能评论
关注微信