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) | 无法克隆函数或方法 |
| Symbol | Symbol 属性会被忽略 |
| 类实例的方法/原型链 | 原型链不会保留，克隆后不是原类的实例 |
| 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); // true
const 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全面指南：从基础到进阶，掌握容器化构建的核心工具
