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 相关文章推荐
Extjs中常用表单介绍与应用
Jun 07 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
常用的JavaScript模板引擎介绍
Feb 28 Javascript
js倒计时抢购实例
Dec 20 Javascript
基于jQuery ligerUI实现分页样式
Sep 18 Javascript
jquery实现input框获取焦点的简单实例
Jan 26 Javascript
javascript实现简易计算器
Feb 01 Javascript
AngularJS实现自定义指令及指令配置项的方法
Nov 20 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 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
php5中类的学习
2008/03/28 PHP
php的memcache类分享(memcache队列)
2014/03/26 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
[58:18]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Mineski
2018/03/30 DOTA
Eclipse + Python 的安装与配置流程
2013/03/05 Python
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
Python正则表达式教程之一:基础篇
2017/03/02 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
军训自我鉴定范文
2014/02/13 职场文书
《忆江南》教学反思
2014/04/07 职场文书
银行求职信怎么写
2014/05/26 职场文书
迁户口计划生育证明
2014/10/19 职场文书
师德师风事迹材料
2014/12/20 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
Python anaconda安装库命令详解
2021/10/16 Python
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫
Python创建SQL数据库流程逐步讲解
2022/09/23 Python