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原生appendChild的bug解决心得分享
Jul 01 Javascript
深入理解Javascript中的循环优化
Nov 09 Javascript
jQuery实现购物车数字加减效果
Mar 14 Javascript
jQuery实现列表的全选功能
Mar 18 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
vue.js todolist实现代码
Oct 29 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
最新最全的手机号验证正则表达式
Feb 24 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编写PDF文档生成器
2006/10/09 PHP
PHP nl2br函数 将换行字符转成 <br>
2009/08/21 PHP
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
浅谈PHP调用Webservice思路及源码分享
2014/06/04 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
JS链式调用的实现方法
2013/03/07 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
在Docker上开始部署Python应用的教程
2015/04/17 Python
python监控文件或目录变化
2016/06/07 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
python实现人像动漫化的示例代码
2020/05/17 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
如何实现jdbc性能优化
2012/07/30 面试题
12岁生日感言
2014/01/21 职场文书
早会主持词
2014/03/17 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
英镑符号 £
2022/02/17 杂记