前端面试题11(浅谈JavaScript深拷贝与浅拷贝)

在这里插入图片描述
在JavaScript中,数据的复制可以分为浅拷贝(Shallow Copy)和深拷贝(Deep Copy)。这两种拷贝方式主要区别在于如何处理对象中的嵌套对象。下面我会详细解释这两者的概念、区别,并提供相应的实现代码。

浅拷贝

浅拷贝是指创建一个新的对象,这个新对象的属性值是原对象属性值的引用(对于原始类型如字符串、数字、布尔值等是值的拷贝,而对于对象、数组等复杂类型则是引用的拷贝)。如果原对象的某个属性是一个对象,那么浅拷贝得到的新对象对应的属性将指向原对象中该属性所指向的对象的内存地址,也就是说拷贝得到的是同一个对象的引用。

实现浅拷贝的方法:
  1. Object.assign()

    const obj = { a: 1, b: { c: 2 } };
    const shallowCopy = Object.assign({}, obj);
    
  2. Spread Operator (扩展运算符)

    const obj = { a: 1, b: { c: 2 } };
    const shallowCopy = { ...obj };
    

深拷贝

深拷贝则是递归地拷贝原对象的所有层级,直到遇到不可遍历的值(如基本类型)。这意味着,无论对象的嵌套层次多深,深拷贝都会创建一个全新的对象,拥有与原对象相同内容但完全不同内存地址的副本,包括所有子对象也会被拷贝。

实现深拷贝的方法:
  1. JSON.parse() 和 JSON.stringify()
    注意这种方法对于函数、undefined、循环引用等情况不适用。

    const obj = { a: 1, b: { c: 2 } };
    const deepCopy = JSON.parse(JSON.stringify(obj));
    
  2. 递归实现
    这种方法可以处理更多复杂情况,如函数、日期对象等。

    function deepClone(obj, hash = new WeakMap()) {if (obj === null || typeof obj !== 'object') return obj;if (hash.has(obj)) return hash.get(obj);let cloneObj = new obj.constructor();hash.set(obj, cloneObj);for (let key in obj) {if (obj.hasOwnProperty(key)) {cloneObj[key] = deepClone(obj[key], hash);}}return cloneObj;
    }const obj = { a: 1, b: { c: 2 }, d: new Date() };
    const deepCopy = deepClone(obj);
    

总结

  • 浅拷贝只拷贝一层,对于对象或数组中的嵌套对象只是拷贝了引用。
  • 深拷贝会递归拷贝所有层级,创建一个完全独立的副本。

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

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

相关文章

【机器学习实战】Datawhale夏令营:Baseline精读笔记2

# AI夏令营 # Datawhale # 夏令营 在原有的Baseline上除了交叉验证,还有一种关键的优化方式,即特征工程。 如何优化特征,关系着我们提高模型预测的精准度。特征工程往往是对问题的领域有深入了解的人员能够做好的部分,因为我们要…

链式二叉树oj题

1.输入k ,找第k层节点个数 int TreeKlevel(BTNode*root,int k) {if (root NULL) {return 0;}if (k 1) {return 1;}return TreeKlevel(root->left, k - 1)TreeKlevel(root->right, k - 1); } 在这里我们要确定递归子问题,第一个就是NULL时返回&…

26_嵌入式系统网络接口

以太网接口基本原理 IEEE802标准 局域网标准协议工作在物理层和数据链路层,其将数据链路层又划分为两层,从下到上分别为介质访问控制子层(不同的MAC子层,与具体接入的传输介质相关),逻辑链路控制子层(统一的LLC子层,为上层提供统…

非同步升压转换器,效率95%你信吗?ETA1611输出电流2A, 22V DCDC

前言: 截止24年7月7日某创报价:500: ¥0.7856 / 个 建议使用前同时了解下方器件。 2毛钱的SOT23-5封装28V、1.5A、1.2MHz DCDC转换器用于LCD偏置电源和白光LED驱动等MT3540升压芯片 描述 ETA1611 SOT23-6封装 丝印GVYW&#xff0…

c进阶篇(三):字符串函数

1.strlen: strlen - C Reference strlen 函数是一个标准库函数&#xff0c;用于计算以 null 结尾的字符串的长度&#xff0c;也就是字符串中实际字符的数量&#xff0c;不包括最后的 null 终止符 \0。它定义在 <string.h> 头文件中。 函数原型:size_t strlen(const ch…

一篇就够了,为你答疑解惑:锂电池一阶模型-在线参数辨识(附代码)

锂电池一阶模型-在线参数辨识 背景在线 VS 离线 参数辨识递推最小二乘法一阶戴维南Z域离散表达式 背景 锂电池一阶戴维南等效模型的基础知识和离线辨识方法&#xff0c;已经在上一期非常详细地讲解了一轮&#xff08;上期文章请戳此处&#xff09;&#xff0c;本期继续讲解一下…

【数据结构】经典链表题目详解集合(反转链表、相交链表、链表的中间节点、回文链表)

文章目录 一、反转链表1、程序详解2、代码 二、相交链表1、程序详解2、代码 三、链表的中间节点1、程序详解2、代码 四、回文链表1、程序详解2、代码 一、反转链表 1、程序详解 题目&#xff1a;给定单链表的头节点 head &#xff0c;请反转链表&#xff0c;并返回反转后的链…

uniapp/Android App上架三星市场需要下载所需要的SDK

只需添加以下一个权限在AndroidManifest.xml <uses-permission android:name"com.samsung.android.providers.context.permission.WRITE_USE_APP_FEATURE_SURVEY"/>uniapp开发的&#xff0c;需要在App权限配置中加入以上的额外权限&#xff1a;

1958.力扣每日一题7/7 Java(100%解)

博客主页&#xff1a;音符犹如代码系列专栏&#xff1a;算法练习关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 目录 思路 解题方法 时间复杂度 空间复杂度 Code 思路 首先将指定位…

排序 -- 手撕归并排序(递归和非递归写法)

一、基本思想 归并排序&#xff08;MERGE-SORT&#xff09;是建立在归并操作上的一种有效的排序算法,该算法是采用分治法&#xff08;Divide and Conquer&#xff09;的一个非常典型的应用。将已有序的子序列合并&#xff0c;得到完全有序的序列&#xff1b;即先使每个子序列有…

汉诺塔与青蛙跳台阶

1.汉诺塔 根据汉诺塔 - 维基百科 介绍 1.1 背景 最早发明这个问题的人是法国数学家爱德华卢卡斯。 传说越南河内某间寺院有三根银棒&#xff0c;上串 64 个金盘。寺院里的僧侣依照一个古老的预言&#xff0c;以上述规则移动这些盘子&#xff1b;预言说当这些盘子移动完毕&am…

SpringMVC(2)——controller方法参数与html表单对应

controller方法参数与html表单对应 0. User实体类 import org.springframework.format.annotation.DateTimeFormat;import java.io.Serializable; import java.util.Date; import java.util.List; import java.util.Map;public class User implements Serializable {private …

ES7210高性能四通道音频ADC转换模拟麦克风为IIS数字咪头

特征 高性能多位 Delta-Σ 音频 ADC 102 dB 信噪比 -85 分贝 THDN 24 位&#xff0c;8 至 100 kHz 采样频率 I2S/PCM 主串行数据端口或从串行数据端口 支持TDM 256/384Fs、USB 12/24 MHz 和其他非标准音频系统时钟 低功耗待机模式 应用 麦克风阵列 智能音箱 远场语音捕获 订购…

微服务的分布式事务解决方案

微服务的分布式事务解决方案 1、分布式事务的理论模型1.1、X/Open 分布式事务模型1.2、两阶段提交协议1.3、三阶段提交协议 2、分布式事务常见解决方案2.1、TCC补偿型方案2.2、基于可靠性消息的最终一致性方案2.3、最大努力通知型方案 3、分布式事务中间件 Seata3.1、AT 模式3.…

Postgresql - 用户权限数据库

1、综述 在实际的软件项目开发过程中&#xff0c;用户权限控制可以说是所有运营系统中必不可少的一个重点功能&#xff0c;根据业务的复杂度&#xff0c;设计的时候可深可浅&#xff0c;但无论怎么变化&#xff0c;设计的思路基本都是围绕着用户、部门、角色、菜单这几个部分展…

Django QuerySet对象,filter()方法

filter()方法 用于实现数据过滤功能&#xff0c;相当于sql语句中的where子句。 filter(字段名__exact10) 或 filter(字段名10)类似sql 中的 10 filter(字段名__gt10) 类似SQL中的 >10 filter(price__lt29.99) 类似sql中的 <29.99 filter(字段名__gte10, 字段名__lte20…

程序升级bootloader

文章目录 概述什么是bootloader&#xff1f;为什么用&#xff1f;bootloader启动流程图步骤 下载过程代码获取本地配置信息获取主机传过来的配置信息bootloader发送2给上位机&#xff0c;上位机发送文件给bootloader根据网站复制CRC 烧写flasherase启动编译问题 概述 用keil编…

声明队列和交换机 + 消息转换器

目录 1、声明队列和交换机 方法一&#xff1a;基于Bean的方式声明 方法二&#xff1a;基于Spring注解的方式声明 2、消息转换器 1、声明队列和交换机 方法一&#xff1a;基于Bean的方式声明 注&#xff1a;队列和交换机的声明是放在消费者这边的&#xff0c;这位发送的人他…

Dynamic Web Module facet version问题

The default superclass, "javax.servlet.http.HttpServlet", according to the projects Dynamic Web Module facet version (3.1), was not found on the Java Build Path. 1.右键项目 2.点击Properties 3.点击Java Build Path&#xff0c;右边找到Libraries&…

大模型在营销领域的探索及创新

1 AIGA介绍 2 AIGA在营销领域的 应用和探索 3 总结与展望