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 相关文章推荐
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
May 08 Javascript
判断ie的两种简单方法
Aug 12 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
基于Jquery代码实现手风琴菜单
Nov 19 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 Javascript
Vue路由权限控制解析
Nov 09 Javascript
小程序实现点击tab切换左右滑动
Nov 16 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数字游戏 计算24算法
2012/06/10 PHP
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
PHP中feof()函数实例测试
2014/08/23 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
yii2使用ajax返回json的实现方法
2016/05/14 PHP
利用php_imagick实现复古效果的方法
2016/10/18 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
javascript 数组操作详解
2015/01/29 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
js实现批量删除功能
2020/08/27 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Eclipse + Python 的安装与配置流程
2013/03/05 Python
python列表操作实例
2015/01/14 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
Django ORM多对多查询方法(自定义第三张表&ManyToManyField)
2019/08/09 Python
python实现画循环圆
2019/11/23 Python
python 元组和列表的区别
2020/12/30 Python
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
What is the purpose of Void class? Void类的作用是什么?
2016/10/31 面试题