【JS】使用MessageChannel实现深度克隆

devtools/2024/12/22 1:52:33/

前言

通常使用简便快捷的JSON 序列化与反序列化实现深克隆,也可以递归实现或者直接使用lodash。

在这里插入图片描述

JSON 序列化与反序列化 无法处理如下的循环引用:

在这里插入图片描述

实现

MessageChannel 内部使用了浏览器内置的结构化克隆算法,该算法可以在不同的浏览器上下文之间传递数据。它能够在传递数据时自动处理对象的深度克隆,包括处理嵌套对象、数组、Map、Set、Date 对象等,同时还可以解决循环引用的问题。

javascript">const obj = { a: 1, b: 2 }
obj.c = obj
const { port1, port2 } = new MessageChannel()
port1.postMessage(obj)
port2.onmessage = (msg) => {const obj2 = msg.dataconsole.log(obj2, obj2 === obj)
}

封装为函数

javascript">function deepClone(obj) {return new Promise((resolve) => {const { port1, port2 } = new MessageChannel()port1.postMessage(obj)port2.onmessage = (msg) => {resolve(msg.data)}})
}

http://www.ppmy.cn/devtools/102357.html

相关文章

c#入门篇5

目录 一、常量 二、枚举 1、枚举类型和int以及string类型之间的转换 2、注意事项 强制转换(Explicit Casting): Enum.Parse 和 Enum.TryParse: 三、结构 定义方式:结构体使用 struct 关键字进行定义。结构体通常用…

科技在教育领域的创新应用与在工作场所的智能化转型

随着信息技术的迅猛发展,‌科技正以前所未有的速度改变着我们的生活、‌学习和工作方式。‌其中,‌教育领域和工作场所作为社会的重要组成部分,‌也迎来了深刻的变革。‌ 在教育领域,‌科技的创新应用为传统教学模式带来了颠覆性…

命令模式与宏命令:批量操作的高效实现

目录 引言 背景与重要性命令模式与宏命令概述 命令模式的基础概念 命令模式的定义与结构关键组件及其角色命令模式的优点与缺点 命令模式的应用场景 用户操作记录与撤销/重做请求队列与任务调度GUI操作的解耦 宏命令的引入与发展 宏命令的定义与结构宏命令与命令模式的关系宏…

5.2二叉树——堆

本篇博客梳理一个重要的数据结构——堆 注意:若无特殊说明,默认是小堆进行分析 一、堆的概念与分类 1.堆是完全二叉树 2.大堆:父亲≥孩子;小堆:父亲≤孩子 注意:兄弟之间无法确定…

视频中间件:大华视频设备接入管理应用

前言 上篇博文介绍了视频中间件:海康视频设备的接入管理?,今天给大家带来大华视频设备的接入管理,视频中间件平台支持大华Sdk、大华主动注册、Onvif、Rtsp、Gb28181等方式对大华视频设备的接入管理。同时视频中间件可支持协议互转…

力扣面试150 插入区间 模拟

Problem: 57. 插入区间 &#x1f468;‍&#x1f3eb; 代码随想录 模拟 ⏰ 时间复杂度&#xff1a; O ( n ) O(n) O(n) class Solution {public int[][] insert(int[][] intervals, int[] newInterval) {int idx 0;List<int[]> res new ArrayList<>();while (…

Hadoop联邦模式搭建

在Hadoop架构中提供了三类搭建方式&#xff0c;第一类是给测试或开发人员使用的伪分布式或单NN节点搭建方式&#xff0c;第二类是用来商用化并解决NN单点故障的HA搭建方式&#xff0c;第三类就是这里要说的联邦模式&#xff0c;它本身也是一种供给商用的模式&#xff0c;但是它…

MySql 忘记 Root 密码

停止 mysql 服务 linux 安装时&#xff0c;使用 $> mysqld_safe --usermysql & 启动&#xff0c;所以关闭时&#xff0c;直接 ps 查询进程&#xff0c;并关闭该进程即可 使用如下命令查询进程号&#xff0c;把 mysql 对应的进程都关闭即可 $> ps -ef | grep mysql …