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

embedded/2024/9/22 15:30:19/

前言

通常使用简便快捷的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/embedded/102323.html

相关文章

AI模型:追求全能还是专精?——从“草莓”模型看未来趋势

AI模型:追求全能还是专精? 随着人工智能技术的发展,人们对于AI模型的期待也越来越高。近日,OpenAI宣布将在秋季推出名为“草莓”的新AI模型,这款模型不仅能够解决复杂的数学问题,还能应对更为抽象和主观的…

docker部署clickhouse

1. 创建相关配置目录 mkdir -P /data/clickhouse/data mkdir -P /data/clickhouse/conf mkdir -P /data/clickhouse/log 2. 拉取镜像 # 下载最新版本clickhouse docker pull clickhouse/clickhouse-server # 下载指定版本clickhouse docker pull clickhouse/clickhouse…

下载的word中的mathtype公式双击无法打开编辑器

原因分析: 该word中的此公式不是通过word内置的mathtype插入公式的,而是从mathtype编辑器中复制粘贴到word中的。 后者的方式当被其他人下载接收后,无法修改此公式,而且该公式也不能被其他人复制,会报错如下&#xff…

FreeRTOS 学习笔记>队列

FreeRTOS 中的队列是任务之间进行通信的一种重要机制。通过队列,任务可以发送和接收数据,从而实现同步和数据共享。 队列又称消息队列,是一种常用于任务间通信的数据结构,队列可以在任务与任务间、中断和任务间传递信息&#xff…

SpringCloud之一注册中心(Eureka)

一、Eureka概述 Eureka是Netflix公司开源的一个服务注册与发现的中间组件。 在微服务架构系统之中,我们经常提三个角色:注册中心 (Register)、服务提供者(Provider)、服务消费者(Consumer)。 1.注册中心:服务提供者可以将服务发布到注册中心…

C语言02 每日一练01

C语言02 每日一练01 习题一 对三个数进行从大到小的排序。习题二 计算1到100的和(两种方法)。习题三 判断100到200中的素数及其个数。 习题一 对三个数进行从大到小的排序。 对三个数进行从大到小的排序。 解题代码&#xff1a; #include <stdio.h>int main() {int a,…

JS中DOM详解【十大点】

JavaScript DOM 详解 JavaScript 中的 DOM&#xff08;文档对象模型&#xff09;是前端开发的重要知识点。它通过对象结构来表示 HTML 或 XML 文档&#xff0c;并提供对其内容进行操作的接口。本文将详细介绍 DOM 的基础知识、常用操作和事件处理等内容&#xff0c;确保全面且…

【Leetcode 2006 】 差的绝对值为 K 的数对数目 —— 哈希表

给你一个整数数组 nums 和一个整数 k &#xff0c;请你返回数对 (i, j) 的数目&#xff0c;满足 i < j 且 |nums[i] - nums[j]| k 。 |x| 的值定义为&#xff1a; 如果 x > 0 &#xff0c;那么值为 x 。如果 x < 0 &#xff0c;那么值为 -x 。 示例 1&#xff1a;…