当前位置：首页 > news >正文

js 对象深拷贝的五种方法

news 来源：原创 2025/7/18 12:08:25

js 对象深拷贝

今天遇到一个bug ，子组件页面修改了内容，但是按了取消保存按钮，没有将数据传回父组件的，但是父组件的数据改了，原因是通过子组件接受父组件的参数对象层级深没有做深拷贝的原因。

在 JavaScript 中，深拷贝是指复制一个对象及其所有嵌套对象的完整副本，而不是仅仅复制引用。以下是几种实现深拷贝的方法：

方法 1：使用 `JSON.parse` 和 `JSON.stringify`

这是最简单的方法，但有一些限制（例如，无法拷贝函数、undefined、Symbol 等）。

const obj = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(obj));console.log(deepCopy); // { a: 1, b: { c: 2 } }

注意：

无法拷贝函数、undefined、Symbol。
不支持循环引用。

方法 2：使用递归实现深拷贝

手动实现一个递归函数来处理对象和数组。

function deepClone(obj) {if (obj === null || typeof obj !== "object") {return obj; // 基本类型直接返回}// 创建一个新对象或数组const copy = Array.isArray(obj) ? [] : {};for (const key in obj) {if (obj.hasOwnProperty(key)) {copy[key] = deepClone(obj[key]); // 递归拷贝}}return copy;
}const obj = { a: 1, b: { c: 2 }, d: [3, 4] };
const deepCopy = deepClone(obj);console.log(deepCopy); // { a: 1, b: { c: 2 }, d: [3, 4] }

方法 3：使用 `lodash` 库

lodash 是一个流行的 JavaScript 工具库，其中的 cloneDeep 方法可以轻松实现深拷贝。

import _ from "lodash";const obj = { a: 1, b: { c: 2 }, d: [3, 4] };
const deepCopy = _.cloneDeep(obj);console.log(deepCopy); // { a: 1, b: { c: 2 }, d: [3, 4] }

优点：

支持复杂对象（如循环引用）。
可靠且易用。

方法 4：使用 `structuredClone`（现代浏览器支持）

structuredClone 是一种原生方法，用于深拷贝对象。

const obj = { a: 1, b: { c: 2 }, d: [3, 4] };
const deepCopy = structuredClone(obj);console.log(deepCopy); // { a: 1, b: { c: 2 }, d: [3, 4] }

优点：

支持循环引用。
原生方法，性能较好。

注意：

仅在现代浏览器和 Node.js 17+ 中支持。

方法 5：使用 `Object.create` 和递归

通过 Object.create 创建新对象，并递归拷贝属性。

function deepClone(obj) {if (obj === null || typeof obj !== "object") {return obj;}const copy = Object.create(Object.getPrototypeOf(obj));for (const key of Object.keys(obj)) {copy[key] = deepClone(obj[key]);}return copy;
}const obj = { a: 1, b: { c: 2 }, d: [3, 4] };
const deepCopy = deepClone(obj);console.log(deepCopy); // { a: 1, b: { c: 2 }, d: [3, 4] }

总结

简单对象：可以使用 JSON.parse(JSON.stringify(obj)。
复杂对象：推荐使用 lodash.cloneDeep 或 structuredClone。
自定义实现：可以使用递归函数处理特殊需求。

js 对象深拷贝的五种方法

js 对象深拷贝今天遇到一个bug ，子组件页面修改了内容，但是按了取消保存按钮，没有将数据传回父组件的，但是父组件的数据改了，原因是通过子组件接受父组件的参数对象层级深没有做深拷贝的原因。在 JavaScript 中&…...

编程日记 2025/7/18 12:08:25

1.1 计算机网络的概念

首先来看什么是计算机网络，关于计算机网络的定义并没有一个统一的标准，不同的教材有不同的说法（这是王道书对于计算机网络的定义），我们可以结合自己的生活经验去体会这个定义。可以用不同类型的设备去连接计算机网络…...

编程日记 2025/7/16 11:09:57

当EFISH-SBC-RK3576遇上区块链：物联网安全与可信数据网络‌

在工业物联网场景中，设备身份伪造与数据篡改是核心安全隐患。‌EFISH-SBC-RK3576‌ 通过 ‌硬件安全模块区块链链上验证‌，实现设备身份可信锚定与数据全生命周期加密，安全性能提升10倍以上。 1. 安全架构：从芯片到链的端到端防…...

编程日记 2025/7/18 11:59:55

k8s 基础知识：Service + 负载均衡（下）

但凡觉得哪块说有问题，欢迎评论区留言探讨，谢谢 K8s Service 是 Kubernetes 集群中用于暴露应用程序的一种资源对象： 一、概念与作用： Service 可以将一组具有相同功能的 Pod（容器组）定义为一个逻辑分组…...

编程日记 2025/7/16 12:10:21

deepseek(2)——deepseek 关键技术

1 Multi-Head Latent Attention (MLA) MLA的核心在于通过低秩联合压缩来减少注意力键（keys）和值（values）在推理过程中的缓存，从而提高推理效率： c t K V W D K V h t c_t^{KV} W^{DKV}h_t ctKVWDKVht…...

编程日记 2025/7/16 17:00:35

机器学习之条件概率

1. 引言概率模型在机器学习中广泛应用于数据分析、模式识别和推理任务。本文将调研几种重要的概率模型，包括EM算法、MCMC、朴素贝叶斯、贝叶斯网络、概率图模型（CRF、HMM）以及最大熵模型，介绍其基本原理、算法流程、应用场景及优势。 2. EM算法（Expectation-Maximizati…...

编程日记 2025/7/18 11:57:40

第四天文件操作（文本/CSV/JSON） - 异常处理机制 - 练习：日志文件分析器

Python文件操作与异常处理完全指南：从入门到实战一、为什么要学习文件操作和异常处理？ 在Python编程的初级阶段，我们主要处理内存中的数据。但当我们需要： 永久保存数据处理各种格式的数据文件分析系统日志构建数据处理管道 …...

编程日记 2025/7/17 22:12:54

多onnx模型导出合并调研（文本检测+方向分类+文本识别）

👑主页：吾名招财 👓简介：工科学硕，研究方向机器视觉，爱好较广泛… 💫签名：面朝大海，春暖花开！多onnx模型合并导出调研（文本检测+方向分类+文本识别）引言1，尝试合并两个模型（文本方向分类+文本识别模型）（并行合并）（1）文本方向分类（2）文本识别模型（…...

编程日记 2025/7/18 10:46:05

linux scp复制多层级文件夹到另一服务器免密及脚本配置

文章目录生成 SSH 密钥对将公钥复制到目标服务器验证免密登录scp 多级文件夹复制脚本生成 SSH 密钥对在本地机器上，使用 ssh-keygen 命令生成 SSH 密钥对。打开终端并执行以下命令： ssh-keygen -t rsa 按提示连续按回车键，默认会在 ~/.ss…...

编程日记 2025/7/18 12:02:55

Ubuntu 22.04 安装向日葵远程控制

1. 前言由于公司客户的服务器用是图形化桌面，所以我们需要一个远程控制工具来控制服务器，目前市面上两款比较热门的控制软件就是ToDesk和向日葵了，我们今天就来学习一下向日葵的使用 2. 下载软件前往向日葵官网下载向日葵远程控制app官…...

编程日记 2025/7/10 1:34:45

Spring Boot（十七）：集成和使用Redis

Redis（Remote Dictionary Server，远程字典服务器）是一个开源的、基于内存的数据结构存储系统，它可以用作数据库、缓存和消息中间件。Spring Boot 中集成和使用Redis主要涉及以下几个步骤：添加依赖在项目的pom.xml文件中添加Redis的依赖。Spring Boot提供了对Redis的集…...

编程日记 2025/7/18 12:04:22

Redisson - 分布式锁和同步器

文章目录锁（Lock）公平锁（Fair Lock）联锁（MultiLock）红锁（RedLock） 【已废弃】读写锁（ReadWriteLock）信号量（Semaphore）可过期许可信号…...

编程日记 2025/7/15 5:05:58

LabVIEW时间触发协议

介绍了基于LabVIEW开发的时间触发协议应用，通过实例解析了FlexRay总线的设计与优化。通过技术细节、系统构建和功能实现等方面，探讨了LabVIEW在现代工业通信系统中的应用效能，特别是在提高通信可靠性和实时性方面的贡献。项目背景在工…...

编程日记 2025/7/18 12:05:34

IDEA的使用

idea的介绍 IntelliJ IDEA 是由 JetBrains 公司开发的一款功能强大的集成开发环境（IDE），主要用于Java语言的开发，但同时也支持其他多种编程语言如Kotlin、Groovy、Scala等。它被广泛认为是专业软件开发者的首选工具之一&#xff…...

编程日记 2025/7/18 11:56:35

unity一个图片的物体，会有透明的效果

如图想要去掉这个透明效果选择一个高层级的layer即可。...

编程日记 2025/7/18 12:05:34

IP报文格式

IPv4 头部结构（共 20 字节，不含可选字段） 1. 版本（Version） 长度：4 比特作用：标识 IP 协议版本（IPv4 值为 4，IPv6 值为 6）。示例：0100&#x…...

编程日记 2025/7/17 22:54:33

2025最新-智慧小区物业管理系统

目录 1. 项目概述 2. 技术栈 3. 功能模块 3.1 管理员端 3.1.1 核心业务处理模块 3.1.2 基础信息模块 3.1.3 数据统计分析模块 3.2 业主端 5. 系统架构 5.1 前端架构 5.2 后端架构 5.3 数据交互流程 6. 部署说明 6.1 环境要求 6.2 部署步骤 7. 使用说明 7.1 管…...

编程日记 2025/7/17 21:13:22

sql结尾加刷题

找了一下mysql对extractvalue()、updatexml()函数的官方介绍https://dev.mysql.com/doc/refman/5.7/en/xml-functions.html#function_extractvalue ExtractValue(xml_frag, xpath_expr) 知识点解释一下这两个参数xml_frag，是xml标记片段，第二个参数…...

编程日记 2025/7/16 4:44:37

UE4学习笔记 FPS游戏制作26 UE中的UI

文章目录几个概念创建一个UI蓝图添加UI获取UI的引用切换设计器和UI蓝图将UI添加到游戏场景锚点轴点slotSizeToContent三种UI数据更新方式函数绑定属性绑定事件绑定九宫格分割图片几个概念 UMG：UE的UI编辑器 slate UI: UE的UI的编辑语言创建一个UI蓝图右键用…...

编程日记 2025/7/16 4:51:52

pnpm 依赖升级终极指南：从语义化版本控制到 Monorepo 全局更新的企业级实践

要使用 pnpm 更新所有依赖包，可以通过以下命令实现： 1. 更新所有依赖到符合语义化版本的范围 pnpm update该命令会根据 package.json 中定义的版本范围（如 ^1.0.0 或 ~2.3.4）更新依赖包到最新兼容版本，但不会突破版本…...

编程日记 2025/7/15 4:49:32

C++：类和对象（二）

目录 const成员函数 1. 基本语法 2. const 成员函数的作用 (1) 保证对象不被修改 (2) 提高代码安全性 (3) 支持 const 对象 3. 示例 (1) 基本用法 (2) const 对象只能调用 const 成员函数 (3) mutable 成员变量 4. const 成员函数的重载初始化列表基本语法为什…...

编程日记 2025/7/11 1:35:30

【Django】教程-2-前端-目录结构介绍

【Django】教程-1-安装创建项目目录结构介绍 3. 前端文件配置 3.1 目录介绍在app下创建static文件夹, 是根据setting中的配置来的 STATIC_URL ‘static/’ templates目录，编写HTML模板（含有模板语法，继承，{% static ‘xx’ …...

编程日记 2025/7/12 16:35:20

2025年渗透测试面试题总结-某快手-安全工程师（题目+回答）

网络安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。目录快手-安全工程师一、Linux提权技术：Dirty Cow漏洞深度解析 1.1 漏洞技术原理 1.2 漏洞影…...

编程日记 2025/7/15 6:46:31

数据结构之栈

目录 1 简介 2 栈的基本概念 3 代码实现 4 代码解析（部分） 4.1 初始化栈 4.2 入栈 4.3 出栈 4.4 只读获取栈顶元素（peek） 4.5 判断是否为空 4.6 获取栈大小 4.7 十进制转换为二进制 5 核心操作分析 6 总结 1 简介栈…...

编程日记 2025/7/14 10:48:48

【AndroidRTC-10】webrtc是如何确定双端的编解码类型？

Android-RTC系列软重启，改变以往细读源代码的方式改为带上实际问题分析代码。增加实用性，方便形成肌肉记忆。同时不分种类、不分难易程度，在线征集问题切入点。问题：webrtc-android是如何确定编解码类型，如何调整视…...

编程日记 2025/7/17 1:18:54

深度求索（DeepSeek）：以AI之力重塑医疗未来

目录一、智能诊断：打破医疗认知的“分辨率极限” 二、药物研发：重构分子世界的“造物逻辑” 三、医疗资源重构：打造分级诊疗的“神经中枢” 四、健康管理：编织个体化医学的“防护网” 五、伦理与进化：构建医疗AI…...

编程日记 2025/7/15 5:15:23

【HTML 基础教程】HTML 属性

HTML 属性属性是 HTML 元素提供的附加信息。属性通常出现在 HTML 标签的开始标签中，用于定义元素的行为、样式、内容或其他特性。属性总是以 name"value" 的形式写在标签内，name 是属性的名称，value 是属性的值。 HTML 属性 …...

编程日记 2025/7/17 13:30:00

macOS 制作dmg磁盘映像安装包

制作dmg磁盘影像安装包需要准备一下材料： 1. 导出的APP 2. 背景图片 3. 应用程序替身前两种材料很容易得到。下面介绍一下应用程序替身制作过程： Finder —> 选中应用程序 --> 找到顶部菜单栏中的前往 ----> 选择上层文件夹选中应用程…...

编程日记 2025/7/13 23:07:41

Appium中元素定位之一组元素定位API

应用场景和定位一个元素相同，但如果想要批量的获取某个相同特征的元素，使用定位一组元素的方式更加方便在 Appium 中定位一组元素的 API 与定位单个元素的 API 类似，但它们返回的是一个元素列表（List<MobileElement>&am…...

编程日记 2025/7/17 13:39:59

webstorm中element-ui标签无法跳转源码

原本用的webstorm2019,之前的项目开发时切实体验过跳转element-ui源码，觉得很香。更新了webstorm至2024，居然不行了，能弹出来提示，但就是找不到定义。不知道是不是2024版本的问题，node_moudles不管我是否手动添加exc…...

编程日记 2025/7/16 21:03:51

【蓝桥杯】算法笔记1

1.暴力枚举给定一个正整数n，请找出所有满足a + b = n的整数对(a, b)，其中a和b都是正整数，且a ≤ b。输入格式：一个正整数n (1 ≤ n ≤ 10⁶) 输出格式：所有符合条件的(a, b)对，每行一对，按a的升序排列。如果没有符合条件的对，输出"No solution"。问题分…...

编程日记 2025/7/13 4:56:42

Pytorch学习笔记（十一）Learning PyTorch - What is torch.nn really

这篇博客瞄准的是 pytorch 官方教程中 Learning PyTorch 章节的 What is torch.nn really? 部分。主要是教你如何一步一步将最原始的代码进行重构至pytorch标准的代码，如果你已经熟悉了如何使用原始代码以及pytorch标准形式构建模型，可以跳过这一篇。 …...

编程日记 2025/7/16 11:14:01

OpenGL ES 2.0与OpenGL ES 3.1的区别

如果硬件支持且需要更高质量的图形效果，推荐3.1；如果兼容性和开发简便更重要，且效果需求不高，2.0更合适。不过现代车载系统可能越来越多支持3.x版本，所以可能倾向于使用3.1，但具体情况还需调查目标平台的硬…...

编程日记 2025/7/15 13:18:56

【Unity3D脚本与系统设计6】鼠标触摸超时待机实现

实现步骤在Unity中实现一个功能，当鼠标或触摸超过一定时间没有操作时，自动返回待机界面。检测输入首先，我需要检测用户的输入，无论是鼠标还是触摸。Unity的Input系统可以检测到鼠标和触摸事件，比如Input.GetAxis…...

编程日记 2025/7/8 19:38:24

SpringMVC 入门教程

一、SpringMVC 简介 SpringMVC 是基于 MVC 设计模式的轻量级 Web 框架，核心功能包括： 请求分发：通过 DispatcherServlet 统一处理请求。注解驱动：使用 Controller、RequestMapping 简化开发。视图解析：支持 JSP、Thy…...

编程日记 2025/7/13 14:00:59

矿山自动化监测解决方案

1.行业现状为贯彻落实《中共中央国务院关于推进安全生产领域改革发展的意见》《“十四五”矿山安全生产规划》（应急〔2022〕64号）、《国务院安委会办公室关于加强矿山安全生产工作的紧急通知》（安委办〔2021〕3号）等有关工作部署…...

编程日记 2025/7/9 20:43:49

el-table + el-pagination 前端实现分页操作

el-table el-pagination 前端实现分页操作后端返回全部列表数据，前端进行分页操作 html代码 <div><el-table :data"tableData" border><el-table-column label"序号" type"index" width"50" /><el…...

编程日记 2025/7/12 4:42:44

NIO ByteBuffer 总结

目录基本概念创建 ByteBuffer核心属性关键方法切换模式读写操作压缩数据基本概念 java.nio.ByteBuffer 是 Java NIO 中一个核心类， 用于高效处理二进制数据的读写操作。应用于通道（Channel）的I/O操作。作用： 数据缓冲&#xf…...

编程日记 2025/7/16 21:19:25

华为hcia——Datacom实验指南——配置IPv4静态路由，默认路由和浮动静态路由

什么是IPv4 IPv4静态路由，是手动配置的，不会随着网络拓扑的变化而变化，所配置的路由信息也不会在网络中传播，所以它主要运用在小型网络或者作为动态路由的补充。 IPv4的配置配置的命令很简单 IP route-static （目…...

编程日记 2025/7/17 13:29:07

Git入门——常用指令汇总

以下是一份精心整理的 Git常用指令速查表，基本覆盖日常开发使用场景，建议收藏备用👇 🔧 环境配置指令作用git config --global user.name "你的名字"设置全局用户名git config --global user.email "你的邮箱&qu…...

编程日记 2025/7/15 20:52:55

深入解析 MyBatis-Plus 批量操作：原理、实现与性能优化

引言在高并发、大数据量场景下，批量数据库操作是提升系统性能的核心手段之一。本文以 MyBatis-Plus 为例，深入剖析批量更新和自定义批量插入的实现原理，并结合实战代码与性能测试，揭示其在高性能场景下的应用价值。批量更新：动态 SQL 的极致运用原理与 SQL 生成…...

编程日记 2025/7/16 17:43:11

2025年成都市双流区农业科技试验示范基地建设方案申报条件材料和补贴程序、时间安排

成都市双流区2025年农业科技试验示范基地建设方案申报条件材料和补贴程序、时间安排如下，需要申报的可指导！ 一、成都市双流区农业科技试验示范基地申报 （一）基地建设数量。2025年建设农业科技试验示范基地2个。 （二…...

编程日记 2025/7/10 17:48:39

8路CXP相机采集系统介绍

8xCXP相机采集系统介绍目录 1 系统概述 4 2 硬件架构 5 2.1 FPGA处理单元 5 2.2 CXP接口层 6 2.3 CXP相机说明与使用要求 7 2.4 SSI控制器板 8 3 FPGA方案 9 3.1 FPGA实现 9 3.2 Block Design说明 10 4 软件方案 14 4.1 嵌入式层 14 4.2 上位机软件（C…...

编程日记 2025/7/17 1:14:45

vue2前端日志数据存储，推荐（IndexedDB)

前言：首先，我得回忆一下IndexedDB的基本概念和用法，确保自己理解正确。IndexedDB是一个浏览器内置的数据库，允许存储大量结构化数据，支持事务和索引查询，适合需要离线存储的应用场景。接下来，用…...

编程日记 2025/7/13 21:29:42

onedav一为导航批量自动化导入网址（完整教程）

OneNav作为一个功能强大的导航工具，支持后台管理、加密链接、浏览器书签批量导入等功能，能够帮助用户轻松打造专属的导航页面。今天，我将为大家详细介绍如何实现OneNav导航站的批量自动化导入网址。 1、建立要批量导入的表格格局需要创建表格，表格的要求是一定要有需要，…...

编程日记 2025/7/15 8:05:09

Ubuntu Linux安装PyQt5并配置Qt Designer

一安装 PyQt5 借助 apt 包管理器来安装 PyQt5 及其相关的开发工具： sudo apt install python3-pyqt5 pyqt5-dev-tools 假如报错， You might want to run apt --fix-broken install to correct these. 直接执行： sudo apt --fix-…...

编程日记 2025/7/14 1:37:01

无人机螺旋桨平衡标准

螺旋桨平衡是确保无人机(UAV)平稳运行、可靠性和使用寿命的关键过程。螺旋桨的不平衡会导致振动、噪音，并加速关键部件的磨损，从而对飞行性能产生负面影响。 ISO 21940-11:2016标准为旋翼平衡提供了一个广泛引用的框架，定义了可接受的不平衡…...

编程日记 2025/7/16 8:00:15

基于MCP协议的多模态模型优化在医疗3D打印精密人工关节制造中的研究

一、引言 1.1 研究背景与意义在全球人口老龄化趋势愈发明显的当下，诸如骨关节炎、类风湿性关节炎这类关节疾病的发病率不断攀升，进而使得人工关节置换手术的需求呈现出激增态势。人工关节置换手术作为治疗终末期关节疾病的有效手段，能够显著缓解患者疼痛，提升关节功能与生…...

编程日记 2025/7/12 1:47:33

ESLint报错：Could not find config file.

如果你的ESLint的版本大于 8，同时使用 .eslinrc.js 和 .eslintignore 作为配置文件，且目前用的是 VSCODE ，就有可能遇到报错： Could not find config file. 这个是因为 VSCode 中 ESLint 插件的配置 eslint.useFlatConfig 的问题…...

编程日记 2025/7/16 17:59:18

npm install 卡在创建项目：sill idealTree buildDeps

参考： https://blog.csdn.net/PengXing_Huang/article/details/136460133 或者再执行 npm install -g cnpm --registryhttps://registry.npm.taobao.org 或者换梯子...

编程日记 2025/6/28 6:58:32

js 对象深拷贝

方法 1：使用 JSON.parse 和 JSON.stringify

方法 2：使用递归实现深拷贝

方法 3：使用 lodash 库

方法 4：使用 structuredClone（现代浏览器支持）

方法 5：使用 Object.create 和递归

总结

相关文章：

方法 1：使用 `JSON.parse` 和 `JSON.stringify`

方法 3：使用 `lodash` 库

方法 4：使用 `structuredClone`（现代浏览器支持）

方法 5：使用 `Object.create` 和递归