一行代码解决深拷贝问题,JavaScript新特性解析

深拷贝是JavaScript里一个常见而又棘手的问题,长久以来,我们不得不依赖各种自定义方法或第三方库来解决这一问题。大多数人都会使用JSON.parse(JSON.stringify(obj))这种方式,但它存在众多限制。好消息是,现代JavaScript为我们带来了原生的解决方案:structuredClone()方法。

深拷贝的传统解决方案及其问题

回顾一下,我们通常使用以下方法来实现深拷贝:

这些方法各有缺点:

  1. JSON方法的局限性: 无法处理函数/Symbol类型/undefined值/循环引用,无法正确处理Date、RegExp、Map、Set等特殊对象,会丢失原型链

  2. 自定义递归函数: 实现复杂,容易出错,通常需要额外处理各种特殊类型,性能不一定理想

  3. 第三方库: 增加项目依赖,增加打包体积

structuredClone:现代JavaScript的深拷贝解决方案

2022年,WHATWG HTML标准引入了structuredClone()方法,现在它已被所有主流浏览器和Node.js支持。这个方法提供了一种高效、标准化的方式来创建复杂JavaScript对象的深拷贝。

基本用法

使用structuredClone()非常简单:

就是这么简单!一行代码,无需任何额外的库或复杂的递归函数。

structuredClone的优势

  1. 内置于JavaScript引擎,无需外部依赖

  2. 处理循环引用,不会像JSON方法那样抛出错误

  3. 正确处理大多数JavaScript内置类型,包括: Date对象/RegExp对象/Map和Set/ArrayBuffer和TypedArrays/Blob对象/File对象/ImageData对象/嵌套的复杂对象结构

处理循环引用的示例

支持的数据类型详解

structuredClone()支持的类型远超JSON方法:

sql 复制代码
const original = {// 原始类型string: 'Hello',number: 123,boolean: true,null: null,undefined: undefined, // JSON会丢失,structuredClone保留// 日期对象 (JSON会转为字符串,structuredClone保持为Date对象)date: newDate('2023-06-15'),// 正则表达式 (JSON会转为空对象,structuredClone保持为RegExp对象)regex: /pattern/g,// 集合类型map: newMap([['key', 'value']]),set: newSet([1, 2, 3]),// 二进制数据arrayBuffer: newUint8Array([1, 2, 3]).buffer,typedArray: newUint8Array([1, 2, 3]),// 嵌套数组和对象array: [1, 2, { nested: true }],object: { nested: { deep: true } }};const clone = structuredClone(original);// 验证类型保持一致console.log(clone.dateinstanceofDate);        // trueconsole.log(clone.regexinstanceofRegExp);     // trueconsole.log(clone.mapinstanceofMap);          // trueconsole.log(clone.setinstanceofSet);          // trueconsole.log(clone.arrayBufferinstanceofArrayBuffer); // trueconsole.log(clone.typedArrayinstanceofUint8Array);  // true

structuredClone的局限性

虽然structuredClone()解决了大多数深拷贝问题,但它仍有一些限制:

  1. 不支持函数:与JSON方法一样,函数不会被克隆

  2. 不克隆原型链:克隆的对象会丢失原始对象的原型链

  3. 不支持DOM节点

  4. 不支持Error对象

structuredClone() 是JavaScript生态系统中的一个重要进步,它为常见的深拷贝问题提供了一个简单、高效且标准化的解决方案。虽然它有一些限制,但在大多数常见场景中,它都是深拷贝的最佳选择。目前,structuredClone() 已被所有主流浏览器支持。

相关推荐
张元清几秒前
Neant:0心智负担的React状态管理库
前端·javascript·面试
阳树阳树2 分钟前
小程序蓝牙API能力探索 1——蓝牙协议发展历史
前端
阿华的代码王国3 分钟前
【Android】PopupWindow实现长按菜单
android·xml·java·前端·后端
ygming12 分钟前
Q51- code295- 数据流的中位数 + Q52- code767- 重构字符串
前端
袋鱼不重14 分钟前
手把手搭建Vue轮子从0到1:4. Reactivity 模块的实现
前端·vue.js·源码
!win !15 分钟前
免费的个人网站托管-GitHub Pages篇
前端·开发工具
xw516 分钟前
免费的个人网站托管-GitHub Pages篇
前端·github
阿星AI工作室17 分钟前
扣子可以发布到小米搞钱了!手把手教程来了丨coze开发者瓜分亿级流量池指南
前端·人工智能·后端
小华同学ai18 分钟前
GitHub 开源爆款工具|MediaCrawler:程序员零门槛采集抖音/小红书/B站等社交评论,30K star 背后的场景实战揭秘!
前端·后端·github
盏灯18 分钟前
🔥🔥🔥websocket 前后端通信,接受命令,并执行
前端·后端·websocket