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 相关文章推荐
JQuery切换显示的效果实例代码
Feb 27 Javascript
JS模块与命名空间的介绍
Mar 22 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
Mar 27 Javascript
Javascript中replace()小结
Sep 30 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
详解JQuery基础动画操作
Apr 12 jQuery
微信小程序组件传值图示过程详解
Jul 31 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 Javascript
微信小程序实现拍照和相册选取图片
May 09 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
php5 mysql分页实例代码
2008/04/10 PHP
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
JS继承 笔记
2011/07/13 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
一文了解Vue中的nextTick
2019/05/06 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
Python实现带百分比的进度条
2016/06/28 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
python学生管理系统开发
2019/01/30 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
详解Python IO口多路复用
2020/06/17 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
佳能法国商店:Canon法国
2019/02/14 全球购物
材料化学应届生求职信
2013/10/09 职场文书
信息管理员岗位职责
2013/12/01 职场文书
大学生学习党课思想汇报
2014/01/03 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
产品包装策划方案
2014/05/18 职场文书
计生个人工作总结
2015/02/28 职场文书
小学教学工作总结2015
2015/05/13 职场文书
技术入股协议书
2016/03/22 职场文书
车辆挂靠协议书
2016/03/23 职场文书
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js