如何用 structuredClone 解决深拷贝包含 Date 与 Map 对象时的失败-js教程-PHP中文网

structuredclone 能直接拷贝 date 和 map，原生支持 date、map、set、regexp、arraybuffer 等；失败主因是混入 function、symbol、dom 节点等不可克隆值，而非 date 或 map 本身。

如何用 structuredclone 解决深拷贝包含 date 与 map 对象时的失败

structuredClone 能否直接拷贝 Date 和 Map

能，structuredClone 原生支持 Date、Map、Set、RegExp、ArrayBuffer 等多数内置可转移对象，不需要额外 polyfill 或手动处理。它比 JSON.parse(JSON.stringify()) 可靠得多——后者会丢掉 Date 的类型（变成字符串）、完全忽略 Map 和 Set 的键值对。

常见失败场景：跨上下文或不可克隆对象

看似调用 structuredClone 报错，往往不是因为 Date 或 Map 本身，而是传入了无法结构化克隆的值。典型错误信息是：DataCloneError: An object could not be cloned。

function、undefined、Symbol、Promise、Window、document 等无法被克隆，哪怕只嵌套在 Map 的 value 里也会失败
若在 Service Worker 或 iframe 中调用，且源对象含 DOM 节点（如 Element），同样触发 DataCloneError
Map 的 key 若为 function 或 Symbol，整个 Map 不可克隆（key 必须是可克隆类型，如 string、number、object、Date）

验证是否真能克隆：用最小可复现代码测试

别猜，直接跑一段带 Date 和 Map 的干净测试：

Toingg Ops Toolkit

一款AI音频处理工具，主要用于通过向 `toingg/make_campaign` API 发送 POST 请求，提交用户提供的 JSON 数据，创建并启动 Toingg 语音呼叫活动，适用于 Codex 将活动简报……，适合需要提升相关任务效率的用户。

下载

const original = {
  now: new Date('2024-05-20T10:30:00Z'),
  meta: new Map([['version', 2], ['created', new Date('2023-01-01')]])
};

try {
  const clone = structuredClone(original);
  console.log(clone.now instanceof Date); // true
  console.log(clone.meta instanceof Map);   // true
  console.log(clone.meta.get('created') instanceof Date); // true
} catch (err) {
  console.error(err.name, err.message); // 看具体哪一步崩了
}

如果这段跑不通，说明你的原始数据混入了不可克隆项；如果通了，问题出在别的地方（比如你误把 structuredClone 当成同步函数去等异步逻辑）。

替代方案仅在 structuredClone 不可用时考虑

structuredClone 在现代浏览器（Chrome 98+、Firefox 97+、Safari 15.4+）和 Node.js 17.0+ 已稳定支持。如果必须兼容旧环境：

不要手写递归深拷贝来处理 Date 和 Map——容易漏掉 Set、RegExp、循环引用等边界
可选用 lodash.cloneDeep，它显式支持 Date 和 Map，但注意它不处理 ArrayBuffer 视图或 WebAssembly.Memory
若需 100% 语义等价且环境可控，优先降级到 postMessage + message 事件中转（利用底层结构化克隆机制），而非自己实现