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

js中的浅拷贝和深拷贝

浅拷贝Shallow Copy

浅拷贝只复制对象的顶层属性及其引用,而不复制这些引用所指向的对象。如果原始对象中的某个属性是一个对象或数组,那么浅拷贝后的对象将包含对这个内部对象或数组的引用,而不是这个对象或数组的一个新副本。

let obj1 = {  a: 1,  b: {  c: 2  }  
};  // 使用扩展运算符(...)进行浅拷贝  
let obj2 = { ...obj1 };  // 或者使用 Object.assign() 方法进行浅拷贝  
// let obj2 = Object.assign({}, obj1);  console.log(obj2); // { a: 1, b: { c: 2 } }  // 修改 obj2 的顶层属性 a  
obj2.a = 2;  
console.log(obj1.a); // 1,obj1 的 a 属性没有被修改  // 修改 obj2 的 b 属性(这是一个对象的引用)  
obj2.b.c = 3;  
console.log(obj1.b.c); // 3,obj1 的 b.c 属性也被修改了,因为 obj1 和 obj2 的 b 属性指向同一个对象

深拷贝

深拷贝会复制对象及其所有子对象,直到最底层的基本数据类型。这意味着深拷贝后的对象与原始对象是完全独立的,修改其中一个对象不会影响另一个对象。

let obj1 = {  a: 1,  b: {  c: 2  }  
};  // 使用 JSON 方法进行深拷贝(注意:这种方法有局限性)  
let obj2 = JSON.parse(JSON.stringify(obj1));  // 或者使用 lodash 的 _.cloneDeep() 方法进行深拷贝  
// let _ = require('lodash');  
// let obj2 = _.cloneDeep(obj1);  console.log(obj2); // { a: 1, b: { c: 2 } }  // 修改 obj2 的顶层属性 a  
obj2.a = 2;  
console.log(obj1.a); // 1,obj1 的 a 属性没有被修改  // 修改 obj2 的 b 属性(虽然它们看起来相同,但实际上是两个独立的对象)  
obj2.b.c = 3;  
console.log(obj1.b.c); // 2,obj1 的 b.c 属性没有被修改,因为 obj1 和 obj2 的 b 属性指向不同的对象

总结

浅拷贝就是复制对象的顶层属性即第一层属性,而深拷贝是复制对象的所有属性。所以浅拷贝修改第二层及以后属性时,也还是会影响原对象。深拷贝完全不被影响。

使用浅拷贝
// 使用扩展运算符(...)进行浅拷贝  
let obj2 = { ...obj1 };  // 或者使用 Object.assign() 方法进行浅拷贝  
let obj2 = Object.assign({}, obj1);  
使用深拷贝
// 使用 JSON 方法进行深拷贝(注意:这种方法有局限性)  
let obj2 = JSON.parse(JSON.stringify(obj1));  // 或者使用 lodash 的 _.cloneDeep() 方法进行深拷贝  
let _ = require('lodash');  
let obj2 = _.cloneDeep(obj1);  

相关文章:

js中的浅拷贝和深拷贝

浅拷贝Shallow Copy 浅拷贝只复制对象的顶层属性及其引用,而不复制这些引用所指向的对象。如果原始对象中的某个属性是一个对象或数组,那么浅拷贝后的对象将包含对这个内部对象或数组的引用,而不是这个对象或数组的一个新副本。 let obj1 …...

【Linux】常用基本命令

wget网址用于直接从网上下载某个文件到服务器,当然也可以直接从网上先把东西下到本地然后用filezilla这个软件来传输到服务器上。 当遇到不会的命令时候,可以使用man “不会的命令”来查看这个命令的详细信息。比如我想要看看ls这个命令的详细用法&…...

uniapp——上传图片获取到file对象而非临时地址——基础积累

最近在看uniapp的代码,遇到一个需求,就是要实现上传图片的功能 uniapp 官网地址:https://uniapp.dcloud.net.cn/ 上传图片有对应的API: uni.chooseImage方法:https://uniapp.dcloud.net.cn/api/media/image.html#choo…...

vue3 antdv RadioButton默认值选择问题处理

1、先上官方文档&#xff1a; Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js 官方代码&#xff1a; <template><div><div><a-radio-group v-model:value"value1"><a-radio-button value"a…...

最佳实践,一款基于 Flutter 的桌面应用

前言 这篇文章介绍作为一名后端开发人员&#xff0c;快速的入门前端或者客户端一些相关的技术的心得。先来说说为什么作为一名后端开发人员也需要学习一些前端或者客户端相关的技术。通常来说&#xff0c;深耕一个领域没有错&#xff0c;因为社会常常就是这样分工的&#xff0…...

python第一个多进程爬虫

使用 multiprocessing 模块实现多进程爬取股票网址买卖数据的基本思路是&#xff1a; 定义爬虫函数&#xff0c;用于从一个或多个股票网址上抓取数据。创建多个进程&#xff0c;每个进程执行爬虫函数&#xff0c;可能针对不同的股票或不同的网页。使用 multiprocessing.Queue …...

在Ubuntu 18.04上安装和配置Ansible的方法

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 简介 配置管理系统旨在简化对大量服务器的控制&#xff0c;适用于管理员和运维团队。它们允许您从一个中央位置以自动化的方式控制许多…...

【详细教程】如何使用YOLOv10进行图片与视频的目标检测

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…...

LLM大语言模型-AI大模型全面介绍

简介&#xff1a; 大语言模型&#xff08;LLM&#xff09;是深度学习的产物&#xff0c;包含数十亿至数万亿参数&#xff0c;通过大规模数据训练&#xff0c;能处理多种自然语言任务。LLM基于Transformer架构&#xff0c;利用多头注意力机制处理长距离依赖&#xff0c;经过预训…...

瑜伽馆管理系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;教练管理&#xff0c;用户管理&#xff0c;瑜伽管理&#xff0c;套餐管理&#xff0c;体测报告管理&#xff0c;基础数据管理 前台账户功能包括&#xff1a;系统首页&#xff0…...

JAVA【案例5-2】模拟默认密码自动生成

【模拟默认密码自动生成】 1、案例描述 本案例要求编写一个程序&#xff0c;模拟默认密码的自动生成策略&#xff0c;手动输入用户名&#xff0c;根据用户名自动生成默认密码。在生成密码时&#xff0c;将用户名反转即为默认的密码。 2、案例目的 &#xff08;1&#xff09…...

小区业主管理系统

摘 要 随着城市化进程的加速和人口的不断增加&#xff0c;小区的数量也在不断增加。小区作为城市居民居住的主要场所&#xff0c;其管理工作也变得越来越重要。传统的小区业主管理方式存在诸多问题&#xff0c;如信息传递不畅、业务处理效率低下等。因此&#xff0c;开发一个高…...

vncsever ,window 远程ubuntu远程界面安装方式,VNC Viewer安装教程+ linux配置server 操作

linux 端安装 # 安装VNC 服务器软件 sudo apt install autocutsel # 剪切黏贴操作支持的包 sudo apt-get install tightvncserver # 安装的是 VNC 服务器软件&#xff0c;用于远程桌面访问 # 安装Xfce桌面环境 sudo apt-get install xfce4 xfce4-goodies #安装的是 XFCE 桌…...

java spring boot 单/多文件上传/下载

文章目录 使用版本文件上传服务端客户端&#xff08;前端&#xff09;方式一方式二 文件下载服务端客户端&#xff08;前端&#xff09; 代码仓库地址 使用版本 后端 spring-boot 3.3.0jdk17 前端 vue “^3.3.11”vite “^5.0.8”axios “^1.7.2” 文件上传 上传文件比较…...

C语言的内存函数

1. memcpy使⽤和模拟实现 1 void * memcpy ( void * destination, const void * source, size_t num ); • 函数memcpy从source的位置开始向后复制num个字节的数据到destination指向的内存位置。 • 这个函数在遇到 \0 的时候并不会停下来。 • 如果source和destination有任…...

【网络通信】计算机网络安全技术总结

一、概述 在数字时代的浪潮下&#xff0c;计算机网络安全技术已成为保护数据完整性和安全性的基石。这项技术不仅是计算机科学的重要组成部分&#xff0c;也是应对各种网络威胁和挑战的关键手段。 二、核心技术和应用 2.1 加密技术 作为网络安全技术的核心&#xff0c;加密技…...

Redis-实战篇-什么是缓存-添加redis缓存

文章目录 1、什么是缓存2、添加商户缓存3、前端接口4、ShopController.java5、ShopServiceImpl.java6、RedisConstants.java7、查看Redis Desktop Manager 1、什么是缓存 缓存就是数据交换的缓冲区&#xff08;称为Cache&#xff09;&#xff0c;是存贮数据的临时地方&#xff…...

《妃梦千年》第十一章:再遇故人

第十一章&#xff1a;再遇故人 宫中的局势暂时平静下来&#xff0c;但林清婉知道&#xff0c;危险随时可能卷土重来。她必须不断提升自己&#xff0c;才能在这复杂的环境中保护自己和皇上。一天&#xff0c;林清婉正在寝宫中读书&#xff0c;忽然收到了一封信。信中只有短短几…...

反序列化底层学习

反序列化底层学习 前言 以前也是懒得学&#xff0c;觉得没有必要&#xff0c;学到现在发现好多东西都需要学习java的底层&#xff0c;而且很多漏洞都是通过反序列化底层挖出来的&#xff0c;比如weblogic的一些绕过&#xff0c;我这里也主要是为了学习weblogic来学习的&#…...

项目训练营第五天

项目训练营第五天 后端代码优化 通用异常处理类编写 Data public class BaseResponse<T> implements Serializable {int code;T data;String message null;String description null;public BaseResponse(int code, T data, String message, String description) {th…...

松下Panasonic伺服调试软件 适配MINAS-A/A3/A4/B/E/S及MDDA/MH...

松下Panasonic 伺服调试 软件 支持MINAS-A A3 A4 B E S 英文版 MDDA、MHDA、MSMA、MSDA、MDMA、可以修改参数、JOG点动调试、参数拷贝、复制等 松下 伺服 软件刚拿到台新拆箱的MHDA-MA3A1A伺服驱动器&#xff1f;或者翻出实验室积灰好几年的MSMA电机搭MDDA A1板子练手&#xff…...

根据给定文本内容,适合的标题可以是:“‘三泵排水电气控制系统及组态设计的梯形图、接线图原理图”...

自动排水控制设计3泵排水三泵排水电气控制系统排水组态 我们主要的后发送的产品有&#xff0c;带解释的梯形图接线图原理图图纸&#xff0c;io分配&#xff0c;组态画面每逢暴雨天&#xff0c;物业师傅盯着排水泵的手机都要刷出火星子——生怕哪台泵罢工&#xff0c;地下室直…...

AI报告文档审核助力本地化升级:IACheck如何支撑食品加工行业数据安全与质量协同发展

在食品加工行业不断强化质量控制与数据安全要求的背景之下&#xff0c;“本地部署”正逐渐成为企业数字化转型中的关键路径之一&#xff0c;尤其是在涉及检测数据与质量报告的场景中&#xff0c;数据不仅需要具备高度准确性&#xff0c;还必须满足合规与安全要求&#xff0c;因…...

2026年4月OpenClaw怎么集成?腾讯云6分钟超简单安装步骤

2026年4月OpenClaw怎么集成&#xff1f;腾讯云6分钟超简单安装步骤。OpenClaw&#xff08;原Clawdbot&#xff09;作为2026年主流的AI自动化助理平台&#xff0c;可通过阿里云轻量服务器实现724小时稳定运行&#xff0c;并快速接入钉钉&#xff0c;让AI在企业群聊、个人工作流中…...

Vue-Super-Flow隐藏玩法:不画图,只填空!手把手教你打造可配置的流程图答题组件

Vue-Super-Flow隐藏玩法&#xff1a;不画图&#xff0c;只填空&#xff01;手把手教你打造可配置的流程图答题组件 在Vue生态中&#xff0c;流程图工具通常被用来构建复杂的可视化编辑界面。但你是否想过&#xff0c;这些工具还能用来做些什么&#xff1f;本文将带你探索一个全…...

STM32F746G-DISCO音频BSP详解:I2S+DMA+CS43L22驱动开发

1. 项目概述AUDIO_DISCO_F746NG是 STMicroelectronics 官方 STM32CubeF7 软件包中为STM32F746G-DISCO 探索套件提供的音频底层支持包&#xff08;Board Support Package, BSP&#xff09;核心类。该类并非独立音频处理库&#xff0c;而是面向硬件抽象层&#xff08;HAL&#xf…...

秒杀系统主库宕机不丢单方案-02-半同步AFTER_SYNC

秒杀系统主库宕机不丢单方案&#xff1a;半同步AFTER_SYNC&#xff08;主从确认再提交&#xff09; 方案概述 半同步复制AFTER_SYNC方案是MySQL 5.7版本引入的高级复制机制&#xff0c;通过主从节点之间的确认机制确保数据不丢失。该方案在主库提交事务前&#xff0c;等待至少一…...

国产N32芯片开发避坑指南:J-Link在Keil中的特殊配置(含Cortex-M0配置模板)

国产N32芯片开发实战&#xff1a;J-Link调试配置深度解析与Keil环境优化 在国产MCU生态快速崛起的背景下&#xff0c;N32系列芯片凭借优异的性价比和本土化服务优势&#xff0c;正逐步成为工程师替代进口方案的新选择。然而&#xff0c;从传统ST芯片转向国产平台时&#xff0c;…...

2026最权威的六大降重复率工具解析与推荐

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 飞速发展的人工智能技术&#xff0c;正深切地重塑着学术写作的范式&#xff0c;当下&#xf…...

从芯片包到破解:Keil MDK5完整安装与配置实战(附最新支持包离线导入方法)

从芯片包到破解&#xff1a;Keil MDK5完整安装与配置实战&#xff08;附最新支持包离线导入方法&#xff09; 在嵌入式开发领域&#xff0c;Keil MDK5作为ARM架构微控制器的主流开发环境&#xff0c;其安装配置的完整性与稳定性直接影响后续开发效率。本文将系统性地拆解从软件…...