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

news/2024/10/31 8:20:43/

目录

起因

问题

解决

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

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

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

小分享 


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

起因

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

问题

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

解决

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

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

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

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

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


http://www.ppmy.cn/news/1543303.html

相关文章

logback日志脱敏后异步写入文件

大家项目中肯定都会用到日志打印,目的是为了以后线上排查问题方便,但是有些企业对输出的日志包含的敏感(比如:用户身份证号,银行卡号,手机号等)信息要进行脱敏处理。 哎!我们最近就遇到了日志脱敏的改造。可…

推荐一款优秀的pdf编辑器:Ashampoo PDF Pro

Ashampoo PDF Pro是管理和编辑 PDF 文档的完整解决方案。程序拥有您创建、转换、编辑和保护文档所需的一切功能。根据需要可以创建特定大小的文档,跨设备可读,还可以保护文件。现在您还能像编辑Word文档一样编辑PDF! 软件特点 轻松处理文字 如 Microso…

深入理解Docker,从入门到精通-Part1(基础使用)

一、Docker基本概念 Docker架构 基本组件的介绍 Docker Client 是用户界面,它支持用户与Docker Daemon之间通信 Docker Daemon Docker最核心的后台进程,运行于主机上,处理服务请求 Docker registry是中央registry,支持拥有公有与…

《原子核物理评论》

《原子核物理评论》报道原子核物理基础研究、应用研究以及与此有关的交叉学科研究领域的最新重要研究成果和发展趋势, 促进本学科及相关交叉学科的发展,增进国内外学术交流。主要刊登反映本学科及相关各交叉学科领域最新进展的评述性文章, 同时及时发表最新重要研究…

Elasticsearch 安装教程:驾驭数据海洋的星际导航仪

目录 一、准备工作1. ES的下载 二、安装步骤三、注意事项四、启动报错1. org.elasticsearch.bootstrap.StartupException: java.lang.RuntimeException: can not run elasticsearch as root2. max virtual memory areas vm.max_map_count [65530] is too low, increase to at l…

基于数字图像处理人民币面额自动识别

自动缴费机、存取款一体机和自动售货机出现在了我们的生活中。这些先进的设备中最重要的一门技术就是:纸币识别技术。当我们将钞票投入缴费机或者存款机时,机器必定会首先识别用户投入的是面额为多少的纸币,之后再进行真伪辨别、数据写入等功…

【Linux】ProxySQL读写分离

proxysql-2.7.1-1-centos7.x86_64.rpm 读写分离 读写分离的概念 读写分离是⼀种数据库优化技术,主要⽬的是通过将数据库的读操作和写操作分散到不同的数据库 实例上,来提⾼数据库的整体性能和可扩展性。其基本原理是让主数据库处理事务性增、改、删操…

Github 2024-10-30C开源项目日报 Top10

根据Github Trendings的统计,今日(2024-10-30统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量C项目10C++项目1PHP项目1PHP:流行的Web开发脚本语言 创建周期:4710 天开发语言:C, PHP协议类型:OtherStar数量:37340 个Fork数量:7657 次…