【H2O2 | 软件开发】前端深拷贝的实现

目录

前言

开篇语

准备工作

正文

概述

JSON方法

递归

其他

结束语


前言

开篇语

本系列为短篇,每次讲述少量知识点,无需一次性灌输太多的新知识点。该主题文章主要是围绕前端、全栈开发相关面试常见问题撰写的,希望对诸位有所帮助。

如果您需要为面试八股文做准备,笔者建议重点关注加粗强调部分,它们是概念中的关键词。

准备工作

软件:【参考版本】Visual Studio Code

系统版本: Win10/11

正文

概述

概括地来说,前端实现深拷贝的常用方式有JSON方法递归拷贝浏览器原生structuredClone方法lodash库等。

JSON方法

JSON方法是实现深拷贝的最简单直观的方式之一,主要涉及两个方法——JSON.stringify(obj)JSON.parse(jsonString)

JSON.stringify(obj)接收一个JS对象或值,并将其转化为JSON格式的字符串。但在这个过程中,对象中的函数undefinedSymbol等无法被JSON表示的数据或MapSetRegExp等特殊对象将被忽略;在拷贝日期对象时,拷贝之后的值将变为字符串类型;如果对象中存在循环引用,还会抛出错误。

比如,现在有一个对象,使用stringify()方法进行转化并打印结果。

const obj = {a: 1,b: { c: 2 },d: [3, 4],e: new Date(),f: function () { console.log("hello"); },g: undefined,h: Symbol("foo"),
};const str = JSON.stringify(obj);
console.log(str);

解析成JSON字符串并打印,结果如下:

注意,打印的结果整体也是个字符串,所以实质上外层还有一层引号包裹。

JSON.parse(jsonString)将上面的JSON字符串接收并重新解析为JS的对象或值,由于生成的对象是一个全新的对象,与原始对象没有引用关系,所以实现了深拷贝。

const obj1 = JSON.parse(JSON.stringify(obj));
console.log(obj == obj1);

因此,上面的输出结果将为false。

此外,如果对象涉及循环引用,比如在新增的属性中引用了自身,那么上述的拷贝过程将报错。

const obj = { a: 1 };
// 循环引用
obj.b = obj;
// 报错: TypeError: Converting circular structure to JSON
JSON.parse(JSON.stringify(obj));

递归

为了解决JSON方法造成的诸多问题,我们实际上就是需要确保所有的属性以及值都得到了完美地复制。对于值依旧为引用数据类型的,我们应当继续向内层进行复制。 而递归复制则可以很好地实现上述需求。

递归复制有四个要点:

  • 对于对象或数组,递归地遍历其每个属性或元素。
  • 对于基本数据类型直接返回其值。
  • ​针对Date、MAp、Set等特殊对象创建新的实例并复制其内容。
  • ​使用一个Map缓存已经拷贝过的对象,避免循环引用带来的无限递归。

 以下是实现递归调用的完整示例:

function deepCopy(obj, cache = new Map()) {// 处理基本数据类型if (obj === null || typeof obj !== "object") {return obj;}// 处理循环引用if (cache.has(obj)) {return cache.get(obj);}// 处理Date对象if (obj instanceof Date) {return new Date(obj);}// 处理Map对象if (obj instanceof Map) {const copy = new Map();cache.set(obj, copy);obj.forEach((value, key) => {copy.set(deepCopy(key, cache), deepCopy(value, cache));});return copy;}// 处理Set对象if (obj instanceof Set) {const copy = new Set();cache.set(obj, copy);obj.forEach(value => {copy.add(deepCopy(value, cache));});return copy;}// 处理数组或普通对象const copy = Array.isArray(obj) ? [] : {};cache.set(obj, copy);for (let key in obj) {// 判断是否为对象本身具有的属性,而非从原型链上继承的if (obj.hasOwnProperty(key)) {copy[key] = deepCopy(obj[key], cache);}}return copy;
}

其他

1、structuredClone

structuredClone是JavaScript中一个原生支持的深拷贝方法,用于将对象或值进行深拷贝。它比JSON.parse(JSON.stringify(obj))更强大,可以处理更多数据类型,包括循环引用、Date、Map、Set等。

该方法的基本语法如下:

structuredClone(value[, options])

其中value为需要深拷贝的对象或值,options为可选参数,用于配置拷贝行为。

2、_.cloneDeep

lodash是一个流行的 JavaScript 实用工具库,提供了许多方便的函数,其中_.cloneDeep()是用于深拷贝的常用方法。它支持多种数据类型,并且内置缓存机制以处理循环引用、函数、DateMapSet 等复杂场景。 

该方法的基本语法如下:

const _ = require('lodash');
_.cloneDeep(value);

上述两种方法不支持复制DOM节点以及特殊对象WeakMap、WeakSet和Proxy。此外structuredClone不支持复制函数

3、补充

此外,实现深拷贝的方式还有MessageChannel利用Proxy拦截对象等,但这两种方法实现较为复杂,并不实用,这里就不再展开了。

结束语

本期内容到此结束。关于本系列的其他博客,可以查看我的面试题专栏。

本系列的博客主要是记录学习经历,并总结阶段的知识点。全篇的操作过程由笔者完成并核验,在部分定义上有参考其他的内容。希望这对您有所帮助,并真心地祝您早日找到心仪的工作岗位。

==期待与你在下一期博客中再次相遇==

——燃尽的【H2O2】

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

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

相关文章

Docker - 切换源 (Linux / macOS)

文章目录 Linux 系统macOS 系统 Linux 系统 修改配置文件:/etc/docker/daemon.json "registry-mirrors": ["https://docker.mirrors.ustc.edu.cn","https://hub-mirror.c.163.com"]验证是否修改成功: docker info重启 …

hcia复习

一、网络设备 1、交换机:(1)提供MAC地址表,转发数据; (2)每个接口是一个独立的冲突域; (3)凡是连在交换机上的所有设备都处于同一广播域(网络&am…

opencv初步学习——图像处理3

这一部分我们将学习opencv中对图像大小进行调整的基本操作,以及掩模操作,我们直接进入正言 一、cv2.resize( )函数 1-1、组成与构造 该函数的作用就算用来帮助我们实现对图像大小的处理,具体的组成与构造如下: cv2.resize(src , …

[LevelDB]关于LevelDB存储架构到底怎么设计的?

本文内容组织形式 LevelDB 存储架构重要特点总体概括LevelDB中内存模型MemTableMemTable的数据结构背景:SkipListSkiplist的数据结构 Skiplist的数据访问细节 SkipList的核心方法Node细节源代码 MemTable的数据加速方式Iterator 的核心方法 MemTable 的读取&写入…

【存储中间件】Redis核心技术与实战(四):Redis高并发高可用(Redis集群 Smart客户端、集群原理)

文章目录 Redis集群Smart客户端smart客户端原理ASK 重定向集群下的Jedis客户端Hash tags 集群原理节点通信通信流程Gossip 消息节点选择 故障转移故障发现主观下线客观下线 故障恢复资格检查准备选举时间发起选举选举投票替换主节点 故障转移时间 集群不可用判定集群读写分离 个…

【接口耗时】⭐️自定义拦截器实现接口耗时统计

💥💥✈️✈️欢迎阅读本文章❤️❤️💥💥 🏆本篇文章阅读大约耗时三分钟。 ⛳️motto:不积跬步、无以千里 📋📋📋本文目录如下:🎁🎁&a…

杨校老师课堂之编程入门与软件安装【图文笔记】

亲爱的同学们,热烈欢迎踏入青少年编程的奇妙世界! 我是你们的授课老师杨校 ,期待与大家一同开启编程之旅。 1. 轻松叩开编程之门 1.1 程序的定义及生活中的应用 程序是人与计算机沟通的工具。在日常生活中,像手机里的各类 APP、电…

【从零开始】Air780EPM的LuatOS二次开发——OneWire协议调试注意事项!

当涉及到与传感器、执行器等外部设备交互时,OneWire协议的高效调试成为决定项目成败的关键环节。OneWire协议(单总线协议)以其仅需一根数据线即可实现设备通信的极简特性,被广泛应用于温度传感器、身份识别模块等场景。 一、LuatO…

redis数据结构、多路复用、持久化---java

数据结构 Redis 提供了丰富的数据类型,常见的有五种数据类型:String(字符串),Hash(哈希),List(列表),Set(集合)、Zset&am…

vue3之写一个aichat ----vite.config.js

vite.config.js的CSS配置 postcss-pxtorem 开发响应式网页的时候需要用到postcss-pxtorem amfe-flexible amfe-flexible是由阿里团队开发的一个库,它可以根据设备的屏幕宽度去动态调整HTML根元素()的字体大小,这意味着无论用户使用什么尺寸的设备访问你…

强化学习(赵世钰版)-学习笔记(8.值函数方法)

本章是算法与方法的第四章,是TD算法的拓展,本质上是将状态值与行为值的表征方式,从离散的表格形式,拓展到了连续的函数形式。 表格形式的优点是直观,便于分析,缺点是数据量较大或者连续性状态或者行为空间时…

C++模版(进阶)

文章目录 一、非类型模版参数二、模版的特化2.1 概念2.2 函数模版特化2.2.1 函数模版特化为指针类型注意事项 2.3 类模版特化2.3.1 全特化2.3.2 偏特化(半特化)2.3.3 类模板特化应用示例 三、模版分离编译3.1 什么是分离编译?3.2 模版的分离编译3.3 解决方法! 四、模…

Linux配置yum仓库,服务控制,防火墙

一、yum仓库 1.在安装软件时,首先第一步就是要考虑软件的版本的问题! 2.软件的安装:最安全可靠的方法就是去软件对应的官网上查看安装手册(包括的软件的下载) 红帽系软件安装的常见的3种方式 (1&#x…

布谷直播系统源码开发实战:从架构设计到性能优化

作为山东布谷科技的一名技术研发人员,我参与了多个直播系统平台从0到1的开发和搭建,也见证了直播行业从萌芽到爆发的全过程。今天,我想从研发角度,分享一些直播系统软件开发的经验和心得,希望能对大家有所帮助。 一、 …

实战设计模式之解释器模式

概述 作为一种行为设计模式,解释器模式提供了一种方法来定义语言的文法规则,并通过这些规则解析和处理特定类型的语言句子。简单来说,解释器模式允许我们定义一个代表某种语言中语法规则的对象结构,从而能够根据这些规则理解并处理…

物联网边缘计算网关是什么?

在物联网的浩瀚架构中,边缘计算网关宛如一位坚毅的前沿哨兵,默默守护着数据处理与传输的关键防线,为整个物联网系统的高效运转发挥着不可或缺的作用。 一、边缘计算网关的定义与基本功能 边缘计算网关是一种智能设备,它被部署在…

计算机视觉算法实战——障碍物识别(主页有源码)

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ ​​ ​​​​​​ ​ ​ 1. 引言 计算机视觉是人工智能领域的一个重要分支,旨在通过计算机模拟人类的视觉系统,从…

Win11锁屏后显示“天气、市场、广告”如何取消显示

关闭方法:设置>个性化>锁屏界面>锁屏界面状态>"无"。 方法一:通过“个性化”设置 打开“设置”应用: 点击屏幕左下角的“开始”按钮(Windows 图标)。点击齿轮状的“设置”图标。或者按下 Win I…

10天速通强化学习-008

TRPO 思考-TRPO-在线策略-给定信任区域防止更新不稳定 Actor-Critic网络随着网络深度的增加,步长太长,梯度更新会变差。改变方法-增加信任区域。(trust region policy optimization)-TRPO算法: 核心思想: 是在每次迭代中&…

整合百款经典街机游戏的模拟器介绍

对于80、90后而言,街机游戏承载着童年的欢乐记忆。今天要给大家介绍一款超棒的软件——「MXui街机厅经典游戏101款」,它能带你重回那段热血沸腾的街机时光。 「MXui街机厅经典游戏101款」是一款绿色免安装的街机模拟器,体积约1.39G。无需繁琐…