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

2024年 5月 8日 60.9k 0

原生的深拷贝~

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

JavaScript 原生深拷贝方法来啦!structuredClone 闪耀登场~-1图片

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

JSON.parse & JSON.stringify()

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

JavaScript 原生深拷贝方法来啦!structuredClone 闪耀登场~-2图片

JavaScript 原生深拷贝方法来啦!structuredClone 闪耀登场~-3图片

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

数据类型

克隆结果

number

string

undefined

null

boolean

object

Array

Function

map

Set

Date

Error

Regex

Dom节点

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

JavaScript 原生深拷贝方法来啦!structuredClone 闪耀登场~-4图片

JavaScript 原生深拷贝方法来啦!structuredClone 闪耀登场~-5图片

lodash.cloneDeep

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

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

JavaScript 原生深拷贝方法来啦!structuredClone 闪耀登场~-6图片

JavaScript 原生深拷贝方法来啦!structuredClone 闪耀登场~-7图片

数据类型

克隆结果

number

string

undefined

null

boolean

object

Array

Function

map

Set

Date

Error

Regex

Dom节点

window.structuredClone

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

JavaScript 原生深拷贝方法来啦!structuredClone 闪耀登场~-8图片

JavaScript 原生深拷贝方法来啦!structuredClone 闪耀登场~-9图片

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

JavaScript 原生深拷贝方法来啦!structuredClone 闪耀登场~-10图片

JavaScript 原生深拷贝方法来啦!structuredClone 闪耀登场~-11图片

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

JavaScript 原生深拷贝方法来啦!structuredClone 闪耀登场~-12图片

数据类型

克隆结果

number

string

undefined

null

boolean

object

Array

Function

map

Set

Date

Error

Regex

Dom节点

相关文章

JavaScript2024新功能:Object.groupBy、正则表达式v标志
PHP trim 函数对多字节字符的使用和限制
新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
为React 19做准备:WordPress 6.6用户指南
如何删除WordPress中的所有评论

发布评论