structuredclone原生支持map、set、date、regexp、arraybuffer、typedarray、dataview、bigint、undefined、null、普通对象和数组，并保留循环引用；不支持函数、dom节点、promise、window、weakmap等非可序列化值。
structuredClone 能直接深拷贝 Map、Set 和循环引用对象，但仅限支持该 API 的现代浏览器（Chrome 98+、Firefox 94+、Safari 16.4+），不支持函数、DOM 节点、Promise 或 Window 等非可序列化值。
structuredClone 支持哪些类型？
它原生支持：Map、Set、Date、RegExp、ArrayBuffer、TypedArray、DataView、BigInt、undefined、null、普通对象和数组，也保留循环引用结构。但以下会抛错：
-
structuredClone(() => {})→DATA_CLONE_ERR -
structuredClone(document.body)→DATA_CLONE_ERR -
structuredClone(new WeakMap())→DATA_CLONE_ERR
在 HTML 中调用 structuredClone 的实际写法
直接在 <script></script> 块里用即可，无需额外 polyfill 或配置：
const original = new Map([['key', { count: 1 }]]);
original.set('self', original); // 循环引用
try {
const cloned = structuredClone(original);
console.log(cloned.get('key').count); // 1
console.log(cloned === original); // false
console.log(cloned.get('self') === cloned); // true ← 循环被正确重建
} catch (err) {
console.error('structuredClone 不可用:', err);
}
注意：不能在旧版浏览器中静默降级——必须显式检测或 fallback。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
兼容性 fallback 怎么写？
如果项目需兼容 Safari 15 或 Edge 93 以下版本，推荐用 MessageChannel 异步 fallback（比手动递归更可靠，且支持 Map/Set/undefined）：
function safeStructuredClone(obj) {
if (typeof structuredClone === 'function') {
return structuredClone(obj);
}
return new Promise(resolve => {
const { port1, port2 } = new MessageChannel();
port2.onmessage = e => resolve(e.data);
port1.postMessage(obj);
});
}
// 使用时注意异步
safeStructuredClone(myComplexData).then(cloned => {
// 处理克隆结果
});
这个 fallback 不支持函数，但能处理 Map、Set、循环引用、Date、RegExp 等绝大多数场景；若需同步 + 函数支持，才值得上手写带 WeakMap 缓存的递归实现。
真正容易被忽略的是：即使在支持 structuredClone 的浏览器里，它仍无法拷贝 custom element 实例、canvas.getContext() 返回值这类“活对象”，遇到时得单独序列化其状态字段，而不是依赖通用克隆。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
