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实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
收集json解析的四种方法分享
Jan 17 Javascript
全面解析多种Bootstrap图片轮播效果
May 27 Javascript
js重写方法的简单实现
Jul 10 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
微信小程序 页面跳转如何实现传值
Apr 05 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
javascript使用正则实现去掉字符串前面的所有0
Jul 23 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
javascript实现前端分页效果
Jun 24 Javascript
vue实现简单数据双向绑定
Apr 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
第八节--访问方式
2006/11/16 PHP
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
简单实用的PHP文本缓存类实例
2019/03/22 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
详解JavaScript时间格式化
2015/12/23 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
jquery+css实现下拉列表功能
2017/09/03 jQuery
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
Python any()函数的使用方法
2019/10/28 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
django 模型字段设置默认值代码
2020/07/15 Python
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
Java基础面试题
2014/07/19 面试题
应届毕业生的个人自我鉴定
2013/10/24 职场文书
致短跑运动员广播稿
2014/01/09 职场文书
电力安全事故反思
2014/04/27 职场文书
环境科学专业求职信
2014/08/04 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
详解MySQL连接挂死的原因
2021/05/18 MySQL
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python