当前位置：首页 > 科技 > 软件

JavaScript 原生深拷贝方法来啦！structuredClone 闪耀登场~

来源：责编：时间：2024-05-08 09:17:52 206观看

导读原生的深拷贝~分享一个 JavaScript 原生的深拷贝方法 structuredClone，其实这个方法出了很久了，但是存在感一直很低~图片说这个方法前，我们先来讨论一下，常见的深拷贝都有哪些方案呢？JSON.parse & JSON.stringify()很多人

原生的深拷贝~

分享一个 JavaScript 原生的深拷贝方法 structuredClone，其实这个方法出了很久了，但是存在感一直很低~

图片

说这个方法前，我们先来讨论一下，常见的深拷贝都有哪些方案呢？

JSON.parse & JSON.stringify()

很多人会用 JSON.parse(JSON.stringify(obj))来对对象进行深拷贝操作，但是这个方式缺点太多了

图片

可以看到很多数据类型都没有深拷贝成功

数据类型	克隆结果
number	✔
string	✔
undefined	✖
null	✔
boolean	✔
object	✔
Array	✔
Function	✖
map	✖
Set	✖
Date	✖
Error	✖
Regex	✖
Dom节点	✖

并且在对象具有环引用的情况下，这种深拷贝方式会导致报错

图片

lodash.cloneDeep

lodash 的 cloneDeep也是深拷贝的手段之一，且非常完善，能成功拷贝各种数据类型

但是大家要注意使用 lodash 时要使用 lodash-es，这样才能做到按需加载，减少不必要的代码体积

图片

数据类型	克隆结果
number	✔
string	✔
undefined	✔
null	✔
boolean	✔
object	✔
Array	✔
Function	✔
map	✔
Set	✔
Date	✔
Error	✔
Regex	✔
Dom节点	✔

window.structuredClone

全局的 structuredClone() 方法使用结构化克隆算法将给定的值进行深拷贝

图片

当克隆Function、Dom节点时，会报错

图片

其他数据类型可以成功拷贝~

图片

数据类型	克隆结果
number	✔
string	✔
undefined	✔
null	✔
boolean	✔
object	✔
Array	✔
Function	✖
map	✔
Set	✔
Date	✔
Error	✔
Regex	✔
Dom节点	✖

本文链接：http://www.28at.com/showinfo-26-87254-0.htmlJavaScript 原生深拷贝方法来啦！structuredClone 闪耀登场~

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇：解密 Python 的变量和对象，它们之间有什么区别和联系呢？

下一篇：不知道这些不要说玩转了Controller接口

标签：

热门焦点

三言两语说透设计模式的艺术-简单工厂模式

一、写在前面工厂模式是最常见的一种创建型设计模式，通常说的工厂模式指的是工厂方法模式，是使用频率最高的工厂模式。简单工厂模式又称为静态工厂方法模式，不属于GoF 23种设计
分布式系统中的CAP理论，面试必问，你理解了嘛？

对于刚刚接触分布式系统的小伙伴们来说，一提起分布式系统，就感觉高大上，深不可测。而且看了很多书和视频还是一脸懵逼。这篇文章主要使用大白话的方式，带你理解一下分布式系统
三万字盘点 Spring 九大核心基础功能

大家好，我是三友~~今天来跟大家聊一聊Spring的9大核心基础功能。话不多说，先上目录：图片友情提示，本文过长，建议收藏，嘿嘿嘿！一、资源管理资源管理是Spring的一个核心的基础功能，不
虚拟键盘 API 的妙用

你是否在遇到过这样的问题：移动设备上有一个固定元素，当激活虚拟键盘时，该元素被隐藏在了键盘下方？多年来，这一直是 Web 上的默认行为，在本文中，我们将探讨这个问题、为什么会发生
从零到英雄：高并发与性能优化的神奇之旅

作者 | 波哥审校 | 重楼作为公司的架构师或者程序员，你是否曾经为公司的系统在面对高并发和性能瓶颈时感到手足无措或者焦头烂额呢？笔者在出道那会为此是吃尽了苦头的，不过也得
Python异步IO编程的进程/线程通信实现

这篇文章再讲3种方式，同时讲4中进程间通信的方式一、 Python 中线程间通信的实现方式共享变量共享变量是多个线程可以共同访问的变量。在Python中，可以使用threading模块中的L
JVM优化：实战OutOfMemoryError异常

一、Java堆溢出堆内存中主要存放对象、数组等，只要不断地创建这些对象，并且保证 GC Roots 到对象之间有可达路径来避免垃圾收集回收机制清除这些对象，当这些对象所占空间超过
超闭合精工铰链彻底消灭缝隙三星Galaxy Z Flip5与Galaxy Z Fold5发布

2023年7月26日，三星电子正式发布了Galaxy Z Flip5与Galaxy Z Fold5。三星新一代折叠屏手机采用超闭合精工铰链，让折叠后的缝隙不再可见。同时，配合处
7月4日见！iQOO 11S官宣：“鸡血版”骁龙8 Gen2+200W快充加持

上半年已接近尾声，截至目前各大品牌旗下的顶级旗舰都已悉数亮相，而下半年即将推出的顶级旗舰已经成为了数码圈爆料的主流，其中就包括全新的iQOO 11S系

JavaScript 原生深拷贝方法来啦！structuredClone 闪耀登场~

原生的深拷贝~

JSON.parse & JSON.stringify()

lodash.cloneDeep

window.structuredClone

三言两语说透设计模式的艺术-简单工厂模式

分布式系统中的CAP理论，面试必问，你理解了嘛？

三万字盘点 Spring 九大核心基础功能

虚拟键盘 API 的妙用

从零到英雄：高并发与性能优化的神奇之旅

Python异步IO编程的进程/线程通信实现

JVM优化：实战OutOfMemoryError异常

超闭合精工铰链彻底消灭缝隙三星Galaxy Z Flip5与Galaxy Z Fold5发布

7月4日见！iQOO 11S官宣：“鸡血版”骁龙8 Gen2+200W快充加持

最新推荐

猜你喜欢

热门推荐

相关资讯