如何在 Javascript 中深度复制嵌套对象

如何在 javascript 中深度复制嵌套对象

如何在Javascript中深度复制嵌套对象

所以你有一个嵌套对象,假设你需要将其复制到与原始变量完全不同的另一个变量。

我们今天过得怎么样?
原物:
const obj1 = {name: ‘John Smith’, 地址: {mailing: {line1: ‘地址行 1’, line2: ‘地址行 2′, city:’纽约’}}};

复制对象:
方法一:
使用扩展运算符
const obj2 = {…obj1};
方法二:
有些人甚至更喜欢昂贵的操作:
const obj2 = JSON.parse(JSON.stringify(obj1));

方法 1 的问题是扩展运算符在没有引用的情况下复制对象,但它不会对嵌套对象执行此操作,例如为 obj1 的地址键。所以改变 obj2.address.line1 也会改变 obj1.address.line1。

而方法2看起来就是错误且昂贵。

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

那么我们该怎么做呢?
答案:
const obj2 = StructuredClone(obj1);

现在你已经创建了 obj1 的深层副本,并且 obj1 和 obj2 是完全不同的对象。

注意: StructuredClone() 方法是新推出的方法,可能无法在 2022 年 3 月之前的浏览器中运行。

这是我的第一篇文章。请发表评论并联系,让我知道我可以在下一篇文章中做得更好。

谢谢!!!

以上就是如何在 Javascript 中深度复制嵌套对象的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
React 系列:useState 与 useRef
上一篇 2025年12月19日 13:17:48
回归测试:确保动态开发环境中的软件稳定性
下一篇 2025年12月19日 13:18:03

相关推荐

  • 如何在前端实现客户端自定义导出路径和文件名?

    前端实现客户端自定义导出功能 在前端进行导出操作时,通常会直接触发浏览器的下载功能。然而,本文介绍一种在客户端自定义导出路径和文件名的方法。 解决方案 使用javascript和元素即可实现该功能。具体步骤如下: 立即学习“前端免费学习笔记(深入)”; 准备导出数据:将要导出的数据转化为csv格式字…

    2025年12月19日
    000
  • JavaScript 字符串转时间:为什么 10 月份会变成 11 月份?

    JavaScript 字符串时间转换偏差 文章开头: 在 JavaScript 中,使用 new Date() 构造函数将字符串转换为时间对象时,用户可能会卡壳,发现对应月份的转换稍有偏移。让我们深入探讨这一现象及其背后的原因。 问题:字符串转换为 10 月份变成了 11 月份 立即学习“Java免…

    2025年12月19日
    000
  • 如何使用正则表达式校验 RTMP 播放地址?

    视频播放地址的正则校验 视频播放地址的正则校验涉及多种协议,例如 rtmp。本文将重点介绍 rtmp 协议的播放地址校验。 正则校验 对于 rtmp 播放地址的正则校验,可以使用以下表达式: ^rtmp[es]?://[^/]+/.*?(?:.mp4|.mp3|.ts)$ 含义 ^:行首锚定。rtm…

    2025年12月19日
    000
  • 如何使用 JS/jQuery 获取加载后的 HTML 代码?

    JS/jQuery 获取页面加载后的 HTML 代码 在许多情况下,我们希望获取加载完成后 HTML 页面的代码,以反映任何动态调整后的更改。例如,页面中可能有动态操作节点的 JavaScript。 要获取加载后的 HTML 代码,有以下方法: **$(function(){ … }):…

    2025年12月19日
    000
  • 如何使用正则表达式提取字符串中的前几个字母字符?

    从字符串中提取前几个字母字符 本文将介绍如何使用正则表达式提取由前几个字母字符和后几个数字字符组成的字符串中的字母字符。 问题描述如下: 已知字符串具有特定格式,前 2 至 4 个字符为字母,后跟至少 1 个数字,总长度不超过 7 个字符。需要使用 javascript 正则表达式来提取这些字母字符…

    2025年12月19日
    000
  • 如何解决下拉列表刷新导致数据丢失的问题?

    下拉列表刷新问题解决方案 在提交数据时,下拉列表需要刷新,以免影响数据准确性。但如果您希望在进行操作后保留下拉列表绑定的数据,同时在刷新页面时重新刷新下拉列表,可以使用以下三种方法: 通过页面重定向实现:在进行下拉列表操作后,将其值存储在会话变量中。在刷新页面时,从会话变量中检索该值并重新绑定到下拉…

    2025年12月19日
    100
  • 页面组件无响应,如何避免引用未定义变量?

    页面组件无响应 在开发过程中,遇到过这样的问题:页面组件有时候有反应,有时候没有反应。 确切地说,当realtyProcessAccount.customer.nature不为空时,组件有响应,其他时候没有响应。 造成这个问题的原因很可能是引用了未定义的变量。具体来说,如果控制器中声明了realty…

    2025年12月19日
    000
  • 如何获取页面加载完毕后的 HTML 代码?

    动态更新 HTML 代码:获取页面加载完毕后的 HTML 页面加载完成后获取 HTML 代码通常需要使用 JavaScript 脚本。其方法如下: 利用事件:页面加载完毕后会触发 DOMContentLoaded 或 load 事件,可以监听这些事件,并在其执行时获取 HTML 代码。使用异步函数:…

    2025年12月19日
    100
  • 页面关闭时Ajax请求失效:如何处理?

    页面关闭时 ajax 失效:原因分析和解决方法 在页面关闭时触发的方法中,有时会遇到 ajax 请求不执行的问题。这可能是由于以下原因引起的: 浏览器关闭时请求中断 浏览器在关闭时会终止所有正在进行的请求。因此,即使你设置了 async: false,ajax 请求也很可能会被中断。 解决方案: 使…

    2025年12月19日
    000
  • 解决文件处理挑战:基于 Meteorjs 构建的 Meteor 文件

    meteor files 由 dimitry 领导下的 veliov group 开发,是一个用于管理大型文件上传和下载的文件处理解决方案,基于 meteor.js 构建。 Meteor Files 最初作为开源库推出,现已成为成熟的 SaaS 产品,可满足需要无缝文件共享功能的行业(主要是在处理大…

    2025年12月19日
    100
  • 如何将一维嵌套数组转换为包含子级属性的树状数据?

    如何将嵌套数组转换为具有子级属性的数据格式 本文将演示如何将给定的一维嵌套数组: [ { “id”: 1, “key”: “”, “name”: “系统管理”, “level”: 1, “type”: 1, “icon”: “”, “code”: “a001”, “parentcode”: “”, …

    2025年12月19日
    100
  • 如何使用 Canvas 实现图片的动态模糊效果?

    canvas 动态模糊实现 想要在 canvas 上实现图片的动态模糊,模拟曝光后的效果,可以采用以下步骤: 1. 获取原始图片 首先,加载原始图片到 canvas 中。 2. 创建模糊滤镜 使用 canvasrenderingcontext2d 对象中的 filter 属性创建一个模糊滤镜。模糊程…

    2025年12月19日
    000
  • 如何使用 Canvas 实现图片的动态模糊效果,类似于曝光照片的模糊效果?

    Canvas 实现图片动态模糊效果 问题:如何使用 Canvas 实现图片的动态模糊效果,类似于曝光照片的模糊效果? 回答: 解决图片动态模糊效果的常见技术是实施高斯模糊过滤器。高斯模糊是一种图像处理技术,它通过使用高斯内核对图像中的每个像素进行加权平均,从而创建平滑和模糊的效果。 在 Canvas…

    2025年12月19日
    000
  • 为什么 jQuery ajax withCredentials:true 在 Chrome 中无法交换 Cookie?

    jquery ajax withcredentials:true 问题 问题:在 chrome 浏览器中,使用 ajax 发送请求时,设置 withcredentials:true 却无法与服务器交换 cookie。在 safari 和 firefox 浏览器中可以正常工作。如何解决? 答案:sta…

    2025年12月19日
    000
  • 如何将数组 [1,2,3,4,5,6,7,8,9] 切分成三个连续子数组:[1,4,7],[2,5,8],[3,6,9]?

    js数组问题:将数组切分成连续子数组 问题:数组[1,2,3,4,5,6,7,8,9]如何分成三个连续子数组:[1,4,7],[2,5,8],[3,6,9]? 回答:给出前提:连续子数组。 是否需要连续子数组,这决定了具体实现方法不同。 连续子数组实现方法: 将数组分成三个等长的子数组,每个子数组包…

    用户投稿 2025年12月19日
    000
  • 如何确保多个输入框必填且按顺序填充?

    如何确保输入框必填且按顺序填充 为了确保多个输入框之间不能为空且必须从第一个输入框开始填起,可以采取以下步骤: 给输入框添加名称属性 为每个输入框分配一个唯一的名称属性,例如: 添加事件监听器 在每个输入框上添加一个事件监听器,例如 blur 或 change。当焦点离开或内容发生变化时触发此事件监…

    2025年12月19日
    000
  • 为什么函数 b 的 eat 方法调用后没有输出?

    为什么函数 b 的 eat 方法调用后不输出? 问题中提供的代码包含两个函数:a 和 b。函数 a 是一个构造函数,用于创建一个具有 name 和 age 属性的对象,以及一个 say 方法,该方法打印 age 属性。函数 b 也是一个构造函数,其 eat 方法调用函数 a,但没有提供任何参数。 代…

    2025年12月19日
    000
  • 如何编写视频播放地址的正则表达式校验?

    如何编写视频播放地址的正则表达式校验? 常见的视频播放地址格式包括rtmp等。本文将介绍如何编写正则表达式来验证这些地址的有效性。 rtmp地址校验 rtmp地址通常具有以下格式: rtmp://// 其中: serveraddress为rtmp服务器的ip地址或域名appname为应用程序名str…

    2025年12月19日
    000
  • 如何使用 Ajax 读取 XML 并显示子节点数据?

    如何使用 ajax 读取 xml 并显示子节点数据 通过 ajax 读取 xml 是一种从服务器获取数据的常见方法。在读取 xml 后,通常需要显示子节点中的数据。在本问答中,我们将探讨如何使用 javascript 读取 xml 并显示其子节点中的数据。 读取 xml 首先,需要使用 xmlhtt…

    2025年12月19日
    000
  • 动态添加元素后事件失效了?如何解决?

    JS 追加元素后绑定事件失效的解决之道 在网页开发中,有时需要通过 JavaScript 动态追加元素到 DOM 中。然而,在这些追加的元素上绑定事件类时却可能遇到失效的问题。 问题场景: 当页面引入了第三方 JS 类,并通过添加指定的类名(例如,.myClass)来调用事件方法时,动态追加的标签即…

    2025年12月19日
    000

发表回复

登录后才能评论
关注微信