首页 > 其他分享 >【JS】使用MessageChannel实现深度克隆

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

时间:2024-08-30 17:50:28浏览次数:9  
标签:obj 克隆 MessageChannel JS const 序列化 port2 port1

前言

通常使用简便快捷的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.data
  console.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)
    }
  })
}

标签:obj,克隆,MessageChannel,JS,const,序列化,port2,port1
From: https://blog.csdn.net/owo_ovo/article/details/141599677

相关文章

  • nodejs实现将json转化为excel文件
    本文使用node.js实现将json数据转换导出为excel文件。一、安装json2xls库npmijson2xls二、封装转换方法新增jsonToExcel.js文件,该文件用于将json数据(对象数组)转换为excel文件,文件内容如下:constfs=require('fs')//引入文件系统模块constjson2xls=require('json2......
  • 推荐一款神奇的3D倾斜库——vanilla-tilt.js
    3D倾斜库—vanilla-tilt.js话不多说,直接上代码vanilla-tilt.js官网地址<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale......
  • webView中,无法利用JS监听APP原生返回后事件
    描述:用uniapp开发的APP,内容页用webView内嵌的h5做的;现在有个需求,在A页面点击新增,uni.navigateTo打开B页面,然后在B页面新增修改完数据之后,uni.navigateBack返回A页面;需要在A页面监听;当页面回到A的时候刷新数据;问题:在A页面用js无法监听到页面返回了;尝试监听方案:1、只能监听页面......
  • SolidJS-多文件间传递同一个信号量
    SolidJS-多文件间传递同一个信号量现在我在controlPanel.tsx中返回了一个控制面板(HTML代码),可以控制node、link、step1和step2的值。在matrixWave.tsx中我根据node、link、step1和step2的值进行数据的过滤,然后生成对应的matrixWave的SVG图。因此,我希望在web中对node、link、step1......
  • js逆向之常用算法
     [Python]encode&decodefromurllibimportparse#url进行编码与解码url='你好啊'url_encode=parse.quote(url)print('url编码后:',url_encode)url_decode=parse.unquote(url_encode)print('url解码后:',url_decode)url_encode......
  • CSS、JS之动态展开式菜单
    效果演示实现了一个可展开菜单按钮的效果,点击按钮会弹出一个菜单列表,菜单列表中包含多个选项。按钮的样式为一个圆形背景,中间有三条横线,表示可以展开。当按钮被点击后,三条横线会变成一个叉号,表示可以收起。菜单列表的样式为一个白色背景,四周有阴影,包含多个选项,每个选项都有......
  • CSS、JS之密码灯登录表单
    效果演示实现了一个登录页面,包括一个标题、两个输入框(用户名和密码)、一个登录按钮和一个眼睛图标。点击眼睛图标可以显示或隐藏密码。页面背景有两个圆形的半透明元素,整个页面使用了flex布局,并且在水平和垂直方向上都居中对齐。登录框使用了阴影效果和圆角边框,并且在水平和......
  • CSS、JS之滚动导航栏
    效果演示实现了一个滚动导航栏,包括一个固定在页面顶部的导航栏和四个全屏高度的区块。导航栏的背景颜色为半透明黑色,高度为60px,导航链接为白色,字体大小为30px,链接之间有15px的间距。当鼠标悬停在链接上时,下划线会出现。四个区块的背景颜色分别为#95e1d3、#eaffd0、#fce38a......
  • 基于surging 如何利用peerjs进行语音视频通话
    一、概述PeerJS是一个基于浏览器WebRTC功能实现的js功能包,简化了WebrRTC的开发过程,对底层的细节做了封装,直接调用API即可,再配合surging协议组件化从而做到稳定,高效可扩展的微服务,再利用RtmpToWebrtc引擎组件可以做到不仅可以利用httpflv观看rtmp推流直播,还可以采用基于W......
  • uniapp js 划消小游戏 1.0 去控制台看打印(仅作参考)
    <template> <viewclass="wrap">  划消:{{sdNum}}*{{sdNum}}  <viewclass="btn"style="padding:32rpx;background:pink"@click="clickBtn">点击划消按钮</view>  <viewclass="btn&q......