JS中对象数组深拷贝方法
-
structuredClone()
- JavaScript 中提供了一个原生 API 来执行对象的深拷贝:
structuredClone
。它可以通过结构化克隆算法创建一个给定值的深拷贝,并且还可以传输原始值的可转移对象。
当对象中存在循环引用时,仍然可以通过 structuredClone()
进行深拷贝。
const A = {set: new Set([1, 3, 3]),map: new Map([[1, 2]]),regex: /foo/,error: new Error('Hello!')}A.a = Aconst copied = structuredClone(A)console.log(copied)
注意:
原型链不能被遍历或拷贝(克隆的对象将不再是这个类的一个实例(但是这个类的所有有效属性都将被拷贝))
不能拷贝函数、方法DOM节点 、属性描述符、setter
和 getter
以及类似的元数据不能被克隆
支持拷贝的类型:
Array(数组)、ArrayBuffer(数据缓冲区)、Boolean(布尔类型)、DataView(数据视图)、Date(日期类型)、Error(错误类型,包括下面列出的具体类型)、Map(映射类型)、Object (仅指纯对象,如从对象字面量中创建的对象)、原始类型(除symbol
外,即 number、string、null、undefined、boolean、BigInt)、RegExp(正则表达式)、Set(集合类型)、TypedArray(类型化数组)。
-
JSON.parse(JSON.stringify())
使用时需要注意:
JSON.stringify
只能处理基本对象、数组和基本类型,而其他类型的值在转换之后都可能出现出乎意料的结果,例如 Date 会转化为字符串, Set 会转化为 {}
。
JSON.stringify
甚至完全忽略某些内容,比如undefined
或函数。
JSON.parse(JSON.stringify(x))
无法对包含循环引用的对象进行深克隆
const A = {set: new Set([1, 3, 3]),map: new Map([[1, 2]]),regex: /foo/,error: new Error('Hello!')}A.a = Aconst copied = JSON.parse(JSON.stringify(A))
报错:
所以,如果对象没有上面说的这些情况,使用 JSON.parse(JSON.stringify(x))
进行深克隆是完全没有问题的。如果有,就可以使用 structuredClone()
来进行深拷贝。
实现深拷贝只需以下三个核心步骤:
- 创建出对应数据类型的空白数据。即,若须拷贝的是对象类型数据,则创建一个空白对象,以此类推。
- 拷贝目标数据。即把目标数据拷贝到步骤1中创建的空白数据里。
- 返回拷贝的数据。
export function deepClone(data: any){// 普通类型数据则直接返回// 循环引用处理// 1. 创建对应类型的空白数据// 2. 复制// 3. 返回}
其他拷贝方式:
Object.assign/解构赋值/arr.concat
当拷贝内容中数据的值都是简单数据类型时,是深拷贝
当拷贝内容中数据的值出现引用数据类型时,引用数据仍然是浅拷贝,只有简单数据类型是深拷贝
转载于:
JavaScript 中更现代的深拷贝方法! - 掘金 (juejin.cn)
相关文章:
JS中对象数组深拷贝方法
structuredClone() JavaScript 中提供了一个原生 API 来执行对象的深拷贝:structuredClone。它可以通过结构化克隆算法创建一个给定值的深拷贝,并且还可以传输原始值的可转移对象。 当对象中存在循环引用时,仍然可以通过 structuredClone()…...
2022数学建模国赛C题官网展示论文C155论文复现
2022数学建模国赛C题C155论文复现 1.内容比对2.第一问第二小问复现代码2.1 页表合并2.2 数据的正态性检验2.2.1数据的正态性检验效果图 2.3不满足正态性,进行中心化对数比变换2.3.1 核心步骤-inf用0值替换2.3.2中心化对数比变换效果图 2.4描述性统计2.5 箱线图绘制 …...
阿里云 K8s PVC 绑定 StorageClass 申领 PV 失败
错误场景: 因为阿里云没有默认的 StorageClass 我也懒得更新,所以就创建了一个类型是云盘的 StorageClass。 但是在创建 PVC 之后发现一直是 Pending 状态就查询了一下日志,然后看到很多下面这种错误 liuduiMacBookM1Pro ~ % kubectl describe pvc graf…...
php数组
php数组是什么? 可以使用单个变量名存储多个不同类型的数据的特殊变量,这就是php数组。 php数组就是一个特殊的变量,它允许存储多个任意类型的数据。 创建数组 php数组有两种类型,分为索引数组和关联数组。 创建数组的方法有三种…...
构造不包含字母和数字的webshell
构造不包含字母和数字的webshell <?php echo "A"^""; ?> 输出的结果是字符"!“。之所以会得到这样的结果,是因为代码中对字符"A"和字符”"进行了异或操作。在PHP中,两个变量进行异或时,…...
中国大学生服务外包创新创业大赛丨借 AI 之力,助“记账”难题
一、中国大学生服务外包创新创业大赛 赛事介绍 中国大学生服务外包创新创业大赛,是响应国家关于鼓励服务外包产业发展、加强服务外包人才培养的相关战略举措与号召,举办的每年一届的全国性竞赛。 大赛均由中华人民共和国教育部、中华人民共和国商务部…...
MacOS 安装Redis并设置密码
在开发过程中,需要本地进行安装Redis进行测试,记录了下MacOS环境下安装Redis,以及设置密码。 Brew 安装 $ brew install redis启动服务 # 启动服务 brew services start redis # 关闭服务 brew services stop redis # 重启服务 brew servic…...
函数的参数作为引用
文章目录 1. num,list ,tuple2. list 作为默认值导致共享同一列表3. 防御可变参数4. 结论 1. num,list ,tuple 结论:num ,tuple 作为参数,自身不会因为函数的原因而改变,list 为可变量,会因为函数变而变。 测试 def f(a, b):a …...
【文化课学习笔记】【化学】非金属及其化合物
【化学】必修一:非金属及其化合物 硅及其化合物 硅单质 物理性质 单晶硅的结构与金刚石类似,为正四面体的立体网状结构。晶体中每个硅原子与其他四个硅原子相连接。\(1\mathrm{mol}\) 硅单质还有 \(\mathrm{2N_A}\) 个 \(\mathrm{Si-Si}\) 键;…...
Unity进阶–通过PhotonServer实现联网登录注册功能(客户端)–PhotonServer(三)
文章目录 Unity进阶–通过PhotonServer实现联网登录注册功能(客户端)–PhotonServer(三)前情提要客户端部分 Unity进阶–通过PhotonServer实现联网登录注册功能(客户端)–PhotonServer(三) 前情提要 单例泛型类 using System.Collections; using System.Collections.Generic; …...
步步向前,曙光已现:百度的大模型之路
大模型,是今年全球科技界最火热,最耀眼的关键词。在几个月的狂飙突进中,全球主要科技公司纷纷加入了大模型领域。中国AI产业更是开启了被戏称为“百模大战”的盛况。 但喧嚣与热闹之后,新的问题也随之而来:大模型的力量…...
常见的 Python 错误及其解决方案
此文整理了一些常见的 Python 错误及其解决方案。 1、SyntaxError: invalid syntax 说明:无效的语法是最常见的错误之一,通常是由于编写代码时违反了 Python 的语法规则。可能的原因: 忘记在 if、while、for 等语句后写冒号,或者…...
文章评论以及回复评论邮件通知(Go 搭建 qiucode.cn 之八)
要说到评论。无疑是博客应用的灵魂所在了,它也正是站长与博友、博友与博友之间互相交流的桥梁,倘若少了它,博客应用将变得暗淡无关,索然无味,恍如一具躺在床榻上的植物人,终究是无法与周边人言语的。 也正是有了评论,站长在该博客应用所发表的博文,博友才得以通过评论,…...
java面试基础 -- ArrayList 和 LinkedList有什么区别, ArrayList和Vector呢?
目录 基本介绍 有什么不同?? ArrayList的扩容机制 ArrayLIst的基本使用 ArrayList和Vector 基本介绍 还记得我们的java集合框架吗, 我们来复习一下, 如图: 可以看出来 ArrayList和LinkedList 都是具体类, 他们都是接口List的实现类. 但是他们底层的逻辑是不同的, 相信…...
matlab 点云最小二乘拟合空间直线(方法一)
目录 一、算法原理1、空间直线2、最小二乘法拟合二、代码实现三、结果展示四、可视化参考本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、算法原理 1、空间直线 x...
详解junit
目录 1.概述 2.断言 3.常用注解 3.1.Test 3.2.Before 3.3.After 3.4.BeforeClass 3.5.AfterClass 4.异常测试 5.超时测试 6.参数化测试 1.概述 什么是单元测试: 单元测试,是针对最小的功能单元编写测试代码,在JAVA中最小的功能单…...
Nginx的安装及负载均衡搭建
一.Nginx的安装 1)准备安装环境 yum install -y make gcc gcc-c pcre-devel pcre zlib zlib-devel openssl openssl-develPERE PCRE(Perl Compatible Regular Expressions)是一个Perl库,包括 perl 兼容的正则表达式库。 nginx的http模块使用pcre来解…...
JVM学习笔记(一)
1. JVM快速入门 从面试开始: 请谈谈你对JVM 的理解?java8 的虚拟机有什么更新? 什么是OOM ?什么是StackOverflowError?有哪些方法分析? JVM 的常用参数调优你知道哪些? 内存快照抓取和MAT分…...
fastjson 序列化问题:Comparison method violates its general contract
fastjson 序列化问题:Comparison method violates its general contract 问题重现 今天在测试接口的时候,调用了Mybatis Plus 分页查询的接口,然后将查询的结果转换成 Json字符串的形式,结果报了这个错误: java.lang.…...
Angular安全专辑之二——‘unsafe-eval’不是以下内容安全策略中允许的脚本源
一:错误出现 这个错误的意思是,拒绝将字符串评估为 JavaScript,因为‘unsafe-eval’不是以下内容安全策略中允许的脚本源。 二:错误场景 testEval() {const data eval("var sum2 new Function(a, b, return a b); sum2(em…...
十一、Linux用户及用户组的权限信息如何查看?如何修改?什么是权限的数字序号?
目录: 1、认知权限信息 2、rwx? (1)总括: (2)r权限: (3)w权限: (4)x权限: 3、修改权限 (1&a…...
ahooks.js:一款强大的React Hooks库及其API使用教程(二)
一、ahooks.js简介二、ahooks.js安装三、继续ahooks.js API的介绍与使用教程21. useLocalStorageState22. useSessionStorageState23. useClickAway24. usePersistFn25. useCreation26. useFullscreen27. useInViewport28. useInfiniteScroll29. usePagination30. useDynamicLi…...
ARM 配置晶振频率
文章目录 前言串口乱码问题定位内核修改晶振频率uboot 修改晶振频率番外篇 前言 上篇文章《ARM DIY 硬件调试》介绍了 DIY ARM 板的基础硬件焊接,包括电源、SOC、SD 卡座等,板子已经可以跑起来了。 但是发现串口乱码,今天就来解决串口乱码问…...
最强自动化测试框架Playwright(37)-网络
介绍 Playwright 提供 API 来监控和修改浏览器网络流量,包括 HTTP 和 HTTPS。页面执行的任何请求,包括 XHR 和获取请求,都可以被跟踪、修改和处理。 模拟接口 查看我们的 API 模拟指南,了解有关如何 模拟 API 请求,…...
Ant Design Pro 前端脚手架 配置混合导航
Ant Design Pro脚手架 点击查看阅读 混合导航: 顶部导航和侧边栏导航实现联动效果,点击不同的顶部导航按钮会显示对应的子菜单项。 实现点: 1. 路由的配置 菜单展示 我们可以在 route 中进行 menu 相关配置,来决定当前路由是否…...
tcl学习之路(五)(Vivado时序约束)
1.主时钟约束 主时钟通常是FPGA器件外部的板机时钟或FPGA的高速收发器输出数据的同步恢复时钟信号等。下面这句语法大家一定不会陌生。该语句用于对主时钟的名称、周期、占空比以及对应物理引脚进行约束。 create_clock -name <clock_name> -periood <period> -wa…...
Hlang-中英双语言编程语言使用手册
文章目录 介绍Hlang基本使用下载配置环境变量特性中文关键字支持中文符号混合编程中文错误提示终端多行输入基本数据类型整数浮点数列表字符串基本操作变量定义逻辑判断基本运算条件判断循环函数介绍 Hlang是一款基于Python编写的支持中英文混合编程的动态语言。其简单易上手,…...
centos 7 安装docker
系统配置: CentOS关闭selinux sed -i s/SELINUXenforcing/SELINUXdisabled/g /etc/selinux/config关闭防火墙(可选)或者放行相应端口 systemctl stop firewalld.service && systemctl disable firewalld.service配置内核IP 转发 net.ipv4.ip_forward1 dock…...
Spring环境搭建、SpringIOC容器基础、SpringDI基础
文章目录 Spring环境搭建、SpringIOC容器基础、SpringDI基础一、SpringIOC核心思想二、搭建Spring环境步骤三、SpringIOC容器使用步骤四、SpringIOC 总结五、SpringDI(依赖注入)1、基本概念2、实现方式(1)set 注入(2&a…...
CentOS7.9手工配置静态网络流程
进入网卡配置文件 vim /etc/sysconfig/network-scripts/ifcfg-ens33 配置 TYPE"Ethernet" PROXY_METHOD"none" BROWSER_ONLY"no" BOOTPROTO"static" //static 配置静态网络 DEFROUTE"yes" IPV4_FAILURE_FATAL"no…...
JVM面试题-1
1、什么是JVM内存结构? jvm将虚拟机分为5大区域,程序计数器、虚拟机栈、本地方法栈、java堆、方法区; 程序计数器:线程私有的,是一块很小的内存空间,作为当前线程的行号指示器,用于记录当前虚拟…...
漫谈红黑树:红黑树的奇妙演化
漫谈红黑树:红黑树的奇妙演化 一、红黑树的提出二、红黑树性质的简单推导三、结论 博主简介 💡一个热爱分享高性能服务器后台开发知识的博主,目标是通过理论与代码实践的结合,让世界上看似难以掌握的技术变得易于理解与掌握。技能…...
docker启动rabbitmq,但是页面加载不出来问题解决
首先docker启动rabbitmq docker run -d -p 5672:5672 -p 15672:15672 --name rabbitmq rabbitmq -d 后台运行 -p 映射外部端口 -- name 取名(方便管理) 然后发现,成功启动rabbitmq,却加载不进去 因为你下载的是rabbitmq的latest…...
Qt项目报错:Cannot run compiler ‘clang++‘. /bin/sh: 1: clang++: not found
在一台旧电脑上装了深度系统,装了Qt,导入项目, build提示 clang找不到: Project ERROR: Cannot run compiler clang. Output: /bin/sh: 1: clang: not found Maybe you forgot to setup the environment? Error while parsing …...
奇舞周刊第503期:图解串一串 webpack 的历史和核心功能
记得点击文章末尾的“ 阅读原文 ”查看哟~ 下面先一起看下本期周刊 摘要 吧~ 奇舞推荐 ■ ■ ■ 图解串一串 webpack 的历史和核心功能 提到打包工具,可能你会首先想到 webpack。那没有 webpack 之前,都是怎么打包的呢?webpack 都有哪些功能&…...
6.redis面试题和坑
1.哨兵模式 多少个节点多少个哨兵(如果全部哨兵检测到已经master dead,重新选举)写sentinel.conf,监控的主机 票数 sentinel monitor myredis 127.0.0.1 6379 1启动哨兵 redis-sentinel sentinel.conf关闭主机 failover sdown info replication shutdown优点 1.基于主从复制模式…...
【ES6】—使用 const 声明
一、不属于顶层对象window 使用const关键字 声明的变量,不会挂载到window属性上 const a 5 console.log(a) console.log(window.a) // 5 // undefined二、不允许重复声明 使用const关键字不允许重复声明相同的变量 cosnt a 5 cosnt a 6 // Uncaught SyntaxEr…...
iOS开发 - Swift Codable协议实战:快速、简单、高效地完成JSON和Model转换!
前言 Codable 是 Swift 4.0 引入的一种协议,它是一个组合协议,由 Decodable 和 Encodable 两个协议组成。它的作用是将模型对象转换为 JSON 或者是其它的数据格式,也可以反过来将 JSON 数据转换为模型对象。 Encodable 和 Decodable 分别定…...
RabbitMq:Topic exchange(主题交换机)的理解和使用
RabbitMq:Topic exchange(主题交换机)的理解和使用 在RabbitMq中,生产者的消息都是通过交换机来接收,然后再从交换机分发到不同的队列中去,在分发的过程中交换机类型会影响分发的逻辑,下面主要讲解一下主题交换机。 主题交换…...
汽车级36V、4A同步降压转换器MAX20404AFOD/VY、MAX20404AFOC/VY、MAX20404AFOA/VY开关稳压器
MAX20404是小型同步降压转换器,集成了高端和低端开关。这些IC均设计为可在3V到36V的宽输入电压范围内提供高达4A的电流。电压质量可以通过观察PGOOD信号来监测。该器件可以在99%的占空比下运行,非常适合汽车和工业应用。 MAX20404提供可编程输出电压或5…...
C++------利用C++实现二叉搜索树【数据结构】
文章目录 二叉搜索树概念二叉搜索树的操作查找插入删除 二叉搜索树的应用 二叉搜索树 概念 什么是二叉搜索树,二叉搜索树就是指左孩子永远比根小右孩子永远比根大。这个规则适用于所有的子树。 上面的就是一棵二叉搜索树,我们还可以发现这棵树走一个中…...
HotSpot虚拟机之内存模型与线程安全
目录 一、线程内存模型 1. 内存模型 2. 内存模型操作 二、Happens-Before原则 三、Java线程 1. 线程实现方式 2. Java线程状态 四、Java线程安全 1. 线程安全程度 2. 锁优化 五、参考资料 一、线程内存模型 1. 内存模型 内存模型主要目的是定义共享变量的访问规则&…...
TiDB 多集群告警监控-中章-融合多集群 Grafana
作者: longzhuquan 原文来源: https://tidb.net/blog/ac730b0f 背景 随着公司XC改造步伐的前进,越来越多的业务选择 TiDB,由于各个业务之间需要物理隔离,避免不了的 TiDB 集群数量越来越多。虽然每套 TiDB 集群均有…...
【图像分类】基于卷积神经网络和主动学习的高光谱图像分类(Matlab代码实现)
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...
notepad++ verilog关键字自动补全
新建verilog.xml放在安装目录下 D:\Program Files (x86)\Notepad\autoCompletion <?xml version"1.0" encoding"Windows-1252" ?> <NotepadPlus><AutoComplete><KeyWord name"accept_on" /><KeyWord name"a…...
C语言知识
C语言知识 链接 C语言中的数组初始化是有三种形式的,分别是: (1)数据类型 数组名称[长度n] {元素1,元素2…元素n}; (2)数据类型 数组名称[] {元素1,元素2…元素n}; (3)数据类型 数组名称[长度n]; 数组名称[0] 元素1; 数组名称[1] 元素2; 数组…...
数据结构基础
将节点构建成树 数据的结构逻辑结构集合线性结构树形结构图状结构 存储结构合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如…...
深度学习中数据处理相关的技巧
文章目录 提取隐蔽特征惰性加载数据集类别分布不均衡 提取隐蔽特征 在某些任务中,一些类别的特征可能相对较为罕见或难以捕捉。由于这些特征在数据集中出现的频率较低,模型可能无法充分学习它们,从而导致对这些类别的辨别能力较弱。为了解决…...
wkhtmltopdf 与 .Net Core
wkhtmltopdf 是使用webkit引擎转化为pdf的开源小插件. 其有.NET CORE版本的组件,DinkToPdf,但该控件对跨平台支持有限 。 是由于各系统平台会产生不同的编译结果,故windows上使用.dll,而Linux上的动态链接库是.so 所以你需要在Linux系统上安装相关wkhtmltox软件。 我这里准备了…...
Linux Mint 21.3 计划于 2023 年圣诞节发布
Linux Mint 项目近日公布了基于 Ubuntu 的 Linux Mint 发行版下一个重要版本的一些初步细节,以及备受期待的基于 Debian 的 LMDE 6(Linux Mint Debian Edition)版本。 近日,Linux Mint 项目负责人克莱门特-勒菲弗(Clem…...