javascript解析json格式的数据方法详解


Posted in Javascript onAugust 07, 2020

JSON (JavaScript Object Notation)是一种简单的数据格式,比xml更轻巧。 它是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。那么如何用JavaScript来解析json呢?

首先,科普一下json。在json中,有两种结构:对象和数组。

一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值' 对”之间运用 “,”(逗号)分隔。 名称用引号括起来;值如果是字符串则必须用括号,数值型则不须要。例如:
var o={“key”:”value”};
数组是值(value)的有序集合。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间运用 “,”(逗号)分隔。
var array = [{“name”:”tom”},{“name”:”jake”}];
在数据传输流程中,json是以字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。
json字符串:var str='{“key”:”value”}';
json对象:var o={“key”:”value”};

1. json字符串转化为json对象

可以通过JavaScript的eval()函数来进行解析,代码如下:

<script type="text/javascript">
  var json = '{"key":"value","jian":"zhi"}';
  var obj = eval("(" + json + ")");

  console.log(obj);     //控制台返回 Object
  console.log(obj.key);   //控制台返回 value
  console.log(obj.jian);  //控制台返回 zhi

</script>

或者通过JSON.parse()方法来解析,代码如下:

var json = '{"key":"value","jian":"zhi"}';
var obj =JSON.parse(json);

console.log(obj);     //控制台返回 Object
console.log(obj.key);   //控制台返回 value
console.log(obj.jian);  //控制台返回 zhi

既然这两种方法都可以解析json字符串,那么我们究竟使用哪种呢?在这之前,我们先来做一个测试:

var value = 1;
var jsonstr = '{"name":"jifeng","company":"taobao","value":++value}';
var json1 = eval('('+jsonstr+')');
console.log(json1);         //控制台返回 Object
console.log('value: '+ value);    //控制台返回 value 2

我的天,evel方法竟然会执行json字符串里的代码!!

我们再看一下JSON.parse()方法:

var value = 1;
var jsonstr = '{"name":"jifeng","company":"taobao","value":++value}';

var json2 = JSON.parse(jsonstr);
console.log(json2);
console.log('value: '+ value);     
 //控制台报错Unexpected token + in JSON at position

现在知道怎么选择了吧。

eval()方法是极其不安全的,尤其是在解析第三方数据的时候,万一第三方数据给你加点恶意代码什么的你不就完了么?所以,JSON.parse()才是正确的选择,当然,有些浏览器不支持这个方法,
可以到https://github.com/douglascrockford/JSON-js/blob/master/json2.js 下载json2.js,添加到你的hlml中就可以了。

除此之外还有一个 jsonStr.parseJSON()的方法,也可以将json字符串转化为json对象,同样需要json2.js包的支持。

2.json对象转化为json字符串

话不多说,先看代码:

var json = '{"key":"value","jian":"zhi"}';
var obj =JSON.parse(json);

var str=JSON.stringify(obj);
console.log(str);    
//控制台返回 {"key":"value","jian":"zhi"}

这里我们用到了和JSON.parse(str) 相对应的方法JSON.stringify(obj)。

同样,还有一个方法叫做obj.toJSONString()也可以将json对象转化为json字符串,与 jsonStr.parseJSON()相对应。

3.json字符数组转化为json数组

这个转化和字符串转对象是一样的,只是操作json数组的方式与操作json对象的方式稍有不同而已。看一段代码:

var arrayStr = '[{"name":"tom","age":"18"},{"name":"jake","age":"20"}]';
var arrayObj =JSON.parse(arrayStr);

console.log(arrayObj);     //控制台返回 Array[2]
console.log(arrayObj[0]);   //控制台返回 Object
console.log(arrayObj[0].name); //控制台返回 tom
console.log(arrayObj[1].age); //控制台返回 20

对于json数组,可以通过下标来进行访问。由于它是一个数组,所以也可以通过for循环进行遍历。

4.jquery解析json字符串

简单地提一下jquery。在使用jquery的ajax功能时,有一个dataType属性,可以将这个属性设置为json或者利用$.getJSON()方法获得服务器返回的值,这个返回值就是一个json对象,所以就不需要再做转化。

当然,jquery也提供了转换的函数 $.parseJSON(string); 这个和之前讲的JSON.parse()得用法是一样的,具体怎么使用,看个人喜好。

到此这篇关于javascript解析json格式的数据方法详解的文章就介绍到这了,更多相关javascript解析json格式的数据内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
javascript 实现简单的table排序及table操作练习
Dec 28 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
parentElement,srcElement的使用小结
Jan 13 Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 Javascript
MVVM框架下实现分页功能示例
Jun 14 Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
layui表格数据复选框回显设置方法
Sep 13 Javascript
Layui点击图片弹框预览的实现方法
Sep 16 Javascript
Vue触发input选取文件点击事件操作
Aug 07 #Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 #Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 #Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 #Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 #jQuery
vue递归获取父元素的元素实例
Aug 07 #Javascript
在vue中使用Base64转码的案例
Aug 07 #Javascript
You might like
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
对PHP依赖注入的理解实例分析
2016/10/09 PHP
PHP实现将多个文件压缩成zip格式并下载到本地的方法示例
2018/05/23 PHP
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
公务员年总结的自我评价
2013/10/25 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
劳动竞赛口号
2014/06/16 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
财务稽核岗位职责
2015/04/13 职场文书
开会通知
2015/04/20 职场文书
教师节班会主持词
2015/07/06 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python