structuredclone() 可深克隆嵌套对象、数组、map、set、date、regexp、arraybuffer等,但不支持函数、class实例、dom节点、error、promise、weakmap/weakset;使用时应try/catch并考虑兼容性。

直接用 structuredClone() 就行,它原生支持深度克隆大多数前端状态对象,包括嵌套对象、数组、Map、Set、Date、RegExp、ArrayBuffer 等,且不依赖第三方库。
哪些数据能被正确克隆
structuredClone() 基于 HTML 标准的「structured clone algorithm」,能安全复制以下类型:
- 普通对象和数组(含多层嵌套)
-
Map和Set(键值对和元素都会被深拷贝) -
Date和RegExp(生成新实例,不共享引用) -
ArrayBuffer、TypedArray(如Uint8Array)、DataView -
BigInt、Boolean、String、Number、null、undefined(注意:undefined在某些上下文中可能被忽略,比如作为对象属性值时)
哪些不能克隆?要特别注意
它不处理函数、class 实例、DOM 节点、window、document、Error 对象、Promise、WeakMap、WeakSet,遇到这些会抛错或跳过:
- 含方法的对象:克隆后方法丢失(只保留可序列化属性)
- 自定义 class 实例:变成普通对象,原型链和 constructor 信息丢失
-
undefined作为对象属性值:在部分浏览器中会被省略(不是所有环境都保留) -
Symbol键:整个键值对会被忽略
实际使用建议
适合用于状态快照、表单暂存、撤销/重做、服务端状态同步等场景。推荐配合 try/catch 使用:
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
try {
const nextState = structuredClone(currentState);
// 安全修改 nextState,不影响 currentState
} catch (err) {
console.warn('structuredClone 失败,降级为 JSON 方案(仅限纯数据)', err);
// 降级方案(仅适用于无函数、无 Date/Map/Set 的简单对象)
const fallback = JSON.parse(JSON.stringify(currentState));
}
如果状态里混了函数或 class 实例,先用工具函数剥离不可克隆字段,再克隆核心数据。
兼容性与 Polyfill 提示
Chrome 98+、Firefox 94+、Safari 15.4+ 已支持;旧版浏览器需检查:
if (typeof structuredClone === 'function') {
state = structuredClone(state);
} else {
// 引入 polyfill(如 @ungap/structured-clone)或改用其他策略
}
Node.js 17.0+ 启用 --experimental-structured-cloning,18.12+ 默认启用。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










