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 parseInt 函数分析(转)
Mar 21 Javascript
JavaScript 面向对象编程(2) 定义类
May 18 Javascript
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
Vue watch响应数据实现方法解析
Jul 10 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 mkdir()定义和用法
2009/01/14 PHP
php xml文件操作实现代码(二)
2009/03/20 PHP
简单介绍win7下搭建apache+php+mysql开发环境
2015/08/06 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
Z-Blog中用到的js代码
2007/03/15 Javascript
Javascript 写的简单进度条控件
2008/01/22 Javascript
javascript一点特殊用法
2008/05/28 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
财务工作个人求职的自我评价
2013/12/19 职场文书
小区停车场管理制度
2014/01/27 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
PyTorch device与cuda.device用法
2022/04/03 Python