【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分析即为基于起点到终点的分析。 网络节点关系分析我们经常…

LeetCode每日一题 搜索插入位置(二分查找)

题目描述 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。请必须使用时间复杂度为 O(log n) 的算法。 示例 1: 输入: nums [1,3,5,6], target 5 输…

基于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…

后缀表达式的计算

用栈实现: 1、初始化一个栈,用于保存操作数 2、从左往右扫描下一个元素,直到处理完所有元素。 若扫描到操作数。压入栈。若扫描到运算符。弹出两个栈顶元素,执行相应运算,运算结果压回栈顶。

【Golang星辰图】Go语言云计算SDK全攻略:深入Go云存储SDK实践

Go语言云计算和存储SDK全面指南 前言 在当今数字化时代,云计算和存储服务扮演着至关重要的角色,为应用程序提供高效、可靠的基础设施支持。本文将介绍几种流行的Go语言SDK,帮助开发者与AWS、Google Cloud、Azure、MinIO、 阿里云和腾讯云等…

tomcat的安全配置:

tomcat的安全配置: 1、当Tomcat完成安装后你首先要做的事情如下: 复制 首次安装完成后立即删除webapps下面的所有代码 rm -rf /srv/apache-tomcat/webapps/* 注释或删除 tomcat-users.xml 所有用户权限,看上去如下: cat conf/…

【漏洞复现】网康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…

select for update

在Oracle数据库中,SELECT ... FOR UPDATE 是一种用于锁定查询结果中特定行的方法,它允许你在事务处理过程中确保这些行不会被其他会话修改或者删除,直到当前事务结束(无论是通过提交COMMIT还是回滚ROLLBACK)。其基本原…

《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…

工作汇报的10条方法论

​ 写工作汇报,是职场中的必备能力和升迁本领!任何管理层都会经历写作和汇报,如何精准写到位?在此,我介绍10条方法,帮助大家领悟其思想精髓!一般来说,写作从茫然到胸有成竹&#xff…

机器学习模型—支持向量机 (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 大家好,我是童欧巴。欢迎来到前端食堂技术周刊,我们先来看…

【分解质因数】第十二届蓝桥杯省赛第二场C++ A组/B组《完全平方数》(C++)

【题目描述】 一个整数 a 是一个完全平方数,是指它是某一个整数的平方,即存在一个整数 b,使得 ab的平方。 给定一个正整数 n,请找到最小的正整数 x,使得它们的乘积是一个完全平方数。 【输入格式】 输入一行包含一…

“antd“: Unknown word.cSpell

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