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中eval函数的使用方法与示例
Apr 09 Javascript
js+css在交互上的应用
Jul 18 Javascript
使用Math.floor与Math.random取随机整数的方法详解
May 07 Javascript
Javascript 函数parseInt()转换时出现bug问题
May 20 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
jQuery替换textarea中换行的方法
Jun 10 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
完全深入学习Bootstrap表单
Nov 28 Javascript
angularjs项目的页面跳转如何实现(5种方法)
May 25 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
Nov 06 Javascript
详解js获取video任意时间的画面截图
Apr 17 Javascript
JavaScript实现拖拽效果
Mar 16 Javascript
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
PHP+javascript液晶时钟
2006/10/09 PHP
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
php获取301跳转URL简单实例
2013/12/16 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
vue.js删除列表中的一行
2018/06/30 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
vue移动端的左右滑动事件详解
2020/06/17 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
python flask中静态文件的管理方法
2018/03/20 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
tensorflow如何批量读取图片
2019/08/29 Python
pandas的resample重采样的使用
2020/04/24 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
英国女装网上商店:I Saw It First
2018/10/18 全球购物
市场总经理岗位职责
2014/04/11 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS