放弃 JSON.parse(JSON.stringify()) 吧!试试现代深拷贝!

作者:程序员成长指北

原文:mp.weixin.qq.com/s/WuZlo_92q...

最近小组里的小伙伴,暂且叫小A吧,问了一个bug:

提示数据循环引用,相信不少小伙伴都遇到过类似问题,于是我问他:

我:你知道问题报错的点在哪儿吗

小A: 知道,就是下面这个代码,但不知道怎么解决。

ini 复制代码
onst a = {};
const b = { parent: a };
a.child = b; // 形成循环引用

try {
  const clone = JSON.parse(JSON.stringify(a));
} catch (error) {
  console.error('Error:', error.message); // 会报错:Converting circular structure to JSON
}

上面是我将小A的业务代码提炼为简单示例,方便阅读。

  • 这里 a.child 指向 b,而 b.parent 又指回 a,形成了循环引用。
  • JSON.stringify 时会抛出 Converting circular structure to JSON 的错误。

我顺手查了一下小A项目里 JSON.parse(JSON.stringify()) 的使用情况:

一看有50多处都使用了, 使用频率相当高了。

我继续提问:

我:你有找解决方案吗?

小A: 我看网上说可以自己实现一个递归来解决,但是我不太会实现

于是我帮他实现了一版简单的递归深拷贝:

ini 复制代码
function deepClone(obj, hash = new Map()) {
if (typeof obj !== 'object' || obj === null) return obj;
if (hash.has(obj)) return hash.get(obj);

const clone = Array.isArray(obj) ? [] : {};
  hash.set(obj, clone);

for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepClone(obj[key], hash);
    }
  }
return clone;
}

// 测试
const a = {};
const b = { parent: a };
a.child = b;

const clone = deepClone(a);
console.log(clone.child.parent === clone); // true

此时,为了给他拓展一下,我顺势抛出新问题:

我: 你知道原生Web API 现在已经提供了一个深拷贝 API吗?

小A:???

于是我详细介绍了一下:

主角 structuredClone登场

structuredClone() 是浏览器原生提供的 深拷贝 API,可以完整复制几乎所有常见类型的数据,包括复杂的嵌套对象、数组、Map、Set、Date、正则表达式、甚至是循环引用。

它遵循的标准是:HTML Living Standard - Structured Clone Algorithm(结构化克隆算法)。

语法:

ini 复制代码
const clone = structuredClone(value);

一行代码,优雅地解决刚才的问题:

ini 复制代码
const a = {};
const b = { parent: a };
a.child = b; // 形成循环引用

const clone = structuredClone(a);

console.log(clone !== a); // true
console.log(clone.child !== b); // true
console.log(clone.child.parent === clone); // true,循环引用关系被保留

为什么增加 structuredClone

structuredClone 出现之前,常用的深拷贝方法有:

方法 是否支持函数/循环引用 是否支持特殊对象
JSON.parse(JSON.stringify(obj)) ❌ 不支持函数、循环引用 ❌ 丢失 DateRegExpMapSet
第三方库 lodash.cloneDeep ✅ 支持 ✅ 支持,但体积大,速度较慢
手写递归 ✅ 可支持 ❌ 复杂、易出错

structuredClone原生、极速、支持更多数据类型且无需额外依赖 的现代解决方案。

支持的数据类型

类型 支持
Object ✔️
Array ✔️
Map / Set ✔️
Date ✔️
RegExp ✔️
ArrayBuffer / TypedArray ✔️
Blob / File / FileList ✔️
ImageData / DOMException / MessagePort ✔️
BigInt ✔️
Symbol(保持引用) ✔️
循环引用 ✔️

不支持:

  • 函数(Function)
  • DOM 节点
  • WeakMap、WeakSet

常见使用示例

1. 克隆普通对象

ini 复制代码
const obj = { a: 1, b: { c: 2 } };
const clone = structuredClone(obj);
console.log(clone);  // { a: 1, b: { c: 2 } }
console.log(clone !== obj); // true

2. 支持循环引用

ini 复制代码
const obj = { name: 'Tom' };
obj.self = obj;
const clone = structuredClone(obj);
console.log(clone.self === clone);  // true

3. 克隆 Map、Set、Date、RegExp

javascript 复制代码
const complex = {
  map: new Map([["key", "value"]]),
  set: new Set([1, 2, 3]),
  date: new Date(),
  regex: /abc/gi
};
const clone = structuredClone(complex);
console.log(clone);

兼容性

提到新的API,肯定得考虑兼容性问题:

  • Chrome 98+
  • Firefox 94+
  • Safari 15+
  • Node.js 17+ (global.structuredClone)

如果需要兼容旧浏览器:

  • 可以降级使用 lodash.cloneDeep
  • 或使用 MessageChannel Hack

很多小伙伴一看到兼容性问题,可能心里就有些犹豫:

"新API虽然好,但旧浏览器怎么办?"

但技术的发展离不开新技术的应用和推广,只有更多人开始尝试并使用,才能让新API真正普及开来,最终成为主流。

建议:

如果你的项目运行在现代浏览器或 Node.js 环境,structuredClone 是目前最推荐的深拷贝方案 。 Node.js 17+:可以直接使用 global.structuredClone

相关推荐
uncleTom6661 分钟前
前端布局利器:rem 适配全面解析
前端
谦哥4 分钟前
Claude4免费Vibe Coding!目前比较好的Cursor替代方案
前端·javascript·claude
泰勒朗斯6 分钟前
如何在新机器上设置github完成内容git push
git·github
LEAFF15 分钟前
如何 测试Labview是否返回数据 ?
前端
Spider_Man17 分钟前
🚀 从阻塞到丝滑:React中DeepSeek LLM流式输出的实现秘籍
前端·react.js·llm
心在飞扬18 分钟前
理解JS事件环(Event Loop)
前端·javascript
敲代码的玉米C22 分钟前
深入理解链表反转:从基础到进阶的完整指南
javascript
qianmoQ30 分钟前
GitHub 趋势日报 (2025年07月05日)
github
盏茶作酒2935 分钟前
打造自己的组件库(一)宏函数解析
前端·vue.js
山有木兮木有枝_1 小时前
JavaScript 设计模式--单例模式
前端·javascript·代码规范