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 相关文章推荐
不用MOUSEMOVE也能滑动啊
May 23 Javascript
javascript之可拖动的iframe效果代码
Aug 01 Javascript
在IE下获取object(ActiveX)的Param的代码
Sep 15 Javascript
js以对象为索引的关联数组
Jul 04 Javascript
一个挺有意思的Javascript小问题说明
Sep 26 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 Javascript
javascript如何定义对象数组
Jun 07 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
原生js实现节日时间倒计时功能
Jan 18 Javascript
vue 给数组添加新对象并赋值
Apr 20 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&amp;MYSQL留言板源码
2020/07/19 PHP
PHP下载文件的函数实例代码
2016/05/18 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
理解Python垃圾回收机制
2016/02/12 Python
python实现用户管理系统
2018/01/10 Python
python去掉空白行的多种实现代码
2018/03/19 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
python使用numpy中的size()函数实例用法详解
2021/01/29 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
求职自荐书范文
2013/12/04 职场文书
公益活动策划方案
2014/01/09 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
学校师德师风整改方案
2014/10/28 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
行政答辩状范文
2015/05/21 职场文书
中学生运动会广播稿
2015/08/19 职场文书