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 相关文章推荐
js中匿名函数的N种写法
Sep 08 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
jQuery解析XML文件同时动态增加js文件的方法
Jun 01 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
Vue2 模板template的四种写法总结
Feb 23 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
浅谈Angular单元测试总结
Mar 22 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
Jul 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 tp验证表单与自动填充函数代码
2012/02/22 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
PHP实现验证码校验功能
2017/11/16 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
深入研究PHP中的preg_replace和代码执行
2018/08/15 PHP
js option删除代码集合
2008/11/12 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
Win10下Python环境搭建与配置教程
2016/11/18 Python
flask-restful使用总结
2018/12/04 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
keras 多gpu并行运行案例
2020/06/10 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
中医临床专业自我鉴定范文
2014/01/15 职场文书
安全生产目标责任书
2014/04/14 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
Python包argparse模块常用方法
2021/06/04 Python
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
docker-compose部署Yapi的方法
2022/04/08 Servers