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代码
Mar 27 Javascript
js获取当前select 元素值的代码
Apr 19 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
小程序从手动埋点到自动埋点的实现方法
Jan 24 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
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
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
jquery 实现的全选和反选
2009/04/15 Javascript
JS 控制小数位数的实现代码
2011/08/02 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
js创建元素(节点)示例
2014/01/02 Javascript
javascript中 try catch用法
2015/08/16 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
2016/04/13 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
2019/08/16 Javascript
[01:03:41]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第一场 12.17
2020/12/19 DOTA
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
Python 如何测试文件是否存在
2020/07/31 Python
Django数据库迁移常见使用方法
2020/11/12 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
英国电气世界:Electrical World
2019/09/08 全球购物
酒店门卫岗位职责
2013/12/29 职场文书
四查四看整改措施
2014/09/19 职场文书
学习十八大标语
2014/10/09 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
九年级历史教学反思
2016/02/19 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
Vue h函数的使用详解
2022/02/18 Vue.js