3分钟掌握常用的JS操作JSON方法总结


Posted in Javascript onApril 25, 2017

工作中做了几款自动化测试工具都是跟日志读取相关,日志格式又大多数都是JSON,所以这里把常用的JS操作JSON的方法做了总结~~

一、概要简介

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。

在JSON中,有两种结构:对象和数组

1、对象以“{”开始,“}”结束,“key/value”之间运用 “,”分隔。

3分钟掌握常用的JS操作JSON方法总结 

2、数组以“[”开始,“]”结束。值之间运用 “,”分隔。

3分钟掌握常用的JS操作JSON方法总结 

二、JSON对象和JSON字符串的转换

在数据传输过程中,JSON是以字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。如下:

JSON字符串:

3分钟掌握常用的JS操作JSON方法总结 

JSON对象:

3分钟掌握常用的JS操作JSON方法总结 

1、将String转化为JSON

3分钟掌握常用的JS操作JSON方法总结 

2、将JSON转化为String

3分钟掌握常用的JS操作JSON方法总结 

三、JSON的输出美化

上一节我们讲到了将JSON对象转化为JSON字符串可以用JSON.stringify() 方法,stringify还有个可选参数space(1<=space<=10),可以指定缩进的空格数,用于美化输出;

3分钟掌握常用的JS操作JSON方法总结 

我们看下代码:

3分钟掌握常用的JS操作JSON方法总结 

待美化的JSON:

3分钟掌握常用的JS操作JSON方法总结 

美化后的输出,是不是看得更清晰了:

3分钟掌握常用的JS操作JSON方法总结 

四、JSON字符串的替换

日志处理中常常有这样的字符串,如下:

3分钟掌握常用的JS操作JSON方法总结 

需要经过替换后,才能变成标准的JSON字符串格式,从而转化成JSON对象。这里我们需要用JS实现replaceAll的功能,将所有的 ' \\" ' 替换成  ' " ' 。

代码如下,这里的gm是固定的,g表示global,m表示multiple:

3分钟掌握常用的JS操作JSON方法总结 

替换后的效果如下:

3分钟掌握常用的JS操作JSON方法总结 

五、遍历JSON对象和数组

1、遍历JSON对象,代码如下:

3分钟掌握常用的JS操作JSON方法总结 

2、遍历JSON数组,代码如下:

3分钟掌握常用的JS操作JSON方法总结 

六、递归遍历JSON对象

为了实现一些复杂功能常常需要递归遍历JSON对象,这里给出一个递归的例子,希望能给大家作为参考。

例子中要求处理JSON字符串,遇到数组的时候,数组中有超过一个对象,删除第一个对象之后的所有对象,假设原始JSON如下:

3分钟掌握常用的JS操作JSON方法总结 

要求处理后的数组中只保留第一个对象,处理完成后应该如下图所示:

3分钟掌握常用的JS操作JSON方法总结 

递归代码如下:

3分钟掌握常用的JS操作JSON方法总结 

以上所述是小编给大家介绍的3分钟掌握常用的JS操作JSON方法总结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js版本A*寻路算法
Dec 22 Javascript
权威JavaScript 中的内存泄露模式
Aug 13 Javascript
js或css文件后面跟参数的原因说明
Jan 09 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
Apr 25 Javascript
javascript事件委托的方式绑定详解
Jun 10 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
重新理解JavaScript的六种继承方式
Mar 24 Javascript
canvas绘制爱心的几种方法总结(推荐)
Oct 31 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
五分钟搞懂Vuex实用知识(小结)
Aug 12 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 #Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 #Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 #Javascript
整理一些最近经常遇到的前端面试题
Apr 25 #Javascript
Vue.js 2.0学习教程之从基础到组件详解
Apr 24 #Javascript
js实现延迟加载的几种方法
Apr 24 #Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 #Javascript
You might like
PL-880隐藏功能
2021/03/01 无线电
How do I change MySQL timezone?
2008/03/26 PHP
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
ES6新特性之模块Module用法详解
2017/04/01 Javascript
关于webpack2和模块打包的新手指南(小结)
2017/08/07 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
vue使用axios上传文件(FormData)的方法
2019/04/14 Javascript
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
python任务调度实例分析
2015/05/19 Python
python flask中静态文件的管理方法
2018/03/20 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
HTML5 Web 存储详解
2016/09/16 HTML / CSS
体育专业个人的求职信范文
2013/09/21 职场文书
写给保洁员表扬信
2014/01/08 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
护士节策划方案
2014/05/19 职场文书
关于国庆节的演讲稿
2014/09/05 职场文书
监考失职检讨书
2015/01/26 职场文书
介绍信范文大全
2015/05/07 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
Vue如何清空对象
2022/03/03 Vue.js
Elasticsearch 批量操作
2022/04/19 Python
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis