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 相关文章推荐
基于JQuery框架的AJAX实例代码
Nov 03 Javascript
js 图片等比例缩放代码
May 13 Javascript
javascript实现促销倒计时+fixed固定在底部
Sep 18 Javascript
JS延迟加载加快页面打开速度示例代码
Dec 30 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
微信小程序 animation API详解及实例代码
Oct 08 Javascript
图片懒加载插件实例分享(含解析)
Jan 09 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 Javascript
微信小程序仿通讯录功能
Apr 09 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利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
php操作JSON格式数据的实现代码
2011/12/24 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
初探jquery——表单应用范例
2007/02/20 Javascript
用JS写的一个TableView控件代码
2010/01/23 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
React Native实现简单的登录功能(推荐)
2016/09/19 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
讲解Python中if语句的嵌套用法
2015/05/14 Python
Python文件去除注释的方法
2015/05/25 Python
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
Python中dict和set的用法讲解
2019/03/28 Python
python opencv实现图像边缘检测
2019/04/29 Python
Django集成CAS单点登录的方法示例
2019/06/10 Python
Django如何实现上传图片功能
2019/08/16 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
Python chardet库识别编码原理解析
2020/02/18 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
2014年公务员工作总结
2014/11/18 职场文书
邀请函怎么写
2015/01/30 职场文书
物业公司管理制度
2015/08/05 职场文书
《分数的意义》教学反思
2016/02/20 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书