最好用的深拷贝方法?分享 1 段优质 JS 代码片段!

news2024/10/2 14:26:07

本内容首发于工粽号:程序员大澈,每日分享一段优质代码片段,欢迎关注和投稿!

大家好,我是大澈!

本文约 900+ 字,整篇阅读约需 1 分钟。

今天分享一段优质 JS 代码片段,轻松实现了对象间的深度克隆。

老规矩,先阅读代码片段并思考,再看代码解析再思考,最后评论区留下你的见解!

const a = { x: 1, y: { y1: 'a' }, z: new Set([1, 2]) };
const b = structuredClone(a); 
// a !== b, a.y !== b.y, a.z !== b.z

分享原因

这段代码展示了 structuredClone 方法在深度复制对象方面的应用,这对于处理复杂的数据结构非常有用。

它比 JSON.parse(JSON.stringify()) 方法更安全,能避免一些类型转换问题,例如:保留日期对象的原有类型,而不是转换为字符串。

这个方法相对简便易用,只需将需要拷贝的对象作为参数传入即可,项目中推荐去使用!

代码解析

1. const a = { ... };

这里定义了一个名为 a 的对象,它包含一个基本类型的属性 x,一个嵌套对象 y ,以及一个 Set 类型的属性 z 。

2. structuredClone(a);

structuredClone() 是 JavaScript 中用于深拷贝对象的方法。

它使用结构化克隆算法创建给定值的深层拷贝。

语法是 structuredClone(value, { transfer }) :

value:被克隆的对象,可以是任何结构化克隆支持的类型。

transfer(可选参数):是一个可转移对象的数组,里面的值并没有被克隆,而是被转移到被拷贝对象上。

支持多种类型:可以复制大多数内置值,如数组、普通对象、日期(Date)、正则表达式(RegExp)、集合(Set)、映射(Map)等,还包括一些 Web API 类型,如 AudioData、Blob、CryptoKey 等。

但它的一些限制也不可忽略:

不支持拷贝函数,尝试复制函数会导致 DataCloneError 异常。

不支持 DOM 节点,复制 DOM 节点也会引发异常。

不复制属性描述符、setter 和 getter 等元数据属性,getter 属性的值会被复制,但 getter 函数本身不会被复制。

不遍历或复制对象原型,克隆后的对象不再属于原始构造函数的实例,不过其属性会被复制。

在 Web Workers 中的支持不完全,具体可查看 MDN 浏览器兼容性表。在不支持的平台上,可以使用 polyfill 来模拟该方法。

最后,附上兼容性

图片

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

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

相关文章

【JVM基础10】——垃圾回收-JVM垃圾回收算法有哪些?

目录 1- 引言:垃圾回收算法2- ⭐核心:三种垃圾回收算法2-1 标记清除法优缺点 2-2 标记整理算法优缺点 2-3 复制算法优缺点 3- 小结3-1 JVM 常见的垃圾回收算法有哪些? 1- 引言:垃圾回收算法 JVM 在识别了对象什么时候可以被回收之…

【精选】通信与感知(ISAC)必读好文

微信公众号:EW Frontier 个人博客:106.54.201.174 QQ交流群:949444104 简介 通信与感知(ISAC)也被称为联合雷达通信 (JRC) / 联合通信和雷达传感 (JCAS) / 双功能雷达通信 (DFRC) 定义:将传感和通信系统集…

redis详细介绍

Redis是一个开源的、基于内存的高性能键值对数据库,属于NoSQL数据库的一种。它以高性能、丰富的数据结构、持久化特性、复制、集群以及发布/订阅等特性而闻名。以下是Redis的详细介绍: 一、基本介绍 名称:Redis,全称Remote Dicti…

<数据集>起重机识别数据集<目标检测>

数据集格式:VOCYOLO格式 图片数量:2984张 标注数量(xml文件个数):2984 标注数量(txt文件个数):2984 标注类别数:1 标注类别名称:[cranes] 使用标注工具:labelImg 标注规则:对…

Adobe Acrobat不支持图片格式转换PDF文件

我在将图片格式(PNG,JPEG)转换为PDF的过程中遇到了如下问题: 单文件的解决办法——在软件外实现转换: 使用照片打开图片 选择打印 打印机选择Adobe PDF,执行打印 选择PDF文件的保存位置,过一会儿可以正…

反转链表(LeetCode)

题目 给你单链表的头节点,请你反转链表,并返回反转后的链表 解题 class ListNode:def __init__(self, value0, nextNone):self.value valueself.next nextdef reverse_linked_list_recursive(head: ListNode) -> ListNode:# 空链表或单节点链表if …

【Material-UI】Autocomplete组件的自定义功能(Customization)详解

文章目录 一、定制输入框二、全局自定义选项三、特定场景的自定义1. GitHub标签选择器2. 提示功能 四、总结 在现代Web开发中,UI组件的可定制性是提升用户体验和界面一致性的重要因素。Material-UI的Autocomplete组件提供了丰富的自定义选项,使得开发者可…

调试工具之GDB的基本使用

GDB基本使用 GDB是Linux下一款非常强大的调试软件&#xff0c;其实就是GNU Debugger的缩写。接下来我们学习一下他的基本使用。 例子函数&#xff0c;其中只有一个ds18b20的采集温度函数和一个主函数&#xff1a; #include <stdio.h> #include <errno.h> #includ…

一些硬件知识(十九)

立创的这个功能&#xff0c;绕等长线时候真的好用到o(╥﹏╥)o&#xff1a; 设计完成后一定要有一个最小工艺安全间距的DRC检查&#xff0c;不然的话又会出现嘉立创反馈短路&#xff0c;或者工艺生产不了&#xff1a; PMOS防反接电路&#xff1a; 理分析&#xff1a;当输入端加…

【两数之和 II - 输入有序数组】python刷题记录

R3-二分查找 双指针简单题 class Solution:def twoSum(self, numbers: List[int], target: int) -> List[int]:#双指针法i0jlen(numbers)-1while i<j:snumbers[i]numbers[j]if s>target:j-1elif s<target:i1else:return i1,j1return []

react-native从入门到实战系列教程一InputText组件之登录表单

登录使我们业务中不可缺少的功能&#xff0c;所以这篇我们学习写在react-native中实现表单登录 实现效果 代码实现 import {View,Text,StyleSheet,Dimensions,TextInput,Button,Alert, } from react-native; import {useEffect, useState} from react; import Logo from ../.…

通过systemd-resloved实现不同域名通过不同的`nameserver`进行解析

通过systemd-resloved实现不同域名通过不同的nameserver进行解析 一般来说只要DNS不发生网络故障就只会在一个nameserver 获取地址&#xff0c;但我们可能需要从不同nameserver 获取不同域名的地址&#xff0c;比如内网环境和外网环境分别使用不同的nameserver &#xff0c;但…

中间证书缺失如何发现和修复

一、背景 微信小程序等功能在发送后台请求时一般都会要求证书齐全&#xff0c;否则就会导致请求发送失败。 一般来说&#xff0c;如果中间证书不齐全&#xff0c;在不同设备上表现不一样&#xff0c;一般PC端可能不会有太大问题&#xff0c;仍然认为你的证书可信&#xff0c;但…

shell实用笔记

目录 一、基本语法 1. 基础知识 2. if判断 3. 循环遍历 介绍一个{ n1..n2 }, seq -s分隔符 n1 n2. 4. 函数脚本传参 结果会是如何&#xff1f; 5. 字符串常规操作 6. 字符串处理&#xff1a;awk、sed、tr。留着下次&#xff0c;太多了 一、基本语法 1. 基础知识 shel…

SSM网上考试系统—计算机毕业设计源码12795

摘 要 科技进步的飞速发展引起人们日常生活的巨大变化&#xff0c;电子信息技术的飞速发展使得电子信息技术的各个领域的应用水平得到普及和应用。信息时代的到来已成为不可阻挡的时尚潮流&#xff0c;人类发展的历史正进入一个新时代。在现实运用中&#xff0c;应用软件的工作…

后端学习笔记(3)--Maven

1.Maven ​ *专门用于管理和构建Java项目的工具&#xff0c;主要功能有&#xff1a; ​ 1.提供了一套标准化的项目结构 ​ 2.提供了一套标准化的构建流程(编译&#xff0c;测试&#xff0c;打包&#xff0c;发布) ​ 3.提供了一套依赖管理机制 1.简介 ​ *Apache Maven是一…

三分钟了解自动驾驶中视觉Transform应用:视觉Transoform自动驾驶综述

引言 Transformer技术在自然语言处理领域取得突破&#xff0c;催生了BERT、GPT和T5等模型。它在计算机视觉中也显示出潜力&#xff0c;尤其在自动驾驶领域&#xff0c;Transformer在物体检测、车道检测和分割等关键任务中替代了传统CNN和RNN&#xff0c;与强化学习结合用于路径…

秒懂Linux之gdb调试

目录 ​ 一. 前情提要 二. 相关命令 2.1 l 行号/函数名 2.2 r 2.3 b 2.4 info break 2.5 d 2.6 disable/enable 2.7 n 2.8 s 2.9 p 2.10 display/undisplay 2.11 c 2.12 bt 2.13 finish 2.14 untill 2.15 set var 三. 总结 一. 前情提要 Linux gcc/g出来的二…

100379.新增道路查询后的最短距离I

今天看到很有意思的一个题目&#xff0c;记录下来&#xff0c;供大家参考 题目描述 解题思路 为了解决这个问题&#xff0c;我们需要处理一系列的单向道路添加操作&#xff0c;并在每次添加后计算从城市 0 到城市 n-1 的最短路径长度。由于初始时每个城市 i 都有一条到 i1 的…

【C++高阶】:C++11的深度解析下

✨ 彼方尚有荣光在&#xff0c;何须悲叹少年轻 &#x1f30f; &#x1f4c3;个人主页&#xff1a;island1314 &#x1f525;个人专栏&#xff1a;C学习 &#x1f680; 欢迎关注&#xff1a;&#x1f44d;点赞 &#x1f442;&…