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 相关文章推荐
javascript之querySelector和querySelectorAll使用说明
Oct 09 Javascript
javascript Event对象详解及使用示例
Nov 22 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
浅谈Angular 观察者模式理解
Nov 01 Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 Javascript
Vue使用screenfull实现全屏效果
Sep 17 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 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开发文件系统实例讲解
2006/10/09 PHP
PHP写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
PHP连接MYSQL数据库的3种常用方法
2017/02/27 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
js 方法实现返回多个数据的代码
2009/04/30 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
javascript实现根据3原色制作颜色选择器的方法
2015/07/17 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
详解如何探测小程序返回到webview页面
2019/05/14 Javascript
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
python有几个版本
2020/06/17 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
写出一个方法实现冒泡排序
2016/07/08 面试题
2014年安全保卫工作总结
2014/11/13 职场文书
个人简历求职信范文
2015/03/20 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS