3分钟掌握常用的JS操作JSON方法总结

 更新时间:2017年04月25日 09:25:43   作者:徐洁  
工作中做了几款自动化测试工具都是跟日志读取相关,日志格式又大多数都是JSON,所以这里把常用的JS操作JSON的方法做了总结

工作中做了几款自动化测试工具都是跟日志读取相关,日志格式又大多数都是JSON,所以这里把常用的JS操作JSON的方法做了总结~~

一、概要简介

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。

在JSON中,有两种结构:对象和数组

1、对象以“{”开始,“}”结束,“key/value”之间运用 “,”分隔。

 

2、数组以“[”开始,“]”结束。值之间运用 “,”分隔。

 

二、JSON对象和JSON字符串的转换

在数据传输过程中,JSON是以字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。如下:

JSON字符串:

 

JSON对象:

 

1、将String转化为JSON

 

2、将JSON转化为String

 

三、JSON的输出美化

上一节我们讲到了将JSON对象转化为JSON字符串可以用JSON.stringify() 方法,stringify还有个可选参数space(1<=space<=10),可以指定缩进的空格数,用于美化输出;

 

我们看下代码:

 

待美化的JSON:

 

美化后的输出,是不是看得更清晰了:

 

四、JSON字符串的替换

日志处理中常常有这样的字符串,如下:

 

需要经过替换后,才能变成标准的JSON字符串格式,从而转化成JSON对象。这里我们需要用JS实现replaceAll的功能,将所有的 ' \\" ' 替换成  ' " ' 。

代码如下,这里的gm是固定的,g表示global,m表示multiple:

 

替换后的效果如下:

 

五、遍历JSON对象和数组

1、遍历JSON对象,代码如下:

 

2、遍历JSON数组,代码如下:

 

六、递归遍历JSON对象

为了实现一些复杂功能常常需要递归遍历JSON对象,这里给出一个递归的例子,希望能给大家作为参考。

例子中要求处理JSON字符串,遇到数组的时候,数组中有超过一个对象,删除第一个对象之后的所有对象,假设原始JSON如下:

 

要求处理后的数组中只保留第一个对象,处理完成后应该如下图所示:

 

递归代码如下:

 

以上所述是小编给大家介绍的3分钟掌握常用的JS操作JSON方法总结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 常见JS前端接口校验方式总结

    常见JS前端接口校验方式总结

    作为一名优秀的接口调用工程师,对接口的返回信息进行校验是必不可少的,本文整理的是一些常用的校验方式,希望能够对大家有所帮助
    2023-05-05
  • 整理一些最近经常遇到的前端面试题

    整理一些最近经常遇到的前端面试题

    这篇文章主要给大家整理了一些在面试的时候经常遇到的前端面试题,本文总结的这三十道面试题都是一些最近碰到的一些较为有用的前端题目,相信会对大家面试具有一定的参考价值,需要的朋友可以参考学习,下面来一起看看吧。
    2017-04-04
  • JavaScript设计模式之装饰者模式实例详解

    JavaScript设计模式之装饰者模式实例详解

    这篇文章主要介绍了JavaScript设计模式之装饰者模式,结合实例形式较为详细的分析了装饰者模式的概念、原理及javascript定义、使用装饰者模式的相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • JavaScript返回网页中锚点数目的方法

    JavaScript返回网页中锚点数目的方法

    这篇文章主要介绍了JavaScript返回网页中锚点数目的方法,涉及javascript使用document.anchors获取锚点数目的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • 原生JavaScript实现Ajax异步请求

    原生JavaScript实现Ajax异步请求

    ajax现在是一种非常流行的技术,现在虽然可以利用JQuery或者一些第三方插件甚至微软提供的一些控件可以方面的实现ajax功能,但是明白其原理也是非常重要的,下面是来使用纯javascript实现获取服务器端的功能来展示如何使用纯javascript实现ajax功能,以弄清其原理.
    2017-11-11
  • js实现数字跳动到指定数字

    js实现数字跳动到指定数字

    这篇文章主要为大家详细介绍了js实现数字跳动到指定数字,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • JS简单实现DIV相对于浏览器固定位置不变的方法

    JS简单实现DIV相对于浏览器固定位置不变的方法

    这篇文章主要介绍了JS简单实现DIV相对于浏览器固定位置不变的方法,涉及javascript针对页面位置的运算与动态变换技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • JavaScript自动设置IFrame高度的小例子

    JavaScript自动设置IFrame高度的小例子

    JavaScript自动设置IFrame高度的小例子,需要的朋友可以参考一下
    2013-06-06
  • javascript 连连看代码出炉

    javascript 连连看代码出炉

    非常不错的连连看实现代码,大家可以运行下,看下效果。
    2009-06-06
  • Js+Flash实现访问剪切板操作

    Js+Flash实现访问剪切板操作

    最近需要遇到了这个问题点击按钮复制链接的功能果断度娘谷哥,最后找到得解决方案ZeroClipBoard一款开源得js+Flash实现得剪切板操作
    2012-11-11

最新评论