放弃 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

相关推荐
伍哥的传说1 小时前
Radash.js 现代化JavaScript实用工具库详解 – 轻量级Lodash替代方案
开发语言·javascript·ecmascript·tree-shaking·radash.js·debounce·throttle
程序视点1 小时前
IObit Uninstaller Pro专业卸载,免激活版本,卸载清理注册表,彻底告别软件残留
前端·windows·后端
前端程序媛-Tian2 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
iamlujingtao2 小时前
js多边形算法:获取多边形中心点,且必定在多边形内部
javascript·算法
嘉琪0012 小时前
实现视频实时马赛克
linux·前端·javascript
SpiderPex2 小时前
GitHub下载项目完整配置SSH步骤详解
运维·ssh·github
烛阴2 小时前
Smoothstep
前端·webgl
若梦plus3 小时前
Eslint中微内核&插件化思想的应用
前端·eslint
爱分享的程序员3 小时前
前端面试专栏-前沿技术:30.跨端开发技术(React Native、Flutter)
前端·javascript·面试
超级土豆粉3 小时前
Taro 位置相关 API 介绍
前端·javascript·react.js·taro