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 相关文章推荐
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
JavaScript Serializer序列化时间处理示例
Jul 31 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
基于jquery实现左右按钮点击的图片切换效果
Jan 27 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
js实现3D照片墙效果
Oct 28 Javascript
React实现评论的添加和删除
Oct 20 Javascript
js实现验证码干扰(动态)
Feb 23 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
我的论坛源代码(六)
2006/10/09 PHP
PHP服务器页面间跳转实现方法
2012/08/02 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
图片onload事件触发问题解决方法
2011/07/31 Javascript
JS 实现图片直接下载示例代码
2013/07/22 Javascript
简单的Jquery全选功能
2013/11/07 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
React简单介绍
2017/05/24 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
Vue中强制组件重新渲染的正确方法
2021/01/03 Vue.js
python实现的文件夹清理程序分享
2014/11/22 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
Django Rest framework权限的详细用法
2019/07/25 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
python爬虫如何解决图片验证码
2021/02/14 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
储备店长岗位职责
2015/04/14 职场文书
配置nginx负载均衡
2022/05/06 Servers
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript