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

JS中对象的浅拷贝,深拷贝和引用

JS中对象的浅拷贝,深拷贝和引用

浅拷贝和深拷贝的区别主要在于它们如何处理引用类型的数据(如数组和对象),而引用简而言之就是换了个变量名。

浅拷贝

  • 引用:浅拷贝只复制对象的第一层属性,对于嵌套的对象或数组,它只复制引用而不是创建新的空间。这样,浅拷贝后的新对象和原对象中的嵌套对象仍然指向同一个内存地址。

  • 方式:可以使用扩展运算符 ...Object.assign() 进行浅拷贝。

  • 示例

    const original = { a: 1, b: { c: 2 } };
    const shallowCopy = { ...original };
    shallowCopy.b.c = 3;
    console.log(original.b.c); // 输出 3
    

深拷贝

  • 创建新的空间:深拷贝会递归地复制对象的每一层属性,对于嵌套的对象或数组,它会创建新的空间存储数据,因此新对象和原对象完全独立。

  • 方式:可以使用 JSON.parse(JSON.stringify())、第三方库如 Lodash 的 _.cloneDeep() 方法,或者手动实现递归拷贝。

    • 使用JSON.parse(JSON.stringify(option))的方式会丢失function方法,导致tooltip中的formatter消失,
    • 引入lodash中的深拷贝来进行复制:
      • import _ from ‘lodash’;
      • let tmpOption = _.cloneDeep(option)
  • 示例

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

深浅拷贝区别总结

  • 浅拷贝:只复制一层属性,对于嵌套结构只复制引用。适合处理简单对象,不适用于需要完全独立的数据副本。
  • 深拷贝:递归复制所有层次的属性,完全独立于原对象。适合处理复杂对象和深层嵌套的结构。

引用和浅拷贝

let param1 = this.customInsertInformation;
param1.insertDialogVisible = false;

这里,param1 只是一个对 this.customInsertInformation 的引用。当你修改 param1.insertDialogVisible 的值时,实际上是在修改 this.customInsertInformation 对象的 insertDialogVisible 属性。

这就不同于浅拷贝(使用扩展运算符...),后者会创建一个新的对象,不会影响原始对象的属性。如果你希望在不影响原对象的情况下创建一个新的对象,使用浅拷贝或深拷贝的方法会更合适。

例如:

let param1 = { ...this.customInsertInformation };
param1.insertDialogVisible = false;
// this.customInsertInformation 不会改变

相关文章:

JS中对象的浅拷贝,深拷贝和引用

JS中对象的浅拷贝,深拷贝和引用 浅拷贝和深拷贝的区别主要在于它们如何处理引用类型的数据(如数组和对象),而引用简而言之就是换了个变量名。 浅拷贝 引用:浅拷贝只复制对象的第一层属性,对于嵌套的对象或…...

思普企业运营平台 idsCheck Sql注入漏洞复现

0x01 产品描述: ‌思普企业运营平台‌是由贵阳思普信息技术有限公司自主研发的国内首款投融建管营云服务平台——...

FSWIND脉动风-风载时程生成器软件下载、安装及注册

1、软件下载 点击文末超链接下载 2、软件安装 以下操作,若被电脑杀毒软件提示风险,请加入白名单,软件无任何病毒和后台,请放心使用! 1)双击Fswind_setup.exe,启动安装程序 2)、点…...

spring通过RequestContextHolder获取HttpServletRequest对象

1.获取HttpServletRequest对象方法: public static HttpServletRequest getRequest() {ServletRequestAttributes attributes ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes());assert attributes ! null;return attributes.getRequest(…...

STM32编码器接口及编码器测速模板代码

编码器是什么? 编码器是一种将角位移或者角速度转换成一连串电数字脉冲的旋转式传感 器,我们可以通过编码器测量到底位移或者速度信息。编码器从输出数据类型上 分,可以分为增量式编码器和绝对式编码器。 从编码器检测原理上来分&#xff0…...

qt QNetworkAccessManager详解

1、概述 QNetworkAccessManager是QtNetwork模块中的一个核心类,它允许应用程序发送网络请求并接收响应。该类是网络通信的基石,提供了一种方便的方式来处理常见的网络协议,如HTTP、HTTPS等。QNetworkAccessManager对象持有其发送的请求的通用…...

部署 Vue 前端项目到 Linux

看看怎么把一个 Vue 3 项目部署到 Linux 服务器上。准备好你的咖啡,让我们愉快地度过这段部署时光! 前期准备 确保你已经在本地构建了 Vue 3 项目,并生成了 dist 文件夹。 npm run build构建完成后,你将看到一个新鲜出炉的 dis…...

数据分析:探索数据背后的秘密与挑战

在当今这个数据驱动的时代,数据分析已成为各行各业不可或缺的一部分。从市场营销到金融风控,从医疗健康到智能制造,数据分析为企业决策提供了强有力的支持。然而,尽管其重要性日益凸显,数据分析的过程并非一帆风顺&…...

文本域设置高度 加上文字限制并show出来:

文本域设置高度 :rows"4" 加上文字限制并show出来&#xff1a; maxlength"30" show-word-limit 效果: <el-form-item label"产品备注" prop"remark"><el-input v-model"form.remark" type"textarea"…...

深入浅出:Gin框架-简介与API开发入门

深入浅出&#xff1a;Gin框架-简介与API开发入门 引言 Gin框架是基于Go语言的HTTP Web框架&#xff0c;凭借其简单易用、性能卓越和丰富的功能&#xff0c;成为构建高性能Web应用的理想选择。本文将深入浅出地介绍Gin框架的基础知识&#xff0c;并通过一个简单的案例&#xf…...

MySQL各种锁详解

什么是锁&#xff1f; 1.1 锁的解释 计算机协调多个进程或线程并发访问某一资源的机制。 1.2 锁的重要性 在数据库中&#xff0c;除传统计算资源&#xff08;CPU、RAM、I/O等&#xff09;的争抢&#xff0c;数据也是一种供多用户共享的资源。 如何保证数据并发访问的一致性&…...

海外的bug-hunters,不一样的403bypass

一种绕过403的新技术&#xff0c;跟大家分享一下。研究HTTP协议已经有一段时间了。发现HTTP协议的1.0版本可以绕过403。于是开始对lyncdiscover.microsoft.com域做FUZZ并且发现了几个403Forbidden的文件。 &#xff08;访问fsip.svc为403&#xff09; 在经过尝试后&#xff0…...

React 组件中 State 的定义、使用及正确更新方式

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;React篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来React篇专栏内容React 组件中 State 的定义、使用及正确更新方式 前言 在 React 应用开发中&#xff0c;state …...

Jenkins 的HTTP Request 插件为什么不能配置Basic认证了

本篇遇到的问题 还是因为Jenkins需要及其所在的OS需要升级&#xff0c;升级策略是在一台新服务器上安装和配置最新版本的Jenkins&#xff0c; 当前的最新版本是&#xff1a; 2.479.2 LTS。 如果需要这个版本的话可以在官方站点下载&#xff0c;也可以到如下地址下载&#xff1…...

8 Bellman Ford算法SPFA

图论 —— 最短路 —— Bellman-Ford 算法与 SPFA_通信网理论基础 分别使用bellman-ford算法和dijkstra算法的应用-CSDN博客 图解Bellman-Ford计算过程以及正确性证明 - 知乎 (zhihu.com) 语雀版本 1 概念 **适用场景&#xff1a;**单源点&#xff0c;可以有负边&#xff0…...

nginx不允许静态文件被post请求显示405 not allowed

在单独站点的配置文件中 添加error_page 405 200 $request_uri; 即可&#xff01;...

【c++笔试强训】(第三十二篇)

目录 数组变换&#xff08;贪⼼位运算&#xff09; 题目解析 讲解算法原理 编写代码 装箱问题&#xff08;动态规划-01背包&#xff09; 题目解析 讲解算法原理 编写代码 数组变换&#xff08;贪⼼位运算&#xff09; 题目解析 1.题目链接&#xff1a;数组变换__牛客网…...

shell脚本实战案例

文章目录 实战第一坑功能说明脚本实现 实战第一坑 实战第一坑&#xff1a;在Windows系统写了一个脚本&#xff0c;比如上面&#xff0c;随后上传到服务&#xff0c;执行会报错 原因&#xff1a; 解决方案&#xff1a;在linux系统touch文件&#xff0c;并通过vim添加内容&…...

OpenCV-图像阈值

简单阈值法 此方法是直截了当的。如果像素值大于阈值&#xff0c;则会被赋为一个值&#xff08;可能为白色&#xff09;&#xff0c;否则会赋为另一个值&#xff08;可能为黑色&#xff09;。使用的函数是 cv.threshold。第一个参数是源图像&#xff0c;它应该是灰度图像。第二…...

lvgl9 Line(lv_line) 控件使用指南

文章目录 前言主体1. **Line 控件概述**2. **使用场景**3. **控件的样式**4. **设置点**5. **自动大小**6. **y 坐标反转**7. **事件处理**8. **示例代码** 总结 前言 在图形界面设计中&#xff0c;直线绘制是非常常见且重要的功能之一&#xff0c;尤其是在需要进行图形表示、…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...

【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...