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的IE和Firefox兼容性集锦
Dec 11 Javascript
一段多浏览器的"复制到剪贴板"javascript代码
Mar 27 Javascript
JQuery EasyUI 对话框的使用方法
Oct 24 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
Angularjs之filter过滤器(推荐)
Nov 27 Javascript
微信小程序 底部导航栏目开发资料
Dec 05 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
Mar 21 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
vue的滚动条插件实现代码
Sep 07 Javascript
vue使用video插件vue-video-player的示例
Oct 03 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仿ZOL分页类代码
2008/10/02 PHP
linux下php上传文件注意事项
2016/06/11 PHP
PHP数据库编程之MySQL优化策略概述
2017/08/16 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
一个可以显示阴历的JS代码
2007/03/05 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
node.js的事件机制
2017/02/08 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
微信小程序实现左滑删除效果
2020/11/18 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
Python中的类与对象之描述符详解
2015/03/27 Python
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
python实现黑客字幕雨效果
2018/06/21 Python
Flask框架信号用法实例分析
2018/07/24 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
Python datetime包函数简单介绍
2019/08/28 Python
opencv3/C++ 平面对象识别&透视变换方式
2019/12/11 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
综合办公室个人的自我评价
2013/12/22 职场文书
倡议书的写法
2014/08/30 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
预备党员半年考察意见
2015/06/01 职场文书