【JavaScript】面试手撕深拷贝


鑫宝Code

🌈个人主页: 鑫宝Code
🔥热门专栏: 闲话杂谈| 炫酷HTML | JavaScript基础
💫个人格言: "如无必要,勿增实体"


文章目录

      • 深拷贝的作用
      • 深浅拷贝的区别
        • 浅拷贝
        • 深拷贝
    • 深拷贝实现方式
      • JSON.parse(JSON.stringify())
        • 介绍
        • 使用例子
        • 缺点
      • Lodash的cloneDeep
        • 介绍
        • 使用例子
        • 缺点
    • 手撕深拷贝
      • 基础版本
      • 进阶版本
    • 参考资料

579a429daf314744b995f37351b46548

引入 --

上次讲了浅拷贝,这次我们来讲深拷贝。有一说一,深拷贝也算是面试时非常常见的题目了。🐶

深拷贝的作用

首先为什么需要深拷贝,因为浅拷贝无法满足我们对原始数据完整、独立复制的需求。我们希望修改新对象不会影响原对象。

深浅拷贝的区别

这里引用ConardLi大佬的理解

浅拷贝

创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。

  • 如果属性是基本类型,拷贝的就是基本类型的值.
  • 如果属性是引用类型,拷贝的就是内存地址

所以如果其中一个对象改变了这个地址,就会影响到另一个对象。

深拷贝

将一个对象从内存中完整的拷贝一份出来

  • 从堆内存中开辟一个新的区域存放新对象
  • 且修改新对象不会影响原对象

深拷贝实现方式

JSON.parse(JSON.stringify())

遥记当年,我当时还是大三的时候,背了一周的面经就跑去字节面试实习生了。面试官就让我手撕深拷贝。

我当时才20刚出头,前端面经也才抱起来背了不到一周。这种题目我写的来得?

跟面试官面面相觑了半天,突然灵机一动,JSON.parse(JSON.stringfy())大法一定可以。

我当时非常开心的说出了这个答案, 面试官当时好像有点尬住了,嘴角流露出一股察摸不到的笑容。

但可能由于接受过专业的训练,也只在那短短的时间内便消失不见。🐶

介绍

JSON.parse(JSON.stringify()),首先使用利用JSON.stringify将对象转成JSON字符串。 再用JSON.parse把字符串解析成对象,一去一来,新的对象产生了,而且对象会开辟新的栈,实现深拷贝。

使用例子
const a = {name: '张三',score:{math: 100}
}const b = JSON.parse(JSON.stringify(a));// 改变b中的对象的值
b.score.math = 60;console.log('a的值',a);
console.log('b的值',b);/*** 输出的结果如下* a的值 { name: '张三', score: { math: 100 } }* b的值 { name: '张三', score: { math: 60 } }*/
缺点

记个TODO:下次写文章详细分析下JSON.stringify的缺点。

  • 不会拷贝对象上为undefined的值
  • 不能处理函数
  • 不能处理正则
  • 循环引用会报错
  • Symol会丢失等

Lodash的cloneDeep

续借上文,面试官笑了笑,说JSON.parse(JSON.stringify())这个方式有如上几个缺点,你能不能换个更好的方式将这个问题解决呢?

这又一次的让我陷入了思索,又开始了与面试官的面面相觑😅。突然我想起了以前用的Lodash,其中有一个NB的方法。cloneDeep,当时我洋洋得意,心想lodash库的方法,总不可能还有缺点吧?

此时,面试官的表情稍稍有点微妙,我的第六感告诉我,我好像答错了,不过我认为我回答的没问题呀。

晌久,面试官叹了口气说,我是让你手撕,手撕懂吗?

介绍

_.cloneDeeplodash库提供的深拷贝的方法,非常实用,建议背诵😂。

使用例子
import * as _ from "lodash";const a = {name: "张三",score: {math: 100,},
};const b = _.cloneDeep(a);
缺点

暂无,🐮的lodash库,🐮的cloneDeep函数。

手撕深拷贝

诶,还是得手撕呀,来吧来吧,还是得给面试官露一手的😜

基础版本

多年面试经验告诉我,一般写出这个版本,几乎都让过了,顶多在回答一下循环引用问题如何解决。一般不太会让写一个比较完美的深拷贝的。🐶

  1. 首先,我们要拷贝的数据类型有两种,分别是ArrayObject
  2. 如果对象里的属性还是对象,那么采用递归对这个对象再进行拷贝
  3. 如果对象里的属性不是对象,那么直接返回即可。

代码如下:

function deepClone(target) {if (typeof target === "object") {let cloneTarget = Array.isArray(target) ? [] : {};for (const key in target) {cloneTarget[key] = deepClone(target[key]);}return cloneTarget;} else {return target;}
}const a = {name: "张三",score: {math: 100,},
};const b = deepClone(a);
/** 输出的b与a一样 **/

但是这样实现会有若干个问题:

  1. 循环引用问题无法解决
  2. DateRegExp等对象无法拷贝

进阶版本

之所以用weakMap,是因为weakMap的键是弱引用,可以在任何时刻被回收。

如果想了解更清楚进阶深拷贝的原理,可以参阅 如何写出一个惊艳面试官的深拷贝?

function deepClone(target, hash = new WeakMap()) {if (target === null) return null;if (typeof target !== "object") return target;if (target instanceof Date) return new Date(target);if (target instanceof RegExp) return new RegExp(target);// 如果hash里有值,立马返回if (hash.has(target)) return hash.get(target);const cloneTarget = Array.isArray(target) ? [] : {};hash.set(target,cloneTarget);if (typeof target === "object") {for (const key in target) {cloneTarget[key] = deepClone(target[key],hash);}return cloneTarget;} else {return target;}
}const a = {name: "张三",score: {math: 100,},date: new Date(),regex: /^\d{3,4}-\d{5,8}$/,
};a.child = a;const b = deepClone(a);

运行结果如下:

参考资料

如何写出一个惊艳面试官的深拷贝?

浅拷贝与深拷贝

End

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

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

相关文章

微信小程序云开发教程——墨刀原型工具入门(素材面板)

引言 作为一个小白,小北要怎么在短时间内快速学会微信小程序原型设计? “时间紧,任务重”,这意味着学习时必须把握微信小程序原型设计中的重点、难点,而非面面俱到。 要在短时间内理解、掌握一个工具的使用&#xf…

在云端构建和部署工作负载的最佳方式是怎样的?

如果要问当今企业希望从云计算中获得什么,那么 “低延迟” 以及 “更接近客户” 可能会是很多企业的首要目标。低延迟可以带来诸多好处,如提升用户满意度、增加竞争优势、降低运营成本等;更接近客户则有助于降低网络拥塞、减少数据丢失、符合…

Java设计模式:外观模式

❤ 作者主页:欢迎来到我的技术博客😎 ❀ 个人介绍:大家好,本人热衷于Java后端开发,欢迎来交流学习哦!( ̄▽ ̄)~* 🍊 如果文章对您有帮助,记得关注、点赞、收藏、…

ArcGIS学习(十四)OD分析

ArcGIS学习(十四)OD分析 1.上海市KFC与麦当劳的空间聚集度分析 本任务给大家带来的内容是网络节点关系分析。网络节点关系分析一般也叫OD分析。“O”指的是起点(ORIGIN),"D”指的是终点(DESTINATION),0D分析即为基于起点到终点的分析。 网络节点关系分析我们经常…

基于springboot的厨艺交流平台

采用技术 基于springboot的厨艺交流平台的设计与实现~ 开发语言:Java 数据库:MySQL 技术:SpringBootMyBatis 工具:IDEA/Ecilpse、Navicat、Maven 页面展示 食材分类管理 用户信息管理 菜谱分类管理 菜谱信息管理 食材信息…

Swarm集群负载均衡的实现方式

目录 1. 背景2. 参考3. 环境4. 概念5. Swarm 网络5.1 Swarm 网络连接情况5.2 外部访问数据包转发流程 6 Swarm集群服务信息7 Swarm集群数据包转发流程7.1 Client发送请求至集群节点9090端口7.1.1 集群节点宿主机Netfilter规则7.1.2 Tcpdump抓包验证结果 7.2 Ingress_sbox下IPVS…

【漏洞复现】网康NS-ASG应用安全网关 index.php SQL注入漏洞(CVE-2024-2330)

0x01 产品简介 网康科技的NS-ASG应用安全网关是一款软硬件一体化的产品,集成了SSL和 IPSecQ,旨在保障业务访问的安全性,适配所有移动终端,提供多种链路均衡和选择技术,支持多种认证方式灵活组合,以及内置短…

Hadoop学习3:问题解决

文章目录 问题解决1. ERROR: but there is no HDFS_NAMENODE_USER defined2. JAVA_HOME is not set and could not be found.3. Hadoop-DFS页面访问不了4. namenode格式化失败,或者dfs页面打开失败5. ERROR: but there is no YARN_RESOURCEMANAGER_USER defined. Ab…

《ElementPlus 与 ElementUI 差异集合》el-input 和 el-button 属性 size 有变化

差异 element-ui el-input 和 el-button 中,属性size 值是 medium / small / minielement-plus el-input 和 el-button 中,属性size 值是 ‘large’ | ‘default’ | ‘small’; 如果你是自动升级,Vue3 系统会有如下警告“ el-b…

机器学习模型—支持向量机 (SVM)

机器学习模型—支持向量机 (SVM) 支持向量机 (SVM) 是一种强大的机器学习算法,用于线性或非线性分类、回归,甚至异常值检测任务。SVM 可用于各种任务,例如文本分类、图像分类、垃圾邮件检测、笔迹识别、基因表达分析、人脸检测和异常检测。SVM 在各种应用中具有适应性和高效…

使用C#创建服务端Web API

前言 C# Web API 是一种基于 .NET 平台(包括但不限于.NET Framework 和 .NET Core)构建 HTTP 服务的框架,用于创建 RESTful Web 服务。REST(Representational State Transfer)是一种软件架构风格,它利用HT…

前端食堂技术周刊第 115 期:Rolldown 正式开源、马斯克宣布 xAI 本周将开源 Grok、如何使用 Copilot 完成 50% 的日常工作?

美味值:🌟🌟🌟🌟🌟 口味:手打柠檬茶 食堂技术周刊仓库地址:https://github.com/Geekhyt/weekly 大家好,我是童欧巴。欢迎来到前端食堂技术周刊,我们先来看…

“antd“: Unknown word.cSpell

你遇到的问题是 VS Code 的 Code Spell Checker 插件在检查拼写时,将 "antd" 标记为未知单词。"antd" 是 Ant Design 的缩写,是一个流行的 React UI 库,不是一个英语单词,所以 Spell Checker 会将其标记为错误…

SpringBoot 多环境的配置(附带有截图)

文章目录 概要整体配置流程配置详细说明技术细节小结 概要 多环境开发 在实际项目开发中,一般需要针对不同的运行环境,如开发环境、测试环境、生产环境等,每个运行环境的数据库等配置都不相同,每次发布测试、更新生产都需要手动…

2024蓝桥杯每日一题(时间日期)

一、第一题:日期差值 解题思路:模拟 写一个计算时间的板子两者相减 【Python程序代码】 mon [0,31,28,31,30,31,30,31,31,30,31,30,31] def pd(x):if x%4000 or (x%40 and x%100!0):return Truereturn False def get_day(y,m,d):res 0for i …

代码学习记录16

随想录日记part16 t i m e : time: time: 2024.03.11 主要内容:今天的主要内容是二叉树的第五部分,主要涉及最大二叉树;合并二叉树;二叉搜索树的搜索;验证二叉搜索树。 654.最大二叉…

sensitive-word 敏感词 违规文字检测

1、快速开始 - JDK1.7- Maven 3.x 2、Maven 引入 <!-- https://mvnrepository.com/artifact/com.github.houbb/sensitive-word --><dependency><groupId>com.github.houbb</groupId><artifactId>sensitive-word</artifactId><version…

案例分析篇02:软件架构设计考点之特定领域软件架构、架构评估、架构视图(2024年软考高级系统架构设计师冲刺知识点总结)

专栏系列文章推荐: 2024高级系统架构设计师备考资料(高频考点&真题&经验)https://blog.csdn.net/seeker1994/category_12593400.html 【历年案例分析真题考点汇总】与【专栏文章案例分析高频考点目录】(2024年软考高级系统架构设计师冲刺知识点总结-案例分析篇-…

VMD + CEEMDAN 二次分解,CNN-LSTM预测模型

目录 往期精彩内容&#xff1a; 前言 1 二次分解与数据集制作 1.1 导入数据 1.2 VMD分解 1.3 样本熵 1.4 CEEMDAN分解 1.5 数据集制作 2 基于Pytorch的 CNN-LSTM 预测模型 2.1 定义CNN-LSTM预测模型 2.2 设置参数&#xff0c;训练模型 3 模型评估与可视化 3.1 结果…

北京市行政村边界shp数据/北京市乡镇边界/北京市土地利用分类数据

北京是一座有着三千多年历史的古都&#xff0c;在不同的朝代有着不同的称谓&#xff0c;大致算起来有二十多个别称。北京地势西北高、东南低。西部、北部和东北部三面环山&#xff0c;东南部是一片缓缓向渤海倾斜的平原。境内流经的主要河流有&#xff1a;永定河、潮白河、北运…