JS 深拷贝怎么使用 structuredClone 处理复杂嵌套对象-js教程-PHP中文网

structuredclone() 可安全深拷贝多层嵌套对象、数组、map、set、date、regexp 等，支持循环引用，但不支持函数、promise、symbol 键、weakmap/weakset 等，兼容主流浏览器及 node.js 18.7+。

js 深拷贝怎么使用 structuredclone 处理复杂嵌套对象

直接调用 structuredClone() 就能处理复杂嵌套对象，包括多层对象、数组、Map、Set、Date、RegExp 等，且自动保留类型和结构，不需手动递归或判断。

支持的嵌套类型一并克隆

它原生支持绝大多数常用嵌套结构，无需额外适配：

普通对象与任意深度嵌套对象（如 { a: { b: { c: 1 } } }）
数组及其内部元素（含混合类型：[1, 'str', { x: new Date() }]）
Map 和 Set（键值对与元素均被深拷贝，原始引用关系断开）
Date、RegExp、ArrayBuffer、TypedArray、Blob、File（部分环境）
循环引用对象（obj.self = obj）也能安全克隆，不会栈溢出或报错

实际使用示例

一段典型代码即可验证效果：

原始对象

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

const original = {
  name: 'Alice',
  scores: [95, 87, 92],
  meta: new Map([['created', new Date(1700000000000)], ['pattern', /test/g]]),
  profile: {
    tags: new Set(['dev', 'js']),
    nested: { id: Symbol('uid') }
  }
};

一行克隆

const copy = structuredClone(original);

验证独立性

copy.scores.push(100) → original.scores 仍为 [95, 87, 92]
copy.meta.set('updated', new Date()) → original.meta 不受影响
copy.profile.tags.add('new') → original.profile.tags 大小不变
copy.profile.nested.id === original.profile.nested.id 返回 false（Symbol 不可克隆，该键值对被忽略）

需要注意的限制

不是所有内容都能拷贝，遇到不支持项会抛 DataCloneError：

函数、Promise、Error 实例、WeakMap、WeakSet —— 不支持，直接报错
Symbol 键（如 new Map([[Symbol('k'), 'v']])）会被跳过，整个键值对不进入克隆结果
不可枚举属性、getter/setter、DOM 节点（如 document.body）不被复制
RegExp 的 lastIndex 属性会被重置为 0（非保留状态）

兼容性与降级建议

当前（2026年）主流环境已全面支持，但仍需留意：

浏览器：Chrome 98+、Firefox 94+、Safari 15.4+、Edge 98+
Node.js：v18.7+ 默认启用；v17.0–v18.6 需启动时加 --enable-structured-clone
旧环境降级：可用 try...catch 包裹，捕获 DataCloneError 后 fallback 到 JSON.parse(JSON.stringify())（仅限纯数据）或轻量递归实现