记录生活之JSON.parse坑 -- 【JavaScript】

目录

起因

问题

解决

因为是太简单的问题了,无法百度。(他们只会告诉你key取值取错了或者的确是没有对应的value值)

[js中的对象是只能用string || symbol类型来定义,所以obj[item.label]没有问题](#js中的对象是只能用string || symbol类型来定义,所以obj[item.label]没有问题)

那么问题出现哪里呢???

小分享


今天在处理数据的时候碰到一个很简单又很复杂的问题。因为之前没有关注过,这次碰到了就解决了挺长的时间,大家见笑了~~

起因

事情的起因就是日常开发工作,然后需要处理一个数据,server端给到的数据是看起来"第一眼很像"json string的数据,所以我就想也没想,直接parse吧。

问题

相同的key名,但是获取不到value值。真的是一个很简单又很复杂的问题!!!

解决

因为是太简单的问题了,无法百度。(他们只会告诉你key取值取错了或者的确是没有对应的value值)
js中的对象是只能用string || symbol类型来定义,所以obj[item.label]没有问题
那么问题出现哪里呢???

我发现问题的思路是这样的,给小伙伴们分享一下

首先我把步骤一步步的分解开,原先类似是这样的一长串

javascript 复制代码
JSON.parse(要解析的json string 数据)[item.label]

于是变成

javascript 复制代码
let parseRes = JSON.parse(要解析的json string 数据);
javascript 复制代码
let parseRes = JSON.parse('要处理的数据');
for (const key in parseRes) {
   debugger;
   if (key === item.label) {
      console.log('相等');
   }
}

然后就让我看到了问题的关键
这个key值竟然有反斜杠"\"

然后就去查对应JSON.parse的问题了,百度大佬给的我第一个解决方案try...catch...
很好的容错方式,但并没用

说明JSON.parse是支持反斜杠转成json对象的

那么再看数据,我发现server端给的数据的key值就是带有反斜杠的,而value值没有(这里涉及数据我就不粘帖出来了)。而且涉及的规律就是可以通过.replace(/\\"/g, '')正则先处理掉的

**最后得出的结论就是先通过replace将反斜杠去除,然后再JSON.parse转换。**听到这个结果是不是感觉又是白忙活的一样,其实问题不在于大小,而是在于怎么面对,怎么处理,不积跬步无以至千里。在处理问题的过程中大神们也都是一步步找到问题的关键然后再"冒泡"似的一步步往上查找,希望大家也能找到自己的问题解决方案成为未来的大神💪🏻

希望对你们有帮助!


小分享

差点忘记和大家分享一个要点,那也是这次在问题中发现的小技巧

testObj是我创建的正常对象,而下面的parseRes是带反斜杠解析后的对象。

是不是发现在控制台打印下,正常的key值是不会出现双引号 || 单引号的,而不正常的情况就是会有双引号。因为是很小的点,在前面我打印排查问题的时候也没看出来,所以就没想到这点。走了不少弯路,然后控制台也不会帮我们把反斜杠打印出来,着实是有点坑啊!

今天的分享就到这里,如果觉得有收获,麻烦给个赞和关注。你的鼓励是我写作的动力,大家一起学习一起进步。

相关推荐
running up10 分钟前
Vite 全面解析:特性、对比、实践及最新演进
javascript·typescript
.格子衫.13 分钟前
JS原型链总结
开发语言·javascript·原型模式
shoubepatien16 分钟前
JavaWeb_Web基础
java·开发语言·前端·数据库·intellij-idea
WordPress学习笔记24 分钟前
wordpress外贸主题Google地图添加(替换)方案
前端·wordpress·wordpress地图
OrangeForce33 分钟前
Monknow新标签页数据导出
javascript·edge浏览器
小妖6661 小时前
力扣(LeetCode)- 93. 复原 IP 地址(JavaScript)
javascript·tcp/ip·leetcode
码农秋1 小时前
Element Plus DatePicker 日期少一天问题:时区解析陷阱与解决方案
前端·vue.js·elementui·dayjs
未来之窗软件服务1 小时前
未来之窗昭和仙君(五十六)页面_预览模式——东方仙盟筑基期
前端·仙盟创梦ide·东方仙盟·昭和仙君·东方仙盟架构
top_designer1 小时前
Illustrato:钢笔工具“退休”了?Text to Vector 零基础矢量生成流
前端·ui·aigc·交互·ux·设计师·平面设计
星哥说事1 小时前
星哥带你玩飞牛NAS-13:自动追番、订阅下载 + 刮削,动漫党彻底解放双手!
前端