如何利用structuredClone深度复制包含大量Date和RegExp的复杂表单对象-js教程-PHP中文网

structuredclone能正确复制date、regexp、array、object、map、set、typedarray、bigint、boolean、string、number、null等类型，但不支持函数、promise、error、dom节点、weakmap、weakset。

如何利用structuredclone深度复制包含大量date和regexp的复杂表单对象

直接用 structuredClone 就行，它原生支持 Date 和 RegExp，无需额外处理。

哪些类型能被 structuredClone 正确复制

structuredClone 是浏览器和 Node.js（v17.0+）内置的深拷贝方法，对常用内置对象有完整支持：

Date → 复制后仍是独立的 Date 实例，时间值相同但引用不同
RegExp → 复制后保留 source、flags 和 lastIndex（如果可写）
Array、Object、Map、Set、TypedArray、BigInt、Boolean、String、Number、null、undefined（在支持的上下文中）等均原生支持
注意：函数、Promise、Error、DOM 节点、WeakMap、WeakSet 不支持，会抛错或被忽略

表单对象中 Date 和 RegExp 的典型场景

比如一个带校验规则和时间字段的表单对象：

稿定AI

一款融合AI图像生成与智能编辑能力的在线设计工具，可辅助完成图片重绘、线稿处理和人物视觉优化等创作任务。

下载

const form = {
  name: "张三",
  birthday: new Date("1990-05-12"),
  emailPattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
  tags: ["user", "active"],
  metadata: new Map([["createdAt", new Date()]]),
};

直接克隆即可保持语义和行为一致：

const cloned = structuredClone(form);
console.log(cloned.birthday instanceof Date); // true
console.log(cloned.emailPattern.test("a@b.c")); // true
console.log(cloned.birthday === form.birthday); // false（不同实例）
console.log(cloned.emailPattern.toString() === form.emailPattern.toString()); // true

兼容性与降级建议

若需支持较老环境（如 Safari

先检查 typeof structuredClone === 'function'
不支持时，用轻量 JSON 替代方案（仅限纯数据）或手动处理 Date/RegExp
例如降级时：遍历对象，遇到 Date 用 new Date(date.getTime())，遇到 RegExp 用 new RegExp(reg.source, reg.flags)
避免使用 lodash.cloneDeep 等通用库——它们对 RegExp 默认只复制 source 和 flags，丢失 lastIndex；而 structuredClone 会保留（只要 lastIndex 可枚举且非只读）