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

JavaScript 深拷贝和浅拷贝的实现、使用场景和存在的问题

浅拷贝

实现

方式 1(ES 5 语法):

const params = Object.assign({}, state.dataForm)

方式 2(ES 6 语法):

const params = { ...state.dataForm }

使用场景

copy 入参和出参

深拷贝

方式 1(手动实现):

/*** 深拷贝* @param obj*/
export const deepCopy = <T>(obj: T): T => {if (obj === null || typeof obj !== "object") {return obj;}if (Array.isArray(obj)) {const arrCopy = [] as any[];obj.forEach((item, index) => {arrCopy[index] = deepCopy(item);});return arrCopy as any;}const objCopy = {} as { [key: string]: any };Object.keys(obj).forEach((key) => {objCopy[key] = deepCopy((obj as { [key: string]: any })[key]);});return objCopy as T;
};

方式 2(第三方):

yarn add lodashimport cloneDeep from 'lodash/cloneDeep';
const params = cloneDeep(state.dataForm);

使用场景

需要保留变量状态

存在的问题

浅拷贝只会复制对象的第一层属性,对于嵌套的对象或数组,拷贝的仍然是引用而不是值。这样会导致修改浅拷贝对象的嵌套属性时,原对象的相应属性也会被修改。

相关文章:

JavaScript 深拷贝和浅拷贝的实现、使用场景和存在的问题

浅拷贝 实现 方式 1&#xff08;ES 5 语法&#xff09;&#xff1a; const params Object.assign({}, state.dataForm)方式 2&#xff08;ES 6 语法&#xff09;&#xff1a; const params { ...state.dataForm }使用场景 copy 入参和出参 深拷贝 方式 1&#xff08;手…...

8个常用的辅助函数!!

在开发各种项目时&#xff0c;我们会发现经常需要一些辅助函数来帮助我们实现一些需求&#xff0c;并且这些函数是在很多项目里都可以进行复用的。下面我就列出我们一些常用的辅助函数&#xff0c;来帮助大家在开发项目时&#xff0c;进行复用。 1. 首字母大写 将字符串的第一…...

服务器数据恢复—OceanStor存储中NAS卷数据丢失如何恢复数据?

服务器存储数据恢复环境&故障&#xff1a; 华为OceanStor某型号存储。工作人员在上传数据时发现该存储上一个NAS卷数据丢失&#xff0c;管理员随即关闭系统应用&#xff0c;停止上传数据。这个丢失数据的卷中主要数据类型为office文件、PDF文档、图片文件&#xff08;JPG、…...

54.Python-web框架-Django-免费模板django-datta-able

1.Datta Able Django介绍 Detta Able Djiango是什么 Datta Able Django 是一个由AppSeed提供的开源Django管理面板&#xff0c;基于现代设计&#xff0c;为开发者提供了一流的功能和优雅的界面。它源自CodedThemes的高风格化Bootstrap 4模板——Datta Able Bootstrap Lite&…...

XP系统安装Node.js v8.6.0并搭建Vue2开发环境(项目兼容到Vista的IE9浏览器)

下载并安装Node.js v8.6.0 通常我们开发Vue2项目&#xff0c;是通过vue create命令建立Vue2工程&#xff0c;用npm run serve命令启动Vue2网站的。 vue命令是用JavaScript写的&#xff0c;不是用C语言写的&#xff0c;必须要Node.js环境才能运行&#xff0c;由Node.js自带的np…...

redis序列化

文章目录 1、为什么要进行序列化操作&#xff1f;2、序列化方式2.1、自定义序列化2. 2、StringRedisTemplate&#xff08;重点&#xff09; 1、为什么要进行序列化操作&#xff1f; 不进行序列化向redis存入数据代码&#xff1a; SpringBootTest class RedisDemoApplicationT…...

IOT-Tree 1.7.0实现了一个类似Node-Red的流程功能

本人一直研究这个软件&#xff0c;1.7.0版本最近刚刚发布&#xff0c;里面有个大变化&#xff0c;增加了消息流的功能&#xff0c;这个功能和IBM的Node-Red很相似。 Node-Red那个图形化流程很多年前就给了我很深刻的印象&#xff0c;我个人理解是&#xff0c;通过这样的图形化…...

nc网络收发测试-tcp客户端\TCP服务器\UDP\UDP广播

netcat&#xff08;nc&#xff09;&#xff1a; 作用&#xff1a;一个功能强大的网络工具&#xff0c;提供了简单的网络测试和网络编程功能。工作原理&#xff1a;可以用于建立TCP或UDP连接&#xff0c;并发送和接收数据。示例用法&#xff1a; 监听TCP端口&#xff1a;nc -l 1…...

程序员该有怎么样的职业素养

目录 1、持续学习 2、解决问题的能力 3、团队协作能力 4、责任感 5、沟通能力 6、总结 作为一个从业者&#xff0c;我认为对于程序员而言&#xff0c;职业素养是非常重要的。职业素养不仅影响个人的职业发展&#xff0c;也影响团队和企业的整体氛围和效率。在我的职业生涯…...

51交通灯

一、基本原理 利用51单片机控制各个路口红绿灯及时间显示。 设计的重点&#xff1a; 1、各个路口红绿灯亮灭的规则&#xff0c;暂不考虑左转方向&#xff1b; 2、倒计时的实现&#xff0c;利用单片机的定时器进行计数得到秒信号&#xff1b; 3、时间显示&#xff1a;东西南…...

鸿蒙Arkts上传图片并获取接口返回信息

需求&#xff1a; 选择相册图片后&#xff0c;将文件上传到服务器&#xff0c;接口会返回图片地址。 问题&#xff1a; 1、鸿蒙自带的文件上传返回值只会返回上传状态&#xff0c;不会返回接口返回信息。 类似问题 HarmonyOS上传文件以及权限授权_harmonyos中axios上传文件…...

超文本标记语言(HTML)简介

HTML 基础 超文本标记语言&#xff08;英语&#xff1a;HyperText Markup Language&#xff0c;简称&#xff1a;HTML&#xff09;是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是&#xff1a;一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示…...

使用thymeleaf直接渲染字符串

目录 一、依赖 二、示例代码 一、依赖 <--JAVA 8--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId><version>2.7.18</version></dependency><-…...

Spring Boot整合发送QQ邮箱功能

1. 创建Spring Boot项目 使用Spring Initializr&#xff08;https://start.spring.io/&#xff09;创建一个新的Spring Boot项目&#xff0c;并添加spring-boot-starter-mail依赖。 2. 添加配置 在application.properties或application.yml文件中添加QQ邮箱的SMTP配置。这里…...

Milvus向量数据库

Milvus 是一个开源的向量数据库&#xff0c;专为处理高维向量数据而设计&#xff0c;常用于大规模向量相似性搜索和基于向量的机器学习应用。它支持高效地管理、搜索和操作嵌入&#xff08;如文本、图像、音频的特征向量&#xff09;&#xff0c;在推荐系统、图像检索、语义搜索…...

python cls的使用

import threadingclass Test:# new方法用于创建类的实例def __new__(cls, *args, **kwargs):print("__new__:", cls.__class__.__name__)return object.__new__(cls) # 返回实例给init self参数# init用于初始化类的实例&#xff0c;实例由new方法传递过来的&#xf…...

idea中maven下载依赖缓慢解决方法

解决IDEA中Maven下载依赖包过慢或报错的问题_maven 下载依赖要很久-CSDN博客...

JS 中的各种距离 scrollTop?clientHeight?

元素的各种距离 DOM 对象 属性描述offsetWidth只读&#xff0c;返回元素的宽度&#xff08;包括元素宽度、内边距和边框&#xff0c;不包括外边距&#xff09;offsetHeight只读&#xff0c;返回元素的高度&#xff08;包括元素高度、内边距和边框&#xff0c;不包括外边距&am…...

继承-进阶-易错点

子类同名方法隐藏父类方法 即使调用不匹配也不会再去父类寻找&#xff0c;而是直接报错 //下面代码输出结果&#xff1a;( )&#xfeff;class A { public:void f(){ cout<<"A::f()"<<endl; }int a; };class B : public A { public:void f(int a){c…...

【图论应用】使用多路图(multigraph)对上海地铁站点图建模,并解决最短路径问题

文章目录 1 前言2 导包导入数据集3 创建多路图&#xff0c;导入节点和边信息3 绘制线路图4 计算最短路径 1 前言 最近正在学习图神经网络&#xff0c;先pick up了一些最基础的图论知识并学习了一些好玩的应用。 本文启发于B站视频&#xff08;BV1LY411R7HJ&#xff09;&#…...

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)

🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

深入理解Optional:处理空指针异常

1. 使用Optional处理可能为空的集合 在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

Linux 下 DMA 内存映射浅析

序 系统 I/O 设备驱动程序通常调用其特定子系统的接口为 DMA 分配内存&#xff0c;但最终会调到 DMA 子系统的dma_alloc_coherent()/dma_alloc_attrs() 等接口。 关于 dma_alloc_coherent 接口详细的代码讲解、调用流程&#xff0c;可以参考这篇文章&#xff0c;我觉得写的非常…...

在golang中如何将已安装的依赖降级处理,比如:将 go-ansible/v2@v2.2.0 更换为 go-ansible/@v1.1.7

在 Go 项目中降级 go-ansible 从 v2.2.0 到 v1.1.7 具体步骤&#xff1a; 第一步&#xff1a; 修改 go.mod 文件 // 原 v2 版本声明 require github.com/apenella/go-ansible/v2 v2.2.0 替换为&#xff1a; // 改为 v…...

当下AI智能硬件方案浅谈

背景&#xff1a; 现在大模型出来以后&#xff0c;打破了常规的机械式的对话&#xff0c;人机对话变得更聪明一点。 对话用到的技术主要是实时音视频&#xff0c;简称为RTC。下游硬件厂商一般都不会去自己开发音视频技术&#xff0c;开发自己的大模型。商用方案多见为字节、百…...

实现p2p的webrtc-srs版本

1. 基本知识 1.1 webrtc 一、WebRTC的本质&#xff1a;实时通信的“网络协议栈”类比 将WebRTC类比为Linux网络协议栈极具洞察力&#xff0c;二者在架构设计和功能定位上高度相似&#xff1a; 分层协议栈架构 Linux网络协议栈&#xff1a;从底层物理层到应用层&#xff08;如…...