javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js structuredClone()深拷贝

JavaScript新特性structuredClone()深拷贝策略详解

作者：watermelo37

structuredClone()是浏览器和Node.js的原生API,底层使用更高效的 C++ 实现,比起JS层的JSON.stringify/parse 组合,性能通常更好,这篇文章给大家介绍JavaScript新特性structuredClone()深拷贝策略,感兴趣的朋友一起看看吧

JavaScript新特性structuredClone()，一行代码优化深拷贝策略

structuredClone()使用起来非常简单：

const cloned = structuredClone(obj);

替代：

const cloned = JSON.parse(JSON.stringify(obj));

想知道structuredClone()除了深拷贝以外，还有哪些JSON.parse(JSON.stringify(obj))所没有的功能吗？比起JSON.parse(JSON.stringify(obj))有什么性能上的提升吗？structuredClone()的环境限制有哪些？

本文会告诉你答案。

一、structuredClone()介绍

1、structuredClone()是什么

structuredClone() 是浏览器和 Node.js 的原生 API，底层使用更高效的 C++ 实现，比起 JS 层的 JSON.stringify/parse 组合，性能通常更好。

在结构复杂/嵌套多时差异更明显，不需要转成字符串再解析，避免了冗余的编码/解码过程。

2、structuredClone()环境支持

在 Node.js 17+、Chrome 98+、Firefox 94+ 中支持。

3、structuredClone()不会拷贝的内容

不支持或无法克隆的类型/结构说明
函数 (Function)无法克隆函数或方法
SymbolSymbol 属性会被忽略
类实例的方法/原型链原型链不会保留，克隆后不是原类的实例
DOM 节点（如 Element、Node）不支持 DOM 对象（比如浏览器中的 HTML 元素）
Proxy 对象无法克隆代理对象（Proxy）
WeakMap / WeakSet因其不可枚举和弱引用特性，无法被克隆
函数作用域内的闭包变量本质上函数不能克隆，因此也无法保留闭包
不可序列化的 host 对象如浏览器特有的某些对象（如 Window, FileList）

4、基础案例

structuredClone()支持Map、Set、Blob、Date、File等JSON.parse(JSON.stringify(obj))不支持的类型：

const original = {
// 原始类型
string: 'Hello',
number: 123,
boolean: true,
null: null,
undefined: undefined, // JSON会丢失，structuredClone保留
// 日期对象 (JSON会转为字符串，structuredClone保持为Date对象)
date: newDate('2023-06-15'),
// 正则表达式 (JSON会转为空对象，structuredClone保持为RegExp对象)
regex: /pattern/g,
// 集合类型
map: newMap([['key', 'value']]),
set: newSet([1, 2, 3]),
// 二进制数据
arrayBuffer: newUint8Array([1, 2, 3]).buffer,
typedArray: newUint8Array([1, 2, 3]),
// 嵌套数组和对象
array: [1, 2, { nested: true }],
object: { nested: { deep: true } }
};
const clone = structuredClone(original);
// 验证类型保持一致
console.log(clone.date instanceof Date);        // true
console.log(clone.regex instanceof RegExp);     // true
console.log(clone.map instanceof Map);          // true
console.log(clone.set instanceof Set);          // true
console.log(clone.arrayBuffer instanceof ArrayBuffer); // true
console.log(clone.typedArray instanceof Uint8Array);  // true
const clone2 = JSON.parse(JSON.stringify(original));
console.log(clone2.date instanceof Date); // false (变成字符串)
console.log(clone2.set instanceof Set); // false (变成数组)

5、structuredClone()的兼容性判断

可以用如下代码安全使用 structuredClone()，在不支持的环境里自动回退到 JSON 方案（虽然功能会弱一些）：

function deepClone(obj) {
  if (typeof structuredClone === 'function') {
    return structuredClone(obj);
  } else {
    // fallback: JSON 克隆（注意功能有限）
    return JSON.parse(JSON.stringify(obj));
  }
}

二、 structuredClone()比JSON.parse(JSON.stringify(obj))有什么区别

1、对比表格

特性JSON.parse(JSON.stringify(obj))structuredClone(obj)
深拷贝是是
性能较慢（中间需要序列化+解析）更快（原生实现）
支持循环引用报错支持
支持类型丰富度仅支持普通对象、数组、字符串、数字、布尔、null支持更多类型（Map、Set、Blob、Date、File 等）
丢失信息会丢失函数、undefined、Symbol、日期、原型链等保留更多原始结构
错误处理易错（如循环引用会直接抛错）更安全，报错更明确

2、循环引用

循环引用是对象内部相互引用，形成“闭环”的结构，比如：

const obj = {};
obj.self = obj;
const cloned = structuredClone(obj);

如果用 JSON.stringify(obj) 就会报错：TypeError: Converting circular structure to JSON。但 structuredClone() 就能正确处理

三、structuredClone()在性能上的提升

根据多个社区实测 benchmark（如 ​JSBench.me​、V8 团队 blog 和真实项目测试）：

四、结语

目前，structuredClone() 已被所有主流浏览器支持。它为深拷贝问题提供了一个简单、高效的解决方案，快来拥抱这个JavaScript新特性吧。

到此这篇关于JavaScript新特性structuredClone()深拷贝策略详解的文章就介绍到这了,更多相关js structuredClone()深拷贝内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文