JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析


Posted in Javascript onSeptember 05, 2017

 JSON 和XML比较

json的长度和xml比起来更加短小

json读取速度更快

json可以使用JavaScript的内置方法直接进行解析,转化成javascript对象,非常方便。

在Javascript使用eval将接送转化为json对象

var jsonData = '{"persons":{"name":"成龙","age":58},{"name":"吴京","age":33},"name":"甄子丹","age":44}';
var jsonObj = eval('('+jsonData+')');
//访问json对象数组的第一个对象的name属性
console.log(jsonObj.persons[0].name);

在Javascript使用JSON.parse将接送转化为json对象

var jsonData = '{"persons":{"name":"成龙","age":58},{"name":"吴京","age":33},"name":"甄子丹","age":44}';
var jsonObj = JSON.parse(jsonData);
//访问json对象数组的第一个对象的name属性
console.log(jsonObj.persons[0].name);

但是eval方法很不安全,例如:

var jsonData = '{"persons":{"name":"成龙","age":window.alert(123)},{"name":"吴京","age":33},"name":"甄子丹","age":44}';
var jsonObj = eval('('+jsonData+')');
//访问json对象数组的第一个对象的name属性
console.log(jsonObj.persons[0].name);

将age的值换成了Javascript代码,依然可以解析,加入有人恶意修改这个代码,那么就会造成严重后果。

但是JSON.parse不同

var jsonData = '{"persons":{"name":"成龙","age":window.alert(123)},{"name":"吴京","age":33},"name":"甄子丹","age":44}';
var jsonObj = JSON.parse(jsonData);
//访问json对象数组的第一个对象的name属性
console.log(jsonObj.persons[0].name);

浏览器会检查出json中的不合理的代码,并报告错误

所以推荐使用JSON.parse

PS:下面在单独介绍下eval()和JSON.parse()的区别

我们将一个字符串解析成json对象时可以使用两种方法:

假设我们有一个json格式的字符串:

'{
 "student" : [
  {"name":"鸣人","age":17}, 
  {"name":"小樱","age":17},
  {"name":"佐助","age":17}
 ]
}'

然后我们需要把它解析成json对象

1、eval()代码如下:

var data = '{"student" : [{"name":"鸣人","age":17}, {"name":"小樱","age":17},{"name":"佐助","age":17}]}';
eval('(' + data + ')');

2、JSON.parse()代码如下:

var data = '{"student" : [{"name":"鸣人","age":17}, {"name":"小樱","age":17},{"name":"佐助","age":17}]}';
JSON.parse(data);

区别:eval方法不会去检查给的字符串时候符合json的格式~同时如果给的字符串中存在js代码eval也会一并执行~比如如果上面的json格式的字符串改为:(注意红色部分)

var data = '{"student" : [{"name":"鸣人","age":17}, {"name":"小樱","age":alert("hehe")},{"name":"佐助","age":17}]}';

此时执行eval方法后会先弹出一个提示框输出hehe的字符串~

但是使用JSON.parse()就会报错~显示错误信息为当前字符串不符合json格式~即JSON.parse()方法会检查需要转换的字符串是否符合json格式~

相比较而言eval方法是很危险的~特别是当涉及到第三方时我们需要确保传给eval的参数是我们可以控制的~不然里面插入比如window.location~指向一个恶意的连接~那叫叫天啦

从这个层面讲~还是推荐使用JSON.parse来实现json格式字符串的解析

考虑到我们在制造json格式的字符串时极易出现错误~这里推荐一个json格式字符串的在线校验工具:http://jsonlint.com/

Javascript 相关文章推荐
让Firefox支持event对象实现代码
Nov 07 Javascript
javascript 学习笔记(一)DOM基本操作
Apr 08 Javascript
js修改table中Td的值(定义td的单击事件)
Jan 10 Javascript
js获取视频时长代码
Apr 10 Javascript
AngularJS中的Directive实现延迟加载
Jan 25 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
js基于cookie记录来宾姓名的方法
Jul 19 Javascript
js在ie下打开对话窗口的方法小结
Oct 24 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
深入理解AngularJs-scope的脏检查(一)
Jun 19 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
vue实现表格过滤功能
Sep 27 Javascript
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 #Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
Sep 05 #Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 #Javascript
Angular实现下载安装包的功能代码分享
Sep 05 #Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 #Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 #Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 #Javascript
You might like
php解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
Bootstrap精简教程
2015/11/27 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
Express之托管静态文件的方法
2018/06/01 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
Python求导数的方法
2015/05/09 Python
Python实现爬取逐浪小说的方法
2015/07/07 Python
Python实现合并字典的方法
2015/07/07 Python
python队列queue模块详解
2018/04/27 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
解决c++调用python中文乱码问题
2020/07/29 Python
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
英语专业学生的自我评价
2013/12/30 职场文书
2014新课程改革心得体会
2014/03/10 职场文书
挂靠协议书范本
2014/04/22 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
浅谈mysql增加索引不生效的几种情况
2021/06/23 MySQL