structuredClone 能安全深拷贝对象、数组、Map、Set、Date、RegExp 等可序列化值，但不支持函数、Promise、Error、WeakMap、WeakSet、循环引用及 DOM 对象；支持 transfer 选项零拷贝转移 ArrayBuffer；现代浏览器及 Node.js 17+ 原生支持，旧环境需降级处理。

用 structuredClone 复制复杂嵌套状态，核心是它能安全、深拷贝可序列化的值（如对象、数组、Map、Set、Date、RegExp 等），且不依赖 JSON 限制（比如支持循环引用？不支持——这点要特别注意）。

structuredClone 能复制什么，不能复制什么

它基于 structured clone algorithm，支持：

• 普通对象、数组、TypedArray、DataView
• Map、Set、Date、RegExp、Blob、File、ImageData
• null、undefined、布尔、数字、字符串、符号（Symbol）、BigInt
• 可转移对象（如 ArrayBuffer，配合 transfer 选项）

但明确不支持：

• 函数、Promise、Error 实例、WeakMap、WeakSet
• 带有循环引用的对象（会直接抛错：DataCloneError）
• DOM 节点、window、document 等宿主对象

基本用法：一行深拷贝嵌套对象

对纯数据状态（比如 React/Vue 的响应式数据、配置对象、表单初始值），直接调用即可：

立即学习“Java免费学习笔记（深入）”；

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

const original = {
  user: { id: 1, name: 'Alice', tags: ['admin', 'dev'] },
  settings: { theme: 'dark', notifications: { email: true } },
  meta: new Date(),
  flags: new Set(['v2', 'beta'])
};
<p>const cloned = structuredClone(original); // ✅ 安全深拷贝

修改 cloned.user.name 不会影响 original，各层引用都已断开。

处理 ArrayBuffer 等可转移资源（提升性能）

如果状态里含大块二进制数据（如图像处理结果、音频缓冲区），用 transfer 选项可避免内存复制，实现“零拷贝”转移：

const buffer = new ArrayBuffer(1024 * 1024); // 1MB
const view = new Uint8Array(buffer);
<p>const transferred = structuredClone(
{ data: view },
{ transfer: [buffer] } // ⚠️ buffer 将从原对象中移除
);

注意：transfer 后原 buffer 变为 detached 状态，不可再读写。适合一次性传递大数据给 Worker 或 Canvas。

兼容性与降级方案

structuredClone 在现代浏览器（Chrome 98+、Firefox 94+、Safari 15.4+）和 Node.js 17.0+ 原生支持。若需兼容旧环境：

• 检测是否存在：typeof structuredClone === 'function'
• 降级可用 JSON.parse(JSON.stringify(obj))（仅限纯 JSON 数据，丢失函数、undefined、Date 对象等）
• 更健壮的降级推荐 clone-deep 或 lodash.cloneDeep（但注意体积和循环引用支持）

不建议手动递归实现——易出错且无法处理 Map/Set/Date 等原生类型。