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 相关文章推荐
深入认识JavaScript中的函数
Jan 22 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
JavaScript实现继承的4种方法总结
Oct 16 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
AngularJS基础教程之简单介绍
Sep 27 Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 Javascript
jquery延迟对象解析
Oct 26 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 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读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
洪恩在线成语词典小偷程序php版
2012/04/20 PHP
php FLEA中二叉树数组的遍历输出
2012/09/26 PHP
解析PHP中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
常用js脚本
2006/12/03 Javascript
JavaScript 编程引入命名空间的方法
2007/06/29 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
基于JavaScript实现的快速排序算法分析
2017/04/14 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
python基础教程之lambda表达式使用方法
2014/02/12 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
图解Python变量与赋值
2018/04/03 Python
详解python播放音频的三种方法
2019/09/23 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
python和JavaScript哪个容易上手
2020/06/23 Python
python wsgiref源码解析
2021/02/06 Python
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
我的五年职业生涯规划
2014/01/23 职场文书
无毒社区工作方案
2014/05/23 职场文书
安全宣传标语口号
2014/06/06 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
春节慰问简报
2015/07/21 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书