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 tab效果的实现代码
Dec 26 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
js实现点击链接后延迟3秒再跳转的方法
Jun 05 Javascript
JQuery核心函数是什么及使用方法介绍
May 03 Javascript
原生js仿jquery animate动画效果
Jul 13 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 Javascript
JavaScript实现简单计时器
Jun 22 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
PHP4中实现动态代理
2006/10/09 PHP
使用PHP实现密保卡功能实现代码&amp;lt;打包下载直接运行&amp;gt;
2011/10/09 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
php实现将Session写入数据库
2015/07/26 PHP
PHP对象实例化单例方法
2017/01/19 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
横向对比分析Python解析XML的四种方式
2016/03/30 Python
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
Python简单格式化时间的方法【strftime函数】
2016/09/18 Python
python使用os.listdir和os.walk获得文件的路径的方法
2017/12/16 Python
多个应用共存的Django配置方法
2018/05/30 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
《孙权劝学》教学反思
2014/04/23 职场文书
大二学习计划书范文
2014/04/27 职场文书
文明市民先进事迹
2014/05/15 职场文书
酒店前台辞职书
2015/02/26 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android
Java spring定时任务详解
2021/10/05 Java/Android