TypeScript 中的深拷贝和浅拷贝

什么是深拷贝

在JavaScript/TypeScript中,深拷贝是指创建一个对象的副本,而不仅仅是创建对原始对象的引用。对复制的对象进行的任何更改都不会影响原始对象,反之亦然。

这个副本将完全复制基础对象,包括每个嵌套级别的所有属性和字段,生成新的引用。

为什么需要深拷贝

在Angular中,深拷贝的目的是创建一个与原始对象完全独立的新对象实例。这在您想要更改对象而不影响原始对象时非常有用,例如在处理不应该被修改的数据时。

例如,在Angular中创建一个新组件时,您可能希望将数据传递给该组件,而不修改原始数据。使用深拷贝可以确保在组件内部对数据所做的任何更改都不会影响原始数据。

此外,当您拥有一个庞大而复杂的数据结构时,使用深拷贝可以有助于创建数据的新副本并保持原始数据的完整性。

总的来说,使用深拷贝在Angular中处理数据是一种良好的实践,可以避免由于修改原始数据而导致的意外副作用。

在这里插入图片描述

深拷贝 vs 浅拷贝

另一方面,浅拷贝创建了对象的新实例,但只复制嵌套对象的引用,而不是嵌套对象本身。这意味着在复制的对象中对嵌套对象进行的任何更改也会影响原始对象,反之亦然。

当我们谈论Angular深拷贝时,浅拷贝也是不能被忽视的。我将在未来的一篇博客文章中讨论浅拷贝。

深拷贝的一些实现方式

JSON.parse

此方法使用内置的 JSON 对象将对象转换为 JSON 字符串,然后将其解析回对象。 这种方法很简单,适用于大多数基本对象。

let obj2 = JSON.parse(JSON.stringify(obj));

这不适用于具有方法或循环引用的对象。如果您的对象包含:日期、函数、未定义、Infinity、RegExp、Maps、Sets、Blob、FileLists、ImageDatas、稀疏数组、类型化数组或其他复杂类型,也不适合采用这种方法。

lodash.cloneDeep

下面这种方法使用 lodash 库创建对象的深拷贝。

您需要先通过运行 npm install lodash 来安装 lodash 库,然后将其导入到您要使用它的组件或服务中:

import * as _ from 'lodash';
let obj2 = _.cloneDeep(obj);

Object.assign

此方法使用内置的 Object.assign 方法创建具有原始对象属性的新对象。 这种方法也很简单,适用于大多数基本对象,但它只创建一个浅拷贝。

let obj2 = Object.assign({}, obj);

这是嵌套对象的浅拷贝。 所以不要用于大型 JavaScript 对象。 它创建对象的浅表副本,原始对象中的嵌套对象仍然是对原始对象的引用。

几种方法的性能比较:
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

在vite5和vue3开发环境中使用jodit4富文本编辑器,并添加自定义插件和使用highlight.js实现代码块高亮(附其他自定义配置项和全部代码)

最近富文本编辑器jodit终于更新发布到了4.0版本,加入了css变量、有更好的typescript支持,截止发文时的版本是:4.0.5,看到有了新版本于是便想着将本地项目中的jodit版本也进行升级,琢磨着再丰富和添加一些功能&#xff…

excel 各种用法

excel 各种用法 实现两张表格数据关联 vlookup 实现两张表格数据关联 vlookup 实现两个 sheet 间的关联需要用 vlookup 函数实现 函数第一个参数设置成 sheet1 中的 A 列(如果数据很多,可以直接选中 A 列) 函数的第二个参数选中 sheet2 中…

android 和 opencv 开发环境搭建

本文详细说明给android项目添加opencv库的详细步骤,并通过实现图片灰度化来查看配置是否成功。 下载OPENCV ANDROID SDK 到官网下载 打开 https://opencv.org/releases/ 选择android,下载完成后解压出下面的文件: 安装android sdk 和 ndk …

YOLOv8全网首发:DCNv4更快收敛、更高速度、更高性能,效果秒杀DCNv3、DCNv2等 ,助力检测

💡💡💡本文独家改进:DCNv4更快收敛、更高速度、更高性能,完美和YOLOv8结合,助力涨点 DCNv4优势:(1) 去除空间聚合中的softmax归一化,以增强其动态性和表达能力;(2) 优化存储器访问以最小化冗余操作以加速。这些改进显著加快了收敛速度,并大幅提高了处理速度,DCN…

【CSS】解决height = line-height 文字不垂直居中(偏上、偏下)的问题

解决办法1: 查看 font-family 属性,确认是否是因为字体而导致的不垂直居中问题。 其他小知识: 基线就是小写x字母的下边缘(线) 就是我们常说的 基线。line-height 属性设置的行高也就是定义的两行文字基线之间的距离! 参考文章:…

2017年认证杯SPSSPRO杯数学建模B题(第一阶段)岁月的印记全过程文档及程序

2017年认证杯SPSSPRO杯数学建模 跨年龄人脸识别模型的建立与分析 B题 岁月的印记 原题再现: 对同一个人来说,如果没有过改变面容的疾病、面部外伤或外科手术等经历,年轻和年老时的面容总有很大的相似性。人们在生活中也往往能够分辨出来两…

Java 方法中参数类型后写了三个点?什么意思?

1、...代表什么意思? 2、如何使用 3、注意事项 4、两个list,一个新的,一个旧的,旧列表中可能有新列表中存在的数据,也可能存在新列表中不存在的数据(注:新旧列表中都不存在重复元素)…

7.6 MySQL基本函数的使用(❤❤❤)

7.6 MySQL基本函数的使用 1. 提要2. 数字函数3. 字符函数3.1 替换字符3.2 左填充字符及截取字符串 4. 日期函数4.1 日期函数4.2 表达式占位符4.3 日期偏移计算4.4 日期间隔 5. 条件函数5.1 IF语句5.2 case...when语句 1. 提要 2. 数字函数 3. 字符函数 3.1 替换字符 -- INSERT…

水电站智能监测泄洪预警系统介绍

一、背景 近年来由于危险河道管理措施不到位,调峰电站泄水风险长期存在,信息通报制度缺失以及民众安全警觉性不高等因素导致的水电站在泄洪时冲走下游河道游客以及人民财产的事故频发。 二、系统介绍 水电站智能监测泄洪预警系统是一种集成了物联网、云…

C/C++ BM5 合并K个已排序的链表

文章目录 前言题目1 解决方案一1.1 思路阐述1.2 源码 2 解决方案二2.1 思路阐述2.2 源码 总结 前言 在接触了BM4的两个链表合并的情况,对于k个已排序列表,其实可以用合并的方法来看待问题。 这里第一种方法就是借用BM4的操作,只不过是多个合…

腾讯云服务器的介绍_云主机概览——腾讯云

腾讯云服务器CVM提供安全可靠的弹性计算服务,腾讯云明星级云服务器,弹性计算实时扩展或缩减计算资源,支持包年包月、按量计费和竞价实例计费模式,CVM提供多种CPU、内存、硬盘和带宽可以灵活调整的实例规格,提供9个9的数…

workflow源码解析:GoTask

关于go task 提供了另一种更简单的使用计算任务的方法,模仿go语言实现的go task。 使用go task来实计算任务无需定义输入与输出,所有数据通过函数参数传递。 与ThreadTask 区别 ThreadTask 是有模板,IN 和 OUT, ThreadTask 依赖…

分布式Erlang/OTP(学习笔记)(一)

Erlang分布式基础 假设你在机器A和机器B上各跑着一个Simple Cache应用的实例。要是在机器A的缓存上插人一个键/值对之后,从机器B上也可以访问,那可就好了。显然,要达到这个目的,机器A必须以某种方式将相关信息告知给机器B。传递该…

力扣309. 买卖股票的最佳时机含冷冻期(动态规划,Java C++解法)

Problem: 309. 买卖股票的最佳时机含冷冻期 文章目录 题目描述思路解题方法复杂度Code 题目描述 思路 Problem: 714. 买卖股票的最佳时机含手续费 该题目可以看作是上述题目的改编,该题目添加了一个冷冻期使得动态转移方程更加复杂,具体思路如下&#xf…

【MyBatis-Plus】逻辑删除

对于一些比较重要的数据,我们通常采用逻辑删除。(即用一个字段表示是否删除,实际上始终在数据库没有被删除) 当逻辑删除字段为 true,业务处理的时候会自动把该数据当做一个“不存在”的数据处理。(即不处理…

uniapp让图片缩小

image{width: 500rpx;height:500rpx;} 在图片属性设置为image{}宽高改变但是大小不改变,解决办法是改成下面的代码 & > img {width: 50px; height: auto; } 如图:

最优解:阿里云服务器地域如何选择?

阿里云服务器地域和可用区怎么选择?地域是指云服务器所在物理数据中心的位置,地域选择就近选择,访客距离地域所在城市越近网络延迟越低,速度就越快;可用区是指同一个地域下,网络和电力相互独立的区域&#…

【计算机网络】(1)OSI七层模型、协议、交换技术、路由器技术

文章目录 计算机网络功能与分类计算机网络的定义计算机网络的功能计算机网络的指标计算机网络的性能指标计算机网络的非性能指标 计算机网络的分布范围以及拓扑结构划分图计算机网络分类总线型拓扑星型拓扑环形图拓扑树型拓扑分布式拓扑 通信技术信道物理信道逻辑信道 发信机OS…

vue3-事件处理

事件监听 DOM 事件监听指令 v-on 简写 v-on:click"handler" 或者 click"handler"事件处理器 (handler) 的值可以是: 内联事件处理器:比如 click 方法事件处理器:一个指向组件上定义的方法的属性名或是路径。 在内联…

搭建属于自己的内容付费平台:开发知识付费APP教学

近期知识付费的热度非常高,本篇文章小编将为你提供一份关于如何搭建属于自己的内容付费平台的简要教程,让你能够逐步实现一个功能完备的知识付费APP。 1.明确目标和功能需求 在开始开发之前,首先需要确定你的APP是面向哪个领域的用户&#x…