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 相关文章推荐
Mootools 1.2教程 滚动条(Slider)
Sep 15 Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
JavaScript词法作用域与调用对象深入理解
Nov 29 Javascript
js实现格式化金额,字符,时间的方法
Feb 26 Javascript
Jquery中基本选择器用法实例详解
May 18 Javascript
Node.js的基本知识简单汇总
Sep 19 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
JS实现select选中option触发事件操作示例
Jul 13 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
JavaScript实现指定数量的并发限制的示例代码
Mar 10 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
《魔兽世界》惊魂幻象将获得调整
2020/03/08 其他游戏
PHP利用COM对象访问SQLServer、Access
2006/10/09 PHP
如何在PHP程序中防止盗链
2008/04/09 PHP
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
python保存数据到本地文件的方法
2018/06/23 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
什么是属性访问器
2015/10/26 面试题
大学生暑期实践感言
2014/02/26 职场文书
聘用意向书范本
2014/04/01 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
详解Java实现设计模式之责任链模式
2021/06/23 Java/Android
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript