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 相关文章推荐
JS作为值的函数用法示例
Jun 20 Javascript
jquery 实现回车登录详解及实例代码
Oct 23 Javascript
浅述Javascript的外部对象
Dec 07 Javascript
jQuery实现表格元素动态创建功能
Jan 09 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
JS中实现函数return多个返回值的实例
Feb 21 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
详解Vuex下Store的模块化拆分实践
Jul 31 Javascript
关于layui时间回显问题的解决方法
Sep 24 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
详解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生成带有雪花背景的验证码
2008/09/28 PHP
php中cookie的使用方法
2014/03/29 PHP
php实现将Session写入数据库
2015/07/26 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
深入领悟JavaScript中的面向对象
2013/11/18 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
javascript 作用于作用域链的详解
2017/09/27 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
python逆向入门教程
2018/01/15 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
python3.7调试的实例方法
2020/07/21 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
Python实现自动整理文件的脚本
2020/12/17 Python
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
英国钻石公司:British Diamond Company
2020/02/16 全球购物
英语文学专业学生的自我评价
2013/10/31 职场文书
售后求职信范文
2014/03/15 职场文书
党支部活动策划方案
2014/08/18 职场文书
2014年体育工作总结
2014/11/24 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python