JavaScript 中怎么用 structuredClone 高效复制复杂的嵌套状态-js教程-PHP中文网

structuredclone 能安全深拷贝对象、数组、map、set、date、regexp 等可序列化值，但不支持函数、promise、error、weakmap、weakset、循环引用及 dom 对象；支持 transfer 选项零拷贝转移 arraybuffer；现代浏览器及 node.js 17+ 原生支持，旧环境需降级处理。

javascript 中怎么用 structuredclone 高效复制复杂的嵌套状态

用 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 的响应式数据、配置对象、表单初始值），直接调用即可：

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); // ✅ 安全深拷贝</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5703" title="deep-java-review"><img
														src="https://img.php.cn/upload/skill/000/000/081/179060057413304.jpg" alt="deep-java-review" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill5703" title="deep-java-review" class="overflowclass">deep-java-review</a>
													<p class="overflowclass">Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill5703" title="deep-java-review" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>

修改 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 将从原对象中移除
);</p>

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