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,一经查实,立即删除!

相关文章

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整理阿里云和腾讯云服务器详细配…

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

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

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

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

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

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

算法打卡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;只…

java-单列集合-set系列

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

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

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

git commit --amend

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

Python 导入Excel三维坐标数据 生成三维曲面地形图(面) 2、线条平滑曲面但有间隔

环境和包: 环境 python:python-3.12.0-amd64包: matplotlib 3.8.2 pandas 2.1.4 openpyxl 3.1.2 scipy 1.12.0 代码: import pandas as pd import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D from scipy.interpolate import griddata imp…

【李沐论文精读】GPT、GPT-2和GPT-3论文精读

论文&#xff1a; GPT&#xff1a;Improving Language Understanding by Generative Pre-Training GTP-2&#xff1a;Language Models are Unsupervised Multitask Learners GPT-3&#xff1a;Language Models are Few-Shot Learners 参考&#xff1a;GPT、GPT-2、GPT-3论文精读…

java基础2-常用API

常用API Math类 帮助我们进行数学计算的工具类。 里面的方法都是静态的。 3.常见方法如下&#xff1a; abs:获取绝对值 absExact:获取绝对值 ceil:向上取整 floor:向下取整 round:四舍五入 max:获取最大值 …

Stable Diffusion 模型:从噪声中生成逼真图像

你好&#xff0c;我是郭震 简介 Stable Diffusion 模型是一种生成式模型&#xff0c;可以从噪声中生成逼真的图像。它由 Google AI 研究人员于 2022 年提出&#xff0c;并迅速成为图像生成领域的热门模型。 数学基础 Stable Diffusion模型基于一种称为扩散概率模型(Diffusion P…

并查集算法

文章目录 并查集并查集引入1.初始化2.查询3.合并路径压缩代码模板(1)朴素并查集&#xff1a;(2)维护size的并查集&#xff1a;(3)维护到祖宗节点距离的并查集&#xff1a; 并查集 并查集引入 并查集&#xff08;Union-find Sets&#xff09;是一种非常精巧而实用的数据结构&a…

设计模式 -- 1:简单工厂模式

目录 代码记录代码部分 代码记录 设计模式的代码注意要运用到面向对象的思想 考虑到紧耦合和松耦合 把具体的操作类分开 不让其互相影响&#xff08;注意这点&#xff09; 下面是UML类图 代码部分 #include <iostream> #include <memory> // 引入智能指针的头文…

Redis底层核心对象RedisObject源码分析

文章目录 1. redis底层数据结构2. 插入KV底层源码流程分析 1. redis底层数据结构 redis 6数据结构和底层数据结构的关系 String类型本质是SDS动态字符串&#xff0c;即redis层面的数据结构底层会有对应的数据结构实现&#xff0c;上面是redis 6之前的实现 redis 7数据结构和底…

[MYSQL数据库]--表的增删查改和字段类型

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 目录 一、表的增…

高数立体几何笔记

上个学期立体几何章节的一点笔记&#xff0c;很潦草&#xff0c;但重点内容基本都有复习到 Page1&#xff1a;介绍了向量的模、夹角、单位向量、投影投影向量、方向角、点乘、叉乘、混合积的基本运算和性质Page2: 回顾了高中所学的平面直线的多种表示方法以及距离的计算方法&…