JSON.parse、stringify 封装:弥补实现深拷贝的所有缺陷!

扯皮

开始正题之前给大伙拜个晚年😄

前两天突然发现掘金上收到这么多点赞和收藏,意识到应该是大伙都开工摸鱼刷文章了😆

作者本来也是过完大年初三就应该开卷写文章肝项目了,但因为一些家庭原因后面带了几天娃,现在想想是真的痛苦😣

刚开始还想着一边带一边刷刷文章看看视频教程,后来发现根本不现实:还没看两眼小孩可能就要哭闹,不哭就要带着去玩,不跟着玩就又要闹…后面几天视频教程是一点没看,倒是开始看小猪佩奇和汪汪队了☹️

不过现在回想起来这样才有年味啊~ 难道大过年天天闭门不出敲代码真的就好吗?😶

正文

不扯这么多了我们直接开始正题,关于 JSON 这俩方法的文章其实也很多,光过年期间我都已经见了好几篇专讲这个内容了,无非进阶一点就是关于后面的几个可选参数:replacer、space、reviver 的使用

那为什么我还要写这篇文章呢?(因为没活了)因为我喜欢结合实际业务场景来讲知识点,空讲知识点完全可以抄文档了没必要专门写文章出来

在最近自己的低代码项目中做拖拽功能时遇到了需要传输数据的需求:

我们知道 drag 事件可以通过 e.dataTransfer.setData(key, value)e.dataTransfer.getData(key) 来进行整个拖拽过程中的数据传输和获取

关键在于 setData 方法中的 value 参数要求是 string 类型,而我的业务当中是要传输物料组件的配置对象,如果直接以对象类型进行传输最终在 getData 里获取的是 [object Object] 字符串

到这里没有丝毫的犹豫,直接脱口而出 JSON.stringify、JSON.parse 解决问题 😄

确实解决了,但这是因为我的项目还没做完,我开始犹豫了:针对于一个物料组件后续还会有一些自定义函数的配置,只不过现在还没有实现🤔,这到后面要还无脑用 JSON.stringify 不就抓瞎了

后面就研究起了 JSON.stringify 的第二个参数 replacer 其实可以解决这个问题

研究着就又想到我之前写过的一篇文章👇:

我来给你写一个滴水不漏的深拷贝!面试官:怎么把getter和setter拷贝上?😅😅😅 – 掘金 (juejin.cn)

对啊,完全可以封装 JSON.parse、stringify 这俩方法来看看能不能实现一个完整的深拷贝!!

以后又可以和面试官装b了:光知道背八股文 JSON.parse、stringify 实现深拷贝的缺点,那你会解决吗?哈,哥们现在真会了!😁😁😁

可选参数:replacer、space 和 reviver

MDN 上关于这几个参数介绍的很清晰,所以不再详细讲解,如果用心往下翻翻就能看到:

JSON.stringify(replacer、space):