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

19,596次阅读
没有评论

共计 1327 个字符,预计需要花费 4 分钟才能阅读完成。

目录

起因

问题

解决

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

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

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

小分享 


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

起因

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

问题

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

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

解决

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

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

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

JSON.parse(要解析的 json string 数据)[item.label]

于是变成

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

 然后就让我看到了问题的关键

记录生活之 JSON.parse 坑 --【JavaScript】
这个 key 值竟然有反斜杠 ””

然后就去查对应 JSON.parse 的问题了,百度大佬给的我第一个解决方案try…catch…

记录生活之 JSON.parse 坑 --【JavaScript】
很好的容错方式,但并没用

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

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

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

希望对你们有帮助!


小分享 

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

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

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

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

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

原文地址: 记录生活之 JSON.parse 坑 —【JavaScript】

    正文完
     0
    Yojack
    版权声明:本篇文章由 Yojack 于2024-11-10发表,共计1327字。
    转载说明:
    1 本网站名称:优杰开发笔记
    2 本站永久网址:https://yojack.cn
    3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
    4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
    5 本站所有内容均可转载及分享, 但请注明出处
    6 我们始终尊重原创作者的版权,所有文章在发布时,均尽可能注明出处与作者。
    7 站长邮箱:laylwenl@gmail.com
    评论(没有评论)