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 相关文章推荐
Json对象替换字符串占位符实现代码
Nov 17 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
JavaScript中数组Array方法详解
Feb 27 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
详解Angular调试技巧之报错404(not found)
Jan 31 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 Javascript
详解如何使用微信小程序云函数发送短信验证码
Mar 13 Javascript
微信小程序按钮点击跳转页面详解
May 06 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+MYSQL开发工具及资源收藏
2007/01/02 PHP
php面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
详解js闭包
2014/09/02 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
js 计算图片内点个数的示例代码
2019/04/04 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
python多线程编程中的join函数使用心得
2014/09/02 Python
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
Tensorflow 同时载入多个模型的实例讲解
2018/07/27 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
Python通过TensorFLow进行线性模型训练原理与实现方法详解
2020/01/15 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
2014年便民服务中心工作总结
2014/12/20 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书