当前位置: 首页 > news >正文

JavaScript新特性structuredClone(),一行代码优化深拷贝策略

目录

JavaScript新特性structuredClone(),一行代码优化深拷贝策略

一、structuredClone()介绍

1、structuredClone()是什么

2、structuredClone()环境支持

3、structuredClone()不会拷贝的内容

4、基础案例

5、structuredClone()的兼容性判断

二、 structuredClone()比JSON.parse(JSON.stringify(obj))有什么区别

1、对比表格

2、循环引用

三、structuredClone()在性能上的提升

四、结语


        作者:watermelo37

        CSDN万粉博主、华为云云享专家、阿里云专家博主、腾讯云、支付宝合作作者,全平台博客昵称watermelo37。

        一个假装是giser的coder,做不只专注于业务逻辑的前端工程师,Java、Docker、Python、LLM均有涉猎。

---------------------------------------------------------------------

温柔地对待温柔的人,包容的三观就是最大的温柔。

---------------------------------------------------------------------

JavaScript新特性structuredClone(),一行代码优化深拷贝策略

        structuredClone()使用起来非常简单:

const cloned = structuredClone(obj);

替代:

const cloned = JSON.parse(JSON.stringify(obj));

        想知道structuredClone()除了深拷贝以外,还有哪些JSON.parse(JSON.stringify(obj))所没有的功能吗?比起JSON.parse(JSON.stringify(obj))有什么性能上的提升吗?structuredClone()的环境限制有哪些?

        本文会告诉你答案。

一、structuredClone()介绍

1、structuredClone()是什么

        structuredClone() 是浏览器和 Node.js 的原生 API,底层使用更高效的 C++ 实现,比起 JS 层的 JSON.stringify/parse 组合,性能通常更好。

        在结构复杂/嵌套多时差异更明显,不需要转成字符串再解析,避免了冗余的编码/解码过程。

2、structuredClone()环境支持

        在 Node.js 17+、Chrome 98+、Firefox 94+ 中支持。

3、structuredClone()不会拷贝的内容

不支持或无法克隆的类型/结构说明
函数 (Function)无法克隆函数或方法
SymbolSymbol 属性会被忽略
类实例的方法/原型链原型链不会保留,克隆后不是原类的实例
DOM 节点(如 Element、Node)不支持 DOM 对象(比如浏览器中的 HTML 元素)
Proxy 对象无法克隆代理对象(Proxy
WeakMap / WeakSet因其不可枚举和弱引用特性,无法被克隆
函数作用域内的闭包变量本质上函数不能克隆,因此也无法保留闭包
不可序列化的 host 对象如浏览器特有的某些对象(如 Window, FileList

4、基础案例

        structuredClone()支持Map、Set、Blob、Date、File等JSON.parse(JSON.stringify(obj))不支持的类型:

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.date instanceof Date);        // true
console.log(clone.regex instanceof RegExp);     // true
console.log(clone.map instanceof Map);          // true
console.log(clone.set instanceof Set);          // true
console.log(clone.arrayBuffer instanceof ArrayBuffer); // true
console.log(clone.typedArray instanceof Uint8Array);  // trueconst clone2 = JSON.parse(JSON.stringify(original));
console.log(clone2.date instanceof Date); // false (变成字符串)
console.log(clone2.set instanceof Set); // false (变成数组)

5、structuredClone()的兼容性判断

        可以用如下代码安全使用 structuredClone(),在不支持的环境里自动回退到 JSON 方案(虽然功能会弱一些):

function deepClone(obj) {if (typeof structuredClone === 'function') {return structuredClone(obj);} else {// fallback: JSON 克隆(注意功能有限)return JSON.parse(JSON.stringify(obj));}
}

二、 structuredClone()比JSON.parse(JSON.stringify(obj))有什么区别

1、对比表格

特性JSON.parse(JSON.stringify(obj))structuredClone(obj)
深拷贝
性能较慢(中间需要序列化+解析)更快(原生实现)
支持循环引用报错支持
支持类型丰富度仅支持普通对象、数组、字符串、数字、布尔、null支持更多类型(Map、Set、Blob、Date、File 等)
丢失信息会丢失函数、undefined、Symbol、日期、原型链等保留更多原始结构
错误处理易错(如循环引用会直接抛错)更安全,报错更明确

2、循环引用

        循环引用是对象内部相互引用,形成“闭环”的结构,比如:

const obj = {};
obj.self = obj;
const cloned = structuredClone(obj); 

        如果用 JSON.stringify(obj) 就会报错:TypeError: Converting circular structure to JSON。但 structuredClone() 就能正确处理

三、structuredClone()在性能上的提升

        根据多个社区实测 benchmark(如 ​JSBench.me​、V8 团队 blog 和真实项目测试):

  • 深层嵌套对象(10层以上):structuredClone() 明显更快;
  • 包含 Map、Set、Date、ArrayBuffer 的复杂对象:structuredClone() 能直接处理,而 JSON 克隆则需要额外转换或报错;
  • 平均测试中 structuredClone() 比 JSON 快 1.5~5 倍,尤其在大型对象上提升更显著。

四、结语

        目前,structuredClone() 已被所有主流浏览器支持。它为深拷贝问题提供了一个简单、高效的解决方案,快来拥抱这个JavaScript新特性吧。

        只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~

        其他热门文章,请关注:

        极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图

        你真的会使用Vue3的onMounted钩子函数吗?Vue3中onMounted的用法详解

        DeepSeek:全栈开发者视角下的AI革命者

        通过array.filter()实现数组的数据筛选、数据清洗和链式调用

        通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能

        TreeSize:免费的磁盘清理与管理神器,解决C盘爆满的燃眉之急

        通过MongoDB Atlas 实现语义搜索与 RAG——迈向AI的搜索机制

        深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解

        el-table实现动态数据的实时排序,一篇文章讲清楚elementui的表格排序功能

        MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver

        JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、DOM操作等

        前端实战:基于Vue3与免费满血版DeepSeek实现无限滚动+懒加载+瀑布流模块及优化策略

        高效工作流:用Mermaid绘制你的专属流程图;如何在Vue3中导入mermaid绘制流程图

        干货含源码!如何用Java后端操作Docker(命令行篇)

        在线编程实现!如何在Java后端通过DockerClient操作Docker生成python环境

        Dockerfile全面指南:从基础到进阶,掌握容器化构建的核心工具

http://www.lqws.cn/news/66079.html

相关文章:

  • 数学分析——一致性(均匀性)和收敛
  • python打卡day42@浙大疏锦行
  • 湖北理元理律师事务所:个人债务管理的温度与精度
  • 劫持进程注入
  • 子串题解——和为 K 的子数组【LeetCode】
  • 自编码器Auto-encoder(李宏毅)
  • WSL2 安装与Docker安装
  • CP4-OFDM模糊函数原理及仿真
  • HTTPS
  • Flickr30k Entities短语定位评测指南
  • 微调大模型:什么时候该做,什么时候不该做?
  • 湖北理元理律师事务所:企业债务优化的科学路径与人文关怀
  • vscode编辑器怎么使用提高开发uVision 项目的效率,如何编译Keil MDK项目?
  • Nginx反向代理
  • Pull Request Integration 拉取请求集成
  • Mybatis-Plus 学习
  • JMeter 直连数据库
  • 设备驱动与文件系统:01 I/O与显示器
  • linux信号详解
  • Java正则表达式完全指南
  • Java实现中文姓名转拼音生成用户信息并写入文件
  • Java函数式编程(上)
  • 象棋里的卧槽马、侧面虎、金钩马的方位与解析
  • OpenLayers 地图标注之图文标注
  • [Python] Python中的多重继承
  • 儿童节快乐,聊聊数字的规律和同余原理
  • STM32——CAN总线
  • 助力高校AI教学与科研:GpuGeek推出618算力支持活动
  • Launcher3体系化之路
  • python打卡day42