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 相关文章推荐
JQuery读取XML文件数据并显示的实现代码
Dec 16 Javascript
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 Javascript
javascript操作ul中li的方法
May 14 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
JavaScript数据结构与算法之栈与队列
Jan 29 Javascript
使用Math.max,Math.min获取数组中的最值实例
Apr 25 Javascript
angular中子控制器向父控制器传值的实例
Oct 08 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
Node.js学习教程之Module模块
Sep 03 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 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程序员的13个好习惯小结
2012/02/20 PHP
php调用Google translate_tts api实现代码
2013/08/07 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
javascript手工制作悬浮菜单
2015/02/12 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
小程序实现投票进度条
2019/11/20 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
简单介绍Python中的readline()方法的使用
2015/05/24 Python
python读写json文件的简单实现
2017/04/11 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
python中np是做什么的
2020/07/21 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
python函数超时自动退出的实操方法
2020/12/28 Python
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
Carrs Silver官网:英国著名的银器品牌
2020/08/29 全球购物
行政助理岗位职责范文
2013/12/03 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
教师网络培训感言
2014/03/09 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
离职证明标准格式
2014/09/15 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
三十年同学聚会致辞
2015/07/28 职场文书