js如何深拷贝一个对象

要深拷贝一个javascript对象,最常用的方法是使用json.parse(json.stringify(obj))或现代浏览器提供的structuredclone()。1. 使用json.parse(json.stringify(obj))可快速实现深拷贝,能处理基本数据类型、数组和普通对象,但无法正确处理函数、undefined、symbol、bigint、date、regexp、map、set等特殊类型,且遇到循环引用会报错;2. structuredclone()是更强大的深拷贝方案,支持date、regexp、map、set、arraybuffer、typedarray、blob、file、imagedata等复杂类型,并能正确处理循环引用,但无法克隆函数,且在不支持该api的旧环境中不可用;3. 对于特殊需求如保留原型链或复制dom节点,需手动实现递归深拷贝函数。因此,在现代开发中推荐优先使用structuredclone(),若环境不支持则根据数据类型选择json方法或自定义函数,以确保深拷贝的准确性和兼容性。

js如何深拷贝一个对象

JavaScript里要深拷贝一个对象,就是创建一个新对象,它的所有属性(包括嵌套的子对象)都和原对象一模一样,但它们之间完全独立,修改其中一个不会影响另一个。这跟浅拷贝不一样,浅拷贝只会复制第一层,深层还是共享引用。要实现深拷贝,最常用的方法是利用

JSON.parse(JSON.stringify(obj))

,或者在现代浏览器环境里用更强大的

structuredClone()

解决方案

要深拷贝一个JavaScript对象,我们有几种途径,每种都有其适用场景和一些需要注意的地方。

最直接也最常被提起的,就是利用

JSON

对象的序列化和反序列化能力。当你把一个JavaScript对象通过

JSON.stringify()

转换成JSON字符串,再用

JSON.parse()

解析回来,你就得到了一个全新的对象。这个过程实际上是把原对象的内容“拍扁”成文本,再“重塑”出来,自然就切断了所有引用关系。

const originalObject = {  name: '张三',  age: 30,  address: {    city: '北京',    street: '朝阳路'  },  hobbies: ['阅读', '编程']};const deepCopyJSON = JSON.parse(JSON.stringify(originalObject));deepCopyJSON.address.city = '上海';console.log(originalObject.address.city); // 输出 '北京',原对象未受影响

这个方法简单粗暴,但它有明显的局限性。它只能处理JSON支持的数据类型,比如数字、字符串、布尔值、数组、普通对象。像函数、

undefined

Symbol

BigInt

Date

对象(会变成日期字符串)、

RegExp

对象,以及

Map

Set

这样的复杂类型,它就无能为力了,或者处理结果不符合预期。更麻烦的是,如果你的对象里有循环引用,

JSON.stringify()

会直接报错。

针对这些痛点,现代浏览器提供了一个更强大的API:

structuredClone()

。这个方法是基于结构化克隆算法实现的,它能处理更多的数据类型,包括

Date

RegExp

Map

Set

ArrayBuffer

TypedArray

Blob

File

ImageData

,甚至能妥善处理循环引用。在我看来,这简直是深拷贝的“瑞士军刀”。

const complexObject = {  name: '李四',  birthDate: new Date(),  data: new Map([['key1', 'value1']]),  reg: /test/i,  // 注意:函数是不能被 structuredClone 克隆的,如果包含函数会抛出错误  // myFunc: () => console.log('hello')};// 制造一个循环引用complexObject.self = complexObject;try {  const deepCopyStructured = structuredClone(complexObject);  console.log(deepCopyStructured.birthDate instanceof Date); // true  console.log(deepCopyStructured.data instanceof Map); // true  console.log(deepCopyStructured.reg instanceof RegExp); // true  console.log(deepCopyStructured.self === deepCopyStructured); // true,循环引用也被正确复制  console.log(deepCopyStructured !== complexObject); // true,是全新的对象} catch (e) {  console.error("structuredClone 错误:", e.message); // 如果包含不可克隆类型(如函数),会在这里捕获}

当然,如果你在旧环境或者有非常特殊的定制需求(比如要复制DOM节点,或者特定类的实例,并且要保留其原型链),你可能还需要自己写一个递归的深拷贝函数。但说实话,在大多数现代

以上就是js如何深拷贝一个对象的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 08:01:08
下一篇 2025年12月20日 08:01:20

相关推荐

  • JavaScript动画:解决CSS定位属性冲突导致的过渡失效问题

    本文深入探讨了javascript驱动的css动画中,当同时操作元素的`left`和`right`定位属性时,可能导致过渡效果失效的常见问题。文章详细解释了浏览器对此类操作的解析机制,并提供了一种通过统一使用单一水平定位属性(如`right`)来确保动画平滑过渡的解决方案,并通过一个卡片移动的实际案…

    2025年12月20日
    000
  • TypeScript中处理未赋值对象与真值检查的策略

    本文探讨了在TypeScript中对未赋值变量进行真值检查时遇到的常见编译错误,特别是当变量被声明为object类型时。通过深入分析TypeScript的类型系统和控制流分析,文章提出了两种核心解决方案:使用联合类型(object | undefined或object | null)来明确变量可能存…

    2025年12月20日
    000
  • 解决 Swiper 幻灯片重叠问题:CSS 修复指南

    本文旨在解决 swiper 幻灯片在特定情况下(尤其是使用“fade”效果时)出现的重叠问题。通过深入分析其可能的原因,并提供一个简洁有效的 css 解决方案,即利用 `opacity` 属性精确控制活动与非活动幻灯片的显示状态,确保幻灯片平滑切换,避免内容混淆,提升用户体验。 Swiper 幻灯片…

    2025年12月20日
    000
  • Vue 3中scrollLeft动画更新延迟的深层原因与解决方案

    本文深入探讨了vue 3应用中 `scrollleft` 属性在进行平滑动画时出现更新延迟或失效的问题。核心原因在于css属性 `scroll-behavior: smooth` 与频繁的javascript `scrollleft` 赋值操作之间的冲突。文章提供了禁用 `scroll-behavi…

    2025年12月20日
    000
  • 动态创建输入框在表单提交后保留值的教程

    本教程详细阐述了如何在用户提交表单后,将动态创建的html输入框中的值进行保留。核心方法是通过php将`$_post`数据转换为json格式,然后将其嵌入到javascript变量中。接着,javascript利用这些数据在页面重新加载时,为动态生成的输入框恢复之前用户输入的值,从而提升用户体验,避…

    2025年12月20日
    000
  • Angular 15 表单中单选按钮验证消息显示异常及默认值设置教程

    本文探讨了angular 15模板驱动表单中单选按钮验证消息不显示的问题,并提供了解决方案:移除验证条件中的`touched`属性。同时,文章演示了如何为单选按钮设置默认选中值,以确保表单验证的正确性和用户体验。 引言:Angular 单选按钮验证消息的常见困境 在 Angular 模板驱动表单中,…

    2025年12月20日
    000
  • Vue 3中scrollLeft属性更新DOM元素问题解析与解决方案

    在vue 3应用中,当尝试通过编程方式(如循环或定时器)快速更新dom元素的`scrollleft`属性以实现平滑滚动动画时,可能会遇到更新不同步或“阻塞”的现象,即元素滚动只在更新操作结束后才一次性发生。本文将深入探讨这一问题的根本原因,特别是与css属性`scroll-behavior: smo…

    2025年12月20日
    000
  • 浏览器扩展程序开发

    答案:开发浏览器扩展需掌握其核心结构与运行机制。首先创建manifest.json配置文件,定义扩展基本信息与权限;接着编写背景脚本监听事件,内容脚本操作页面DOM;通过弹出页面实现用户交互。以高亮链接为例,使用activeTab权限和chrome.scripting.executeScript注入…

    2025年12月20日
    000
  • 前端安全攻防:XSS与CSRF防护

    XSS攻击通过注入恶意脚本窃取用户数据,防范需输入过滤、输出编码、禁用危险API、启用CSP和HttpOnly;CSRF利用自动携Cookie机制伪造请求,防御需Anti-CSRF Token、校验Origin/Referer、二次确认和SameSite Cookie。 前端安全是现代 Web 开发…

    2025年12月20日
    000
  • 如何对JavaScript前端应用进行全面的性能分析与监控?

    前端性能优化需从开发、构建、运行时三阶段入手,结合工具链与真实数据持续改进。1. 使用 Chrome DevTools 分析主线程任务、内存泄漏与渲染瓶颈;2. 集成 Lighthouse 实现 CI/CD 中自动化评分,监控 FCP、LCP、CLS 等核心指标;3. 部署 RUM 采集生产环境性能…

    2025年12月20日
    000
  • JavaScript错误处理与监控系统

    前端错误监控需通过全局捕获、合理上报和堆栈还原提升稳定性。首先利用window.onerror和unhandledrejection监听运行时错误与Promise异常,捕获语法错误、资源加载失败等;针对跨域脚本需配置CORS以获取详细信息。错误上报采用navigator.sendBeacon确保页面…

    2025年12月20日
    000
  • JavaScript机器学习实践

    JavaScript能做机器学习。通过TensorFlow.js,可在浏览器或Node.js中构建模型,如用张量处理数据、训练线性回归模型,结合MobileNet实现图像分类,并适用于教育演示、用户行为预测等轻量级实时交互场景。 JavaScript也能做机器学习?当然可以。随着TensorFlow…

    2025年12月20日
    000
  • Web应用多标签页会话同步与页面重载教程

    本教程旨在解决Web应用中多标签页会话状态同步的问题,特别是当服务器端会话变量更新后,如何通知并重载所有已打开的客户端页面。我们将探讨传统方法的局限性,并详细介绍如何利用`localStorage`和`storage`事件实现高效、可靠的跨标签页通信与页面重载机制,确保用户体验的连贯性。 引言:多标…

    2025年12月20日
    000
  • Next.js getStaticProps 数据传递与组件属性接收深度解析

    本文深入探讨 next.js 中 `getstaticprops` 函数如何向页面组件传递数据。我们将阐明 `getstaticprops` 自动注入属性的机制,并区分其与普通 react 组件手动属性传递的场景。通过代码示例和注意事项,确保开发者能准确理解并处理 next.js 应用中的数据流与属…

    2025年12月20日
    000
  • 解决 Vue 3 中 scrollLeft 属性更新不同步的动画挑战

    本文探讨了在 Vue 3 应用中尝试通过 `scrollLeft` 属性实现平滑滚动动画时,可能遇到的 DOM 更新不同步问题。重点分析了 `scroll-behavior: smooth` CSS 属性如何意外地阻止了 `scrollLeft` 的即时更新,并提供了相应的解决方案和最佳实践,旨在帮…

    2025年12月20日
    000
  • 动态JavaScript输入框提交后值保留方案:PHP与JS协同实现

    针对javascript动态创建的输入框,在表单提交并页面刷新后如何保留用户输入值的问题,本教程提供一种无需ajax的解决方案。通过将php的`$_post`数据转换为json,并将其嵌入到javascript变量中,我们可以在客户端使用javascript重新创建输入框并填充其值,从而实现数据的持…

    2025年12月20日
    000
  • PHP与JavaScript结合:实现动态生成输入框的提交后数据回填

    针对javascript动态创建的输入框,本文介绍一种不依赖ajax,通过php将$_post数据编码为json并嵌入javascript,从而实现表单提交后数据自动回填的策略。这确保了用户体验的连贯性,即使页面刷新,动态生成的输入框也能保留上次提交的值。 在Web开发中,我们经常需要动态生成表单元…

    2025年12月20日
    000
  • PHP与JavaScript协同:实现动态生成输入框提交后值持久化

    本教程探讨如何在不使用ajax的情况下,解决javascript动态创建的输入框在表单提交并页面刷新后值无法保留的问题。核心方法是利用php将表单提交的`$_post`数据转换为json格式,然后嵌入到前端javascript变量中。javascript随后读取这些数据,用于重新填充动态生成的输入框…

    2025年12月20日
    000
  • WordPress中AJAX分页后动态加载JavaScript的策略

    本文旨在解决wordpress网站在使用ajax分页加载内容时,javascript代码无法作用于新加载元素的问题。我们将探讨两种核心策略:优先利用插件提供的特定事件,以及在没有特定事件时,通过全局监听xmlhttprequest的`readystatechange`事件来确保javascript代…

    2025年12月20日
    000
  • Material-UI Tooltip 高级样式定制:彻底移除默认背景与边框

    本教程详细指导如何在 react 应用中定制 material-ui tooltip 的样式,重点解决默认背景和边框的覆盖问题。通过利用 makestyles 定义自定义样式并将其正确传递给 tooltip 组件的 classes prop 中的 tooltip 插槽,您可以实现完全自定义的白色背景…

    2025年12月20日
    000

发表回复

登录后才能评论
关注微信