广告位联系
返回顶部
分享到

JavaScript深拷贝方法structuredClone使用介绍

JavaScript 来源:互联网 作者:佚名 发布时间:2023-11-09 22:39:39 人浏览
摘要

对于深拷贝,最容易也应该是常见的方法是使用JSON.parse() + JSON.stringify(),还有一个借助第三方脚本库 lodash ,其中方法cloneDeep可以实现深拷贝。现在可以使用原生的structuredClone()方法。

对于深拷贝,最容易也应该是常见的方法是使用 JSON.parse() + JSON.stringify() ,还有一个借助第三方脚本库 lodash ,其中方法 cloneDeep 可以实现深拷贝。现在可以使用原生的 structuredClone() 方法。

浅拷贝与深拷贝

首先,先来了解一下浅拷贝和深拷贝的区别:

  • 浅拷贝:就是只拷贝对象的第一层。引用了更深层次的内容。可以使用扩展运算符 ... 或使用 Object.assign() 在 JavaScript 中实现浅拷贝。
  • 深拷贝:是指对象的所有层次都被复制。这是对象的真实副本。可以使用 JSON.parse() + JSON.stringify() 执行此操作,现在,还可以使用原生方法 structuredClone() 执行此操作。

使用 structuredClone 进行深拷贝

原生 structuredClone() 方法使用结构化克隆算法创建给定值的深层拷贝。

结构化克隆算法用于复制复杂 JavaScript 对象的算法。通过来自 Worker 的 postMessage() 或使用 IndexedDB 存储对象时在内部使用。它通过递归输入对象来构建克隆,同时保持先前访问过的引用的映射,以避免无限遍历循环。

语法如下:

1

2

structuredClone(value)

structuredClone(value, { transfer })

  • value:被克隆的对象。可以是任何结构化克隆支持的类型。
  • transfer:为可选参数,是一个可转移对象的数组,里面的 值 并没有被克隆,而是被转移到被拷贝对象上。

返回值:返回值是原始值的深拷贝。

下面是示例代码:

1

2

3

4

5

6

7

8

const objProfile = { name: "DevPoint", detail: { age: 30 } };

const deepCopy = structuredClone(objProfile);

const shallowCopy = { ...deepCopy };

console.log(shallowCopy); // {"name": "DevPoint", "detail": {  "age": 35 } }

deepCopy.name = "天行无忌";

deepCopy.detail.age = 35;

console.log(objProfile); // {"name": "DevPoint", "detail": {  "age": 30 } }

console.log(deepCopy); // {"name": "天行无忌", "detail": {  "age": 35 } }

正如在此代码片段中所见:

  • 更新第一层克隆对象的属性后,原始属性不会更新。
  • 在更深层次更新属性后,原始属性既不更新。发生这种情况是因为在这种情况下,还复制了更深层次。
  • 而对于浅拷贝对象 shallowCopy 来说,其值会随着对象 deepCopy 的变化而变化,在项目开发中很容易带来BUG

structuredClone() 现在可在所有主流浏览器和运行时(如 Node.js 或 Deno)的最新版本中使用。


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • 让chatgpt将html中的图片转为base64的方法

    让chatgpt将html中的图片转为base64的方法
    故事要从我们公司的新官网说起,新官网是叫外包做的,前后端没有分离,对,你没听错,都到了 2023 年的今天,新项目依然是前后端混在
  • JavaScript深拷贝方法structuredClone使用介绍
    对于深拷贝,最容易也应该是常见的方法是使用JSON.parse() + JSON.stringify(),还有一个借助第三方脚本库 lodash ,其中方法cloneDeep可以实现深拷
  • requestAnimationFrame使用示例介绍

    requestAnimationFrame使用示例介绍
    requestAnimationFrame--use是什么 告诉浏览器用来执行一个动画,并且在下一次重绘之前调用其指定的回调函数取更新动画,所以该方法的参数就
  • 不可变数据方案之immer.js原理介绍

    不可变数据方案之immer.js原理介绍
    本篇文章是JavaScript 函数式编程 学习系列第三篇 前一篇JavaScript数据类型对函数式编程的影响讲到了不可变数据的重要性,而让数据不可变的
  • WebComponent使用教程介绍

    WebComponent使用教程介绍
    WebComponent 是官方定义的自定义组件实现方式,它可以让开发者不依赖任何第三方框架(如Vue,React)来实现自定义页面组件;达到组件复用
  • element plus的样式修改和扩展实例介绍
    一、用户故事 我们开发了一个业务组件库。业务组件库是需要基于公司内部的一个UI组件库。而公司的UI组件库又出基于element ui的。 公司的
  • element弹窗表格的字体模糊bug解决方法

    element弹窗表格的字体模糊bug解决方法
    有一个BUG,就是在使用element弹窗表格的字体异常的模糊。如下图: 这个问题其实已经存在很久了。客户屡有反馈,但是不多。我们基本自测
  • 如何在JavaScript中使用媒体查询介绍

    如何在JavaScript中使用媒体查询介绍
    说起媒体查询想必大家最先想到的都是CSS中@media,没错,这是我们最常用的媒体查询方法,主要用来为我们的网站做适配处理。 比如: 1
  • js二进制数据及其互相转化的实现
    file 在js中有很多二进制数据,有file,base64,Blob,ArrayBuffer,FileReader。这些二进制数据在文件导出和下载的时候是经常会用到的,我们这篇文章就
  • JS实现简单的操作杆旋转示例介绍

    JS实现简单的操作杆旋转示例介绍
    JS 简单的操作杆旋转实现 首先说明一下,请直接忽略背景图,这里主要实现的是杆旋转控制方向盘旋转。 鼠标移出控制区域,控制球复位
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计