javascript中的structuredClone()克隆方法

前言:

        structuredClone 是 JavaScript 的方法之一,用于深拷贝一个对象。它的语法是 structuredClone(obj),其中 obj 是要拷贝的对象。structuredClone 方法将会创建一个与原始对象完全相同但是独立的副本。

案例:

        当使用Web Workers进行多线程编程时,structuredClone 方法可以用于将数据从主线程传递到工作线程,并在工作线程中创建一个完全独立的副本。以下是一个使用 structuredClone 方法的示例:

// 在主线程中
const myObject = {name: 'John',age: 30
};const worker = new Worker('worker.js');
worker.postMessage({ data: structuredClone(myObject) });// 在工作线程中的 worker.js 文件中
self.addEventListener('message', (event) => {const clonedObject = structuredClone(event.data.data);// 在工作线程中使用被复制的对象
})

在主线程中,我们创建一个包含名称和年龄属性的 myObject 对象。然后,通过 postMessage 方法将 myObject 对象传递给工作线程。在工作线程中,我们使用 addEventListener 监听 message 事件,当接收到消息时,使用 structuredClone 方法创建一个 clonedObject 对象来对被传递的对象进行深拷贝。

通过使用 structuredClone 方法,我们确保在工作线程中获得的 clonedObject 对象与在主线程中的 myObject 对象完全独立,以避免并发访问和意外修改问题。

优点:

  1. 完全复制对象:structuredClone 方法能够创建一个原始对象的完全副本,包括对象的原型链、方法等所有属性和方法。
  2. 简便易用:使用 structuredClone 方法非常简单,只需将需要拷贝的对象作为参数传入即可。

缺点:

  1. 只适用于特定环境:structuredClone 方法目前只在 Web Worker 中以及在某些特定环境下受支持,如 Chrome、Firefox 等。不是所有浏览器和 JavaScript 运行时都支持该方法。
  2. 不支持拷贝函数、正则表达式等:structuredClone 方法无法复制函数、正则表达式等特殊类型的对象。只有具有结构化数据的对象才能被成功复制。
  3. 不支持循环引用:structuredClone 方法无法处理包含循环引用的对象,否则会抛出异常。因此,在拷贝对象时需要注意确保没有循环引用的存在。

对比_.cloneDeep() 和 Json.parse(JSON.stringify()):

为什么不使用Json.parse(JSON.stringify())?

原因:因为Json.parse(JSON.stringify())能做到的structuredClone 也能做到,最关键的是当使用Json.parse(JSON.stringify())克隆Date 时间后的数据格式会变化,而不是原来的数据。
 

const calendarEvent = {title: "Builder.io Conf",date: new Date(123),attendees: ["Steve"]
}// 🚩 JSON.stringify 获取到的date数据是字符串格式
const problematicCopy = JSON.parse(JSON.stringify(calendarEvent))

打印出来的结果如下:

{title: "Builder.io Conf",date: "1970-01-01T00:00:00.123Z"attendees: ["Steve"]
}

如果使用structuredClone 就不会出现该问题。

为什么不使用_.cloneDeep() ?

如果只是想用这一个克隆的方法而引用lodash和cloneDeep那么就占用太多资源了。

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

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

相关文章

阿里巴巴按关键字搜索商品 API 返回值说明

item_search-按关键字搜索商品API测试工具 alibaba.item_search 公共参数 名称类型必须描述keyString是调用key(必须以GET方式拼接在URL中)secretString是调用密钥api_nameString是API接口名称(包括在请求地址中)[item_search,…

Shadertoy内置函数系列 - mod 取模运算

mod函数返回x % 3的结果 先看一个挑战问题题目: Create a pattern of alternating black and red columns, with 9 columns of each color. Then, hide every third column that is colored red.The shader should avoid using branching or conditional statemen…

2024年最新阿里云和腾讯云云服务器价格租用对比

2024年阿里云服务器和腾讯云服务器价格战已经打响,阿里云服务器优惠61元一年起,腾讯云服务器61元一年,2核2G3M、2核4G、4核8G、4核16G、8核16G、16核32G、16核64G等配置价格对比,阿腾云atengyun.com整理阿里云和腾讯云服务器详细配…

C语言分支和循环总结

文章目录 概要结构介绍不同结构的语句简单运用小结 概要 C语言中分为三种结构:顺序结构,选择结构,循环结构 结构介绍 顺序结构就是从上到下,从左到右等等;选择结构可以想象是Y字路口就是到了一个地方会有不同的道路…

Redis事务为什么不支持原子性

Redis事务提供了一种将多个命令打包,然后按顺序执行的机制。使用MULTI命令开始事务,接着输入需要队列化的命令,最后使用EXEC命令提交整个事务。尽管Redis事务可以保证一系列命令被连续执行,没有其他客户端命令插入其中执行&#x…

每日OJ题_路径dp②_力扣63. 不同路径 II

目录 力扣63. 不同路径 II 解析代码 力扣63. 不同路径 II 63. 不同路径 II 难度 中等 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为 “Start” )。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角(…

多媒体技术2-颜色空间

颜色空间是一种用于表示和描述颜色的数学模型。它是由颜色分量和坐标系组成的。常见的颜色空间有RGB、CMYK、HSV等。 RGB颜色空间:RGB是红、绿、蓝三个颜色分量的缩写。在RGB颜色空间中,每个颜色分量的取值范围是0到255,表示了红、绿、蓝三个…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Select)

提供下拉选择菜单&#xff0c;可以让用户在多个选项之间选择。 说明&#xff1a; 该组件从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口 Select(options: Array<SelectOption>) 参数&#xff1a;…

golang中fallthrough简介及用法

什么是fallthrough&#xff1f; fallthrough是golang中的一个关键字&#xff0c;它用于在switch语句中控制代码的执行流程。通常情况下&#xff0c;当一个case分支匹配成功后&#xff0c;switch语句就会结束&#xff0c;不会继续执行后面的case分支。但是&#xff0c;如果在一…

git撤回代码提交commit或者修改commit提交注释

执行commit后&#xff0c;还没执行push时&#xff0c;想要撤销之前的提交commit 撤销提交 使用命令&#xff1a; git reset --soft HEAD^命令详解&#xff1a; HEAD^ 表示上一个版本&#xff0c;即上一次的commit&#xff0c;也可以写成HEAD~1 如果进行两次的commit&#xf…

爬虫(六)

复习回顾: 01.浏览器一个网页的加载全过程1. 服务器端渲染html的内容和数据在服务器进行融合.在浏览器端看到的页面源代码中. 有你需要的数据2. 客户端(浏览器)渲染html的内容和数据进行融合是发生在你的浏览器上的.这个过程一般通过脚本来完成(javascript)我们通过浏览器可以…

算法打卡day15|二叉树篇04|110.平衡二叉树、257. 二叉树的所有路径、404.左叶子之和

算法题 Leetcode 110.平衡二叉树 题目链接:110.平衡二叉树 大佬视频讲解&#xff1a;平衡二叉树视频讲解 个人思路 可以用递归法&#xff0c;计算左右子树的高度差&#xff0c;当超过1时就不为平衡二叉树了&#xff1b; 解法 回顾一下二叉树节点的深度与高度&#xff1b; …

Python学习:基础语法

版本查看 python --version编码 默认情况下&#xff0c;Python 3 源码文件以 UTF-8 编码&#xff0c;所有字符串都是 unicode 字符串。 特殊情况下&#xff0c;也可以为源码文件指定不同的编码&#xff1a; # -*- coding: cp-1252 -*-标识符 第一个字符必须是字母表中字母或…

rt-thread组件之audio组件(结合mp3player包使用)

前言 继上一篇RT-Thread组件之Audio框架i2s驱动的编写的编写&#xff0c;应用层使用rt-thread软件包里面的wavplayer组件以及 rt-thread组件之audio组件(结合wavplayer包使用)的文章本篇使用的是 mp3player软件包&#xff0c;与wavplayer设计框架基本上是一样的&#xff0c;只…

C语言真假之争

实验理论依据: \0、NULL、0和0在C语言中表示的意义是不同的&#xff1a; \0&#xff1a;这是一个空字符&#xff0c;ASCII值为0。常用于字符串结束的标志。 NULL&#xff1a;这是一个宏&#xff0c;表示空指针&#xff0c;用于初始化指针变量。 0&#xff1a;这是数字0&#…

LeetCode454 四数相加

给你四个整数数组 nums1、nums2、nums3 和 nums4 &#xff0c;数组长度都是 n &#xff0c;请你计算有多少个元组 (i, j, k, l) 能满足&#xff1a; 0 < i, j, k, l < n nums1[i] nums2[j] nums3[k] nums4[l] 0 示例 1&#xff1a; 输入&#xff1a;nums1 [1,2], nu…

java-单列集合-set系列

set集合继承collection,所以API都差不多&#xff0c;我就不多加介绍 直接见图看他们的特点 我们主要讲述的是set系列里的HashSet、LinkedHashSet、TreeSet HashSet HashSet它的底层是哈希表 哈希表由数组集合红黑树组成 特点&#xff1a;增删改查都性能良好 哈希表具体是…

网络安全攻击数据的多维度可视化分析

简介 本研究项目通过应用多种数据处理与可视化技术&#xff0c;对网络安全攻击事件数据集进行了深度分析。首先&#xff0c;利用Pandas库读取并预处理数据&#xff0c;包括检查缺失值、剔除冗余信息以及将时间戳转化为日期时间格式以利于后续时间序列分析。 研究步骤 数据分析…

控件交互的优劣势--自动窗帘系统

控件交互在图形用户界面&#xff08;GUI&#xff09;设计中具有明显的优劣势。以下是对这些优劣势的详细分析 一&#xff0c;控件交互的优势 (1)直观性&#xff1a;控件交互往往遵循用户习惯和直觉&#xff0c;使得用户无需额外学习即可理解并操作。例如&#xff0c;大多数用户…

git commit --amend

git commit --amend 1. 修改已经输入的commit 1. 修改已经输入的commit 我已经输入了commit fix: 删除无用代码 然后现在表示不准确&#xff0c;然后我通过命令git commit --amend修改commit