structuredclone 是浏览器原生深拷贝方法,支持 object、array、date、map、set 等类型,自动处理循环引用但不支持函数、symbol 等,现代浏览器已广泛兼容。

JavaScript 中 structuredClone 是浏览器原生支持的深拷贝方法,能安全、高效地复制包含嵌套对象、数组、Map、Set、Date、RegExp 等结构的数据,且自动处理循环引用(会抛出错误)和不可序列化值(如函数、undefined、Symbol、Promise)。
structuredClone 的基本用法
直接传入要拷贝的值即可,返回一个全新的、与原数据结构一致的副本:
const original = {
name: "Alice",
hobbies: ["reading", "coding"],
profile: { age: 30, city: "Beijing" },
tags: new Set(["js", "web"]),
lastLogin: new Date("2024-01-01")
};
const cloned = structuredClone(original);
cloned.profile.city = "Shanghai";
console.log(original.profile.city); // "Beijing"(未被修改)
console.log(cloned.profile.city); // "Shanghai"
支持的数据类型范围
structuredClone 支持以下类型的深拷贝(按规范定义):
- 基本类型(null、boolean、number、string、bigint、symbol 不支持)
- Object 和 Array(含嵌套)
- Date、RegExp、Map、Set、ArrayBuffer、TypedArray、DataView
- BigInt64Array、BigUint64Array
- URL、FormData、File、Blob(部分环境需注意兼容性)
注意:函数、undefined、Symbol、Error 对象、Promise、WeakMap、WeakSet、window、document 等无法克隆,调用时会抛出 DataCloneError。
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
处理不支持的值或自定义逻辑
若数据中含函数或 Symbol,需先预处理——例如移除、替换或序列化为可克隆形式:
- 过滤掉函数属性:
JSON.parse(JSON.stringify(obj))可作降级方案(但丢失 Date、Map、Set 等) - 手动剥离不可克隆字段再调用
structuredClone - 配合
structuredClone的transfer选项(仅适用于 ArrayBuffer,用于零拷贝转移)
例如:
const objWithFn = {
data: [1, 2, 3],
handler: () => console.log("do something"),
meta: new Map([["key", "value"]])
};
// 先清理不可克隆字段
const cleanObj = {
data: objWithFn.data,
meta: objWithFn.meta
};
const cloned = structuredClone(cleanObj); // ✅ 成功
浏览器兼容性与降级方案
目前主流现代浏览器(Chrome 98+、Firefox 94+、Safari 15.4+)已支持。旧环境可用如下方式检测并降级:
- 检查
typeof structuredClone === 'function' - 降级推荐使用
JSON.parse(JSON.stringify())(仅限纯 JSON 数据) - 更健壮的降级可用 Lodash 的
cloneDeep或自行实现简易深拷贝(注意循环引用)
简单检测示例:
function safeClone(value) {
if (typeof structuredClone === "function") {
return structuredClone(value);
}
return JSON.parse(JSON.stringify(value));
}
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










