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 相关文章推荐
FCK调用方法..
Dec 21 Javascript
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
Nov 30 Javascript
Bootstrap树形控件使用方法详解
Jan 27 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
微信小程序中使用echarts的实现方法
Apr 24 Javascript
浅析JavaScript中的变量提升
Jun 01 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一些服务器端特性的配置加强php的安全
2006/10/09 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
php微信开发之关注事件
2018/06/14 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
跟老齐学Python之模块的加载
2014/10/24 Python
Python实现简单登录验证
2016/04/13 Python
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
Python中的Numpy矩阵操作
2018/08/12 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
澳大利亚著名的纺织品品牌:Canningvale
2020/05/05 全球购物
学生安全教育材料
2014/02/14 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书