JS操作JSON常用方法(10w阅读)


Posted in Javascript onDecember 06, 2020

一、概念简介

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。
在JSON中,有两种结构:对象和数组。

1.对象

var packJson = {"name":"Liza", "password":"123"};

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

2.数组

var packJson = [{"name":"Liza", "password":"123"}, {"name":"Mike", "password":"456"}];

数组是值的有序集合。一个数组以“[”开始,“]”结束。值之间运用 “,”分隔。

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

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

var jsonStr ='{"name":"Liza", "password":"123"}' ;

JSON对象:

var jsonObj = {"name":"Liza", "password":"123"};

1、 JSON字符串转化 JSON对象

var jsonObject= jQuery.parseJSON(jsonstr);

2、 JSON对象转化 JSON 字符串

var jsonstr =JSON.stringify(jsonObject );

三、JSON的输出美化

JSON.stringify(value[, replacer [, space]])

上一节讲到了将JSON转化为字符串可以用JSON.stringify() 方法,stringify还有个可选参数space,可以指定缩进用的空白字符串,用于美化输出(pretty-print);
space参数是个数字,它代表有多少的空格;上限为10。该值若小于1,则意味着没有空格;如果该参数没有提供(或者为null)将没有空格。

我们看下代码:

var formatJsonStr=JSON.stringify(jsonObject,undefined, 2);

待美化的JSON:

JS操作JSON常用方法(10w阅读)

美化后的效果:

JS操作JSON常用方法(10w阅读)

四、JSON字符串的替换

工作经常遇到这样的字符串,如下:

JS操作JSON常用方法(10w阅读)

需要经过替换后,才能从字符串转化成JSON对象。这里我们需要用JS实现replaceAll的功能, 将所有的 ' \\" ' 替换成 ' " ' .
代码如下,这里的gm是固定的,g表示global,m表示multiple:

var jsonStr=jsonStr.replace(new RegExp('\\"',"gm"), '"' );

替换后的效果如下:

JS操作JSON常用方法(10w阅读)

五、遍历JSON对象和JSON数组

1、遍历JSON对象

代码如下:

var packJson = {"name":"Liza", "password":"123"} ;
 
for(var k in packJson ){//遍历packJson 对象的每个key/value对,k为key
  alert(k + " " + packJson[k]);
}

效果图

JS操作JSON常用方法(10w阅读)

JS操作JSON常用方法(10w阅读)

2、遍历 JSON 数组

代码如下:

var packJson = [{"name":"Liza", "password":"123"}, {"name":"Mike", "password":"456"}];
 
for(var i in packJson){//遍历packJson 数组时,i为索引
  alert(packJson[i].name + " " + packJson[i].password);
}

效果图

JS操作JSON常用方法(10w阅读)

JS操作JSON常用方法(10w阅读)

六、递归遍历

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

1、第一个例子是递归遍历JSON,遇到数组的时候,数组中有超过一个对象,删除第一个对象之后的所有对象
举个例子,原始JSON如下:

JS操作JSON常用方法(10w阅读)

期望处理后的JSON如下:

JS操作JSON常用方法(10w阅读) 

递归代码如下:

/**
 *返回处理后的 json字符串
 */
function jsonParse(jsonObj) {
   
   distinctJson(jsonObj);
   var last=JSON.stringify(jsonObj, undefined, 2);
   return last;
}
 
 
/**
 * 去掉 json中数组多余的项
 */
function distinctJson(obj) {
   if(obj instanceof Array) {
       if(obj.length > 1) { //数组中有超过一个对象,删除第一个对象之后的所有对象
         obj.splice(1, (obj.length - 1));
      }
      distinctJson(obj[0]);
   } else if(obj instanceof Object) {
       for( var index in obj){
          var jsonValue = obj[index];
         distinctJson(jsonValue);
      }
   }
}

2、第二个例子是递归查找目标节点(节点id为targetId,有且只有一个),找到后把targetChildren赋值给节点的children,
举个例子,原始JSON如下,查找的目标节点id为5:

JS操作JSON常用方法(10w阅读)

targetChildren为

JS操作JSON常用方法(10w阅读) 

期望最后处理的JSON结果为:

JS操作JSON常用方法(10w阅读) 

递归代码如下:

/**
 * 递归查找目标节点
 */
function findTarget(obj,targetId,targetChildren){
  if(obj.id==targetId){
     obj.children=targetChildren;
     return true;
  }else{
     if(obj.children!=null){
        for(var i=0; i<obj.children.length; i++){
          var flag=findTarget(obj.children[i],targetId,targetChildren);
          if(flag==true){
             return true;
          }
        }
     }
  }
  return false;
}

到此这篇关于JS操作JSON常用方法(10w阅读)的文章就介绍到这了,更多相关JS操作JSON内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 事件冒泡简介及应用
Jan 11 Javascript
在浏览器窗口上添加遮罩层的方法
Nov 12 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
详解Node.js开发中的express-session
May 19 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 Javascript
简述ES6新增关键字let与var的区别
Aug 23 Javascript
Vue实现可移动水平时间轴
Jun 29 Javascript
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
10分钟学会js处理json的常用方法
Dec 06 #Javascript
JavaScript中的几种继承方法示例
Dec 06 #Javascript
js调用网络摄像头的方法
Dec 05 #Javascript
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 #Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 #Vue.js
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 #Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 #Vue.js
You might like
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
php中smarty变量修饰用法实例分析
2015/06/11 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
基于vue2实现左滑删除功能
2017/11/28 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
Python文档生成工具pydoc使用介绍
2015/06/02 Python
python3之微信文章爬虫实例讲解
2017/07/12 Python
flask中主动抛出异常及统一异常处理代码示例
2018/01/18 Python
有关Python的22个编程技巧
2018/08/29 Python
Pytorch抽取网络层的Feature Map(Vgg)实例
2019/08/20 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
Yahoo-PHP面试题2
2014/12/06 面试题
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
七一建党日演讲稿
2014/09/05 职场文书
小学生作文批改评语
2014/12/25 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers