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教程
Jun 09 Javascript
javascript 得到变量类型的函数
May 19 Javascript
Javascript学习笔记二 之 变量
Dec 15 Javascript
jquery对表单操作2
Apr 06 Javascript
jQuery UI 实现email输入提示实例
Aug 15 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
Sep 09 Javascript
用webpack4开发小程序的实现方法
Jun 04 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 Javascript
vue+django实现下载文件的示例
Mar 24 Vue.js
详解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
mysql5详细安装教程
2007/01/15 PHP
PHP daddslashes 使用方法介绍
2012/10/26 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
图片之间的切换
2006/06/26 Javascript
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
js判断字符长度及中英文数字等
2014/03/19 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
python使用range函数计算一组数和的方法
2015/05/07 Python
python抽象基类用法实例分析
2015/06/04 Python
python基础之入门必看操作
2017/07/26 Python
python实现在pandas.DataFrame添加一行
2018/04/04 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
python实现代码统计程序
2019/09/19 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
Python接口自动化测试的实现
2020/08/28 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
英国电子专家:maplin
2019/09/04 全球购物
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
十岁生日同学答谢词
2014/01/19 职场文书
医院营销工作计划
2015/01/16 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书