使用JavaScript实现深浅拷贝

1. 拷贝的基本概念和必要性

在 JavaScript 中,数据类型分为基本数据类型(如 NumberStringBooleanNullUndefinedSymbol)和引用数据类型(如 ObjectArray)。基本数据类型存储的是值本身,而引用数据类型存储的是内存地址。当需要对数据进行操作且不想影响原始数据时,就需要进行拷贝。

2. 浅拷贝(Shallow Copy)

概念

浅拷贝创建一个新对象,新对象的顶层属性是原始对象属性的副本,但如果原始对象的属性是引用类型,新对象和原始对象会共享这些引用类型属性的内存地址。也就是说,修改新对象中引用类型的属性会影响原始对象中对应的属性。

实现方式
  • 扩展运算符(Spread Operator):常用于数组和对象的浅拷贝。
// 数组浅拷贝
const originalArray = [1, [2, 3]];
const shallowCopiedArray = [...originalArray];
shallowCopiedArray[1][0] = 9;
console.log(originalArray); // 输出: [1, [9, 3]]// 对象浅拷贝
const originalObject = { a: 1, b: { c: 2 } };
const shallowCopiedObject = { ...originalObject };
shallowCopiedObject.b.c = 9;
console.log(originalObject.b.c); // 输出: 9
  • Object.assign():用于将一个或多个源对象的所有可枚举属性复制到目标对象。
const original = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, original);
shallowCopy.b.c = 9;
console.log(original.b.c); // 输出: 9
  • Array.prototype.slice():常用于数组的浅拷贝。
const arr = [1, [2, 3]];
const newArr = arr.slice();
newArr[1][0] = 9;
console.log(arr); // 输出: [1, [9, 3]]

3. 深拷贝(Deep Copy)

概念

深拷贝会递归地复制对象及其所有嵌套的属性,创建一个完全独立的新对象,新对象和原始对象在内存中没有任何共享部分。修改新对象的任何属性都不会影响原始对象。

实现方式
  • JSON.parse(JSON.stringify()):这是一种简单的深拷贝方法,但有局限性。它不能处理函数、Symbol 类型的属性、Date 对象、RegExp 对象等。
const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));
deepCopy.b.c = 9;
console.log(original.b.c); // 输出: 2
  • 递归实现:自定义函数递归地复制对象和数组。
function deepClone(obj) {if (typeof obj !== 'object' || obj === null) {return obj;}let clone;if (Array.isArray(obj)) {clone = [];for (let i = 0; i < obj.length; i++) {clone[i] = deepClone(obj[i]);}} else {clone = {};for (let key in obj) {if (obj.hasOwnProperty(key)) {clone[key] = deepClone(obj[key]);}}}return clone;
}const original = { a: 1, b: { c: 2 } };
const deepCopy = deepClone(original);
deepCopy.b.c = 9;
console.log(original.b.c); // 输出: 2

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/70082.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解析浏览器中JavaScript与Native交互原理:以WebGPU为例

引言 随着Web应用复杂度的提升&#xff0c;开发者对浏览器访问本地硬件能力的需求日益增长。然而&#xff0c;浏览器必须在开放性与安全性之间找到平衡——既不能放任JavaScript&#xff08;JS&#xff09;随意操作系统资源&#xff0c;又要为高性能计算、图形渲染等场景提供支…

T-Sql 打印所有用户表的建表脚本

-- 声明一个变量用于存储表名 DECLARE TableName NVARCHAR(128); -- 声明一个游标&#xff0c;用于遍历所有用户表 DECLARE TableCursor CURSOR FOR SELECT name FROM sys.tables WHERE type U; -- 打开游标 OPEN TableCursor; -- 从游标中获取第一行数据 FETCH NEXT FROM Ta…

25/2/16 <算法笔记> MiDas原理

MiDaS&#xff08;Monocular Depth Sensing&#xff09;是一种基于单目深度估计的技术&#xff0c;它通过深度学习方法使用单张RGB图像&#xff08;普通2D图像&#xff09;来估算场景的深度图&#xff08;Depth Map&#xff09;。相比于传统的依赖专用深度传感器&#xff08;如…

python+halcon 解读labelme标注生成marksimage

这一段代码封装了一个类&#xff0c;需要传统一个图片和标注后json文件所在的地址&#xff0c;标注的选项是polygon&#xff0c;主要是用于unet深度学习网络 在初始化时需要输入文件&#xff08;imagejeson&#xff09;路径&#xff0c;多分类任务的label_list。会在项目目录下…

从技术债务到架构升级,滴滴国际化外卖的变革

背 景 商家营销简述 在外卖平台的运营中&#xff0c;我们致力于通过灵活的补贴策略激励商家&#xff0c;与商家共同打造良好的合作关系&#xff0c;也会提供多样化的营销活动&#xff0c;帮助商家吸引更多用户下单。通过这些活动&#xff0c;不仅能够提高商家的销量&#xff0c…

英语—四级CET4考试—技巧篇—选词填空—实操教学—2014 年 6 月大学英语四级考试真题(第 2 套)

&#x1f3e0;个人主页&#xff1a;fo安方的博客✨ &#x1f482;个人简历&#xff1a;大家好&#xff0c;我是fo安方&#xff0c;目前中南大学MBA在读&#xff0c;也考取过HCIE Cloud Computing、CCIE Security、PMP、CISP、RHCE、CCNP RS、PEST 3等证书。&#x1f433; &…

线性代数中的正交和标准正交向量

在线性代数中&#xff0c;理解正交向量和正交向量至关重要&#xff0c;尤其是对于机器学习中的应用。这篇博文将简化这些概念&#xff0c;而不会太深入地深入研究复杂的数学。 正交向量 如果两个向量的点积等于零&#xff0c;则认为这两个向量是正交的。但点积到底是什么呢&am…

企业文件共享中的权限管理与安全风险防范

在企业的日常运营中&#xff0c;文件共享是必不可少的一项工作。然而&#xff0c;文件共享过程中如果权限管理不当&#xff0c;极易引发安全风险&#xff0c;导致企业敏感信息泄露。因此&#xff0c;加强文件共享中的权限管理与安全风险防范&#xff0c;对于保障企业信息安全至…

急停信号的含义

前言&#xff1a; 大家好&#xff0c;我是上位机马工&#xff0c;硕士毕业4年年入40万&#xff0c;目前在一家自动化公司担任软件经理&#xff0c;从事C#上位机软件开发8年以上&#xff01;我们在开发C#的运动控制程序的时候&#xff0c;一个必要的步骤就是确认设备按钮的急停…

数据结构:图;邻接矩阵和邻接表

邻接矩阵&#xff1a; 1.概念&#xff1a; 邻接矩阵是图的存储结构之一&#xff0c;通过二维数组表示顶点间的连接关系。 2.具体例子 &#xff1a; 一.无向图邻接矩阵示例&#xff1a; 示例图&#xff08;顶点&#xff1a;A、B、C&#xff0c;边&#xff1a;A-B、B-C&…

Kubernetes-master 组件

以下是Kubernetes Master Machine的组件。 etcd 它存储集群中每个节点可以使用的配置信息。它是一个高可用性键值存储&#xff0c;可以在多个节点之间分布。只有Kubernetes API服务器可以访问它&#xff0c;因为它可能具有一些敏感信息。这是一个分布式键值存储&#xff0c;所…

【第2章:神经网络基础与实现——2.1 前馈神经网络的结构与工作原理】

老铁们好!今天我们要来一场长达两万字的超详细技术探险,我会像拆解乐高积木一样把前馈神经网络(Feedforward Neural Network)的每个零件摆在台面上,用最接地气的方式让你彻底搞懂这个深度学习基石的工作原理。准备好了吗?我们开始吧! 第一章:神经网络的 “乐高积木” 1…

【云安全】云原生- K8S kubeconfig 文件泄露

什么是 kubeconfig 文件&#xff1f; kubeconfig 文件是 Kubernetes 的配置文件&#xff0c;用于存储集群的访问凭证、API Server 的地址和认证信息&#xff0c;允许用户和 kubectl 等工具与 Kubernetes 集群进行交互。它通常包含多个集群的配置&#xff0c;支持通过上下文&am…

【环境安装】重装Docker-26.0.2版本

【机器背景说明】Linux-Centos7&#xff1b;已有低版本的Docker 【目标环境说明】 卸载已有Docker&#xff0c;用docker-26.0.2.tgz安装包安装 1.Docker包下载 下载地址&#xff1a;Index of linux/static/stable/x86_64/ 2.卸载已有的Docker 卸载之前首先停掉服务 sudo…

字节跳动后端二面

&#x1f4cd;1. 数据库的事务性质&#xff0c;InnoDB是如何实现的&#xff1f; 数据库事务具有ACID特性&#xff0c;即原子性、一致性、隔离性和持久性。InnoDB通过以下机制实现这些特性&#xff1a; &#x1f680; 实现细节&#xff1a; 原子性&#xff1a;通过undo log实…

SpringBoot中使用MyBatis-Plus详细介绍

目录 一、MyBatis-Plus的使用步骤 1.引入MybatisPlus的起步依赖 2.定义Mapper&#xff08;也叫dao&#xff09;层的接口 3.MyBatis-Plus中常用注解 4. 使用MyBatis-Plus时要做如下配置 5.条件构造器 Wrapper 一、MyBatis-Plus的使用步骤 1.引入MybatisPlus的起步依赖 M…

vue3读取webrtc-stream 视频流

一.首先下载webrtc-stream&#xff0c;方便自己本地搭建视频流服务 https://download.csdn.net/download/cyw8998/90373521 解压后&#xff0c;启动命令 webrtc-streamer.exe -H 127.0.0.1:8020 二.vue3代码如下 <template><h1>video</h1><video id&…

vue3搭建实战项目笔记二

vue3搭建实战项目笔记二 2.1.git管理项目2.2.隐藏tabBar栏2.2.1 方案一&#xff1a;在路由元信息中设置一个参数是否显示tabBar2.2.2 方案二&#xff1a;通过全局设置相对定位样式 2.3.项目里封装axios2.3.1 发送网络请求的两种做法2.3.2 封装axios并发送网络请求2.3.2.1 对axi…

USC 安防平台之移动侦测

随着第四次科技革命的开启&#xff0c;AI技术获取了突飞猛进的发展&#xff0c;视频监控对应的视频分析技术也获取了巨大的发展。 还记得15年前采用人工提取特征做前景背景分离和提取&#xff0c;大部分依赖CPU&#xff0c;最多使用一下TI的DM642 DSP加速&#xff0c;开发难度…

Unity CommandBuffer绘制粒子系统网格显示

CommandBuffer是 Unity 提供的一种在渲染流程中插入自定义渲染命令的机制。在渲染粒子系统时&#xff0c;常规的渲染流程可能无法满足特定的渲染需求&#xff0c;而CommandBuffer允许开发者灵活地设置渲染参数、控制渲染顺序以及执行自定义的绘制操作。通过它&#xff0c;可以精…