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的document对象和window对象详解
Dec 30 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
AngularJS 指令详细介绍
Jul 27 Javascript
JS库之Highlight.js的用法详解
Sep 13 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
js实现无缝轮播图插件封装
Jul 31 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
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
jquery 插件实现多行文本框[textarea]自动高度
2015/03/04 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
Vuejs+vue-router打包+Nginx配置的实例
2018/09/20 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
python处理数据,存进hive表的方法
2018/07/04 Python
使用Python更换外网IP的方法
2018/07/09 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
Python通过format函数格式化显示值
2020/10/17 Python
Opencv常见图像格式Data Type及代码实例
2020/11/02 Python
selenium设置浏览器为headless无头模式(Chrome和Firefox)
2021/01/08 Python
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
会计与审计专业大专生求职信
2013/10/03 职场文书
《都江堰》教学反思
2014/02/07 职场文书
学校万圣节活动方案
2014/02/13 职场文书
网络管理专业求职信
2014/03/15 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
财政局长个人总结
2015/03/04 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
python高温预警数据获取实例
2022/07/23 Python