当前位置: 首页 > 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;尤其是在需要进行图形表示、…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...