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 相关文章推荐
游戏人文件夹程序 ver 3.0
Jul 14 Javascript
Javascript 获取LI里的内容
Dec 17 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
简单掌握JavaScript中const声明常量与变量的用法
May 21 Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
Nov 03 Javascript
详解Javascript 中的 class、构造函数、工厂函数
Dec 20 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 Javascript
Vue ​v-model相关知识总结
Jan 28 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
php单例模式实现方法分析
2015/03/14 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
js实现3d悬浮效果
2017/02/16 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
微信小程序换肤功能实现代码(思路详解)
2020/08/25 Javascript
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
python文件和目录操作方法大全(含实例)
2014/03/12 Python
python自动格式化json文件的方法
2015/03/11 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
Django框架实现的普通登录案例【使用POST方法】
2019/05/15 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
selenium判断元素是否存在的两种方法小结
2020/12/07 Python
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
外语学院毕业生的自我鉴定
2013/11/28 职场文书
银行工作检查书范文
2014/01/31 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
建筑结构施工求职信
2014/07/11 职场文书
大学生英文求职信范文
2015/03/19 职场文书
情况说明书格式及范文
2019/06/24 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
MySQL如何解决幻读问题
2021/08/07 MySQL
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server