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

前言

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

在这里插入图片描述

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

在这里插入图片描述

实现

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

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)
}

封装为函数

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

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

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

相关文章

redis集群部署

因为Redis是c开发的,因此安装redis需要c语言的编译环境,即先需要安装gcc. 1.解压包 [rootredis01 Redis]# tar -zvxf redis-3.2.9.tar.gz 查看是否存在Makefile文件,存在则直接make编译redis源码 2.编译文件 [rootredis01 redis-3.2.9]# make 安装编译好的文件 [rootredi…

上传拍摄素材和后期剪辑素材太慢?镭速助力企业加速大文件传输

随着时光的流逝,当代人对视觉体验的要求越来越高,每一帧画面都追求极致的清晰度与细腻感。这无疑为影视制作带来了机遇,同时也带来了挑战。高清4K、8K视频等大文件的传输需求日益增长,传统的FTP、HTTP等数据传输方式已难以满足行业…

华硕天选Air:开学季的性价比之巅

正值开学季,华硕天选Air全能本以8999元的首发价回归,为学生和需求高性能笔记本的用户带来了超值的选择。 这款笔记本以其轻薄设计和强悍性能,成为市场上的热点。 轻薄设计,潮流先锋 华硕天选Air 2024采用了全新模具设计&#xf…

零基础学习Python(七)

1. 字符串常用方法 lower()、upper():转换为小写字符串、大写字符串 split(str):按照指定字符串str进行分割,结果为列表: email "123qq.com" print(email.split("")) [123, qq.com] count(str)&#xf…

python12 中,No module named‘distutils‘错误

python12跑redis的时候,突然发现报错“ No module nameddistutils ” distutils在python标准库从2012年就开始断更了,python12中已经移除该库,可以安装以下库进行解决。 pip install setuptools --upgrade “setuptools”是一个处理Python软…

OceanBase 功能解析之 Binlog Service

前言 MySQL,是在全球广泛应用的开源关系型数据库,除了其稳定性、可靠性和易用性,他早期推出的二进制日志功能,即binlog,也是MySQL广受欢迎的原因。 MySQL binlog,即二进制日志,是 MySQL 中用于…

爆品是测出来的,不是选出来的

我在亚马逊摸爬滚打了五年,深深感受到了"七分选品,三分运营"的重要性。不管你的产品图片、描述多么精美,如果不去精选和测试,很难保证能出单。我见过很多跨境新手在选品上卡了几个月,纠结于卖什么。但实际上…

光敏电阻传感器详解(STM32)

目录 一、介绍 二、传感器原理 1.光敏电阻传感器介绍 2.原理图 三、程序设计 main.c文件 ldr.h文件 ldr.c文件 四、实验效果 五、资料获取 项目分享 一、介绍 光敏电阻器是利用半导体的光电导效应制成的一种电阻值随入射光的强弱而改变的电阻器,又称为光…

上新!Matlab实现基于QRGRU-Attention分位数回归门控循环单元注意力机制的时间序列区间预测模型

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现基于QRGRU-Attention分位数回归门控循环单元注意力机制的时间序列区间预测模型; 2.多图输出、多指标输出(MAE、RMSE、MSE、R2),多输入单输出,含不同置信区间图、概率…

[000-01-015].第03节:SpringBoot中数据源的自动配置

我的后端学习大纲 SpringBoot学习大纲 1.数据访问流程: 2.搭建数据库开发场景: 2.1.导入JDBC场景: 2.2.分析自动导入的内容: 2.3.分析为何没有导入数据库驱动: 1.因为人家也不知道我要用啥数据库,所以在自…

衡石科技BI的API如何授权文档解析

授权说明​ 授权模式​ 使用凭证式(client credentials)授权模式。 授权模式流程说明​ 第一步,A 应用在命令行向 B 发出请求。 第二步,B 网站验证通过以后,直接返回令牌。 授权模式结构说明​ 接口说明​ 获取a…

如何禁止电脑访问网站

一、修改Hosts文件 找到Hosts文件:在Windows系统中,Hosts文件通常位于C:\Windows\System32\drivers\etc\目录下。 编辑Hosts文件:以管理员身份打开记事本或任意文本编辑器,然后找到并打开Hosts文件。 添加禁止访问的域名&#…

SSRF漏洞(二)

本文仅作为学习参考使用,本文作者对任何使用本文进行渗透攻击破坏不负任何责任。 前言: 本文主要讲解依靠phpstudy搭建pikachu靶场。 phpstudy下载使用以及搭建本地SQL labs靶场 SSRF漏洞(一) 靶场搭建。 靶场链接&#xff1…

Linux:NAT等相关问题

目录 1:NAT背景 2:NAT IP转换过程 3:NATP 4:正向代理 5:反向代理 6:NAT和代理服务器 应用场景 实现方法 1:NAT背景 IPv4地址耗尽:随着互联网的迅速发展,连接到…

LMDeploy 量化部署实践

一、环境配置见:https://github.com/InternLM/Tutorial/blob/camp3/docs/L2/LMDeploy/readme.md 验证LMDeploy启动InternLM2_5-7b-chat conda activate lmdeploy lmdeploy chat /root/models/internlm2_5-7b-chat二、量化显存计算 参数计算: LMDeploy …

盘点15款工程软件,为制造业选型提供参考!

本文将盘点15款工程软件,供企业选型参考。 工程软件就如同工程领域的得力助手,能让工程建设的各个环节都变得更加高效、精准。 对于工程企业来说,如果没有合适的工程软件,就像工匠没有趁手的工具,难以打造出精良的作品…

linux查看系统安装时间命令,找出Linux操作系统(OS)安装日期和时间

你可能想知道你的计算机上何时安装了Linux操作系统,即OS的安装日期和时间,使用tune2fs、dumpe2fs、ls、basesystem、setup、setuptool命令能出来结果。请注意,如果你从模板安装了操作系统,那么它将显示模板生成日期,而不是实际操作系统安装日期。 方法1:如何使用tune2fs…

LayerNorm介绍

简介 Layer Normalization (LayerNorm) 是一种归一化技术,常用于深度学习模型中,特别是在 Transformer 模型中。 Layer normalization 是在特征维度上进行标准化的,而不是在数据批次维度上。 目的 收敛模型数据数值差异,缓解内…

GD32F4xx---RTC初始化设置及闹钟方式实现秒中断讲解

GD32F4xx—RTC初始化设置及闹钟方式实现秒中断讲解 1、下载链接:源码工程 一、概述 GD32F4x的RTC例程网上资源较少,详细阅读用户手册后做出如下配置。RTC模块提供了一个包含日期(年/月/日)和时间(时/分/秒/亚秒)的日历功能。除亚秒用二进制码显示外,时间和日期都以BC…

『功能项目』新输入系统【06】

我们打开上一篇04禁止射线穿透行为项目, 本章要做的事情是在Unity编辑器中添加 新输入系统 实现主角在场景中鼠标右键可以使主角 转向。 本次项目需要让Unity引擎重新启动所以先保存当前项目 再次打开项目后, 修改为Both 点击Apply前注意要先保存项目&a…