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 相关文章推荐
Mootools 1.2教程 类(一)
Sep 15 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
基于jquery的滚动鼠标放大缩小图片效果
Oct 27 Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
javascript实现网站加入收藏功能
Dec 16 Javascript
javascript自定义滚动条实现代码
Apr 20 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 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
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
PHP的FTP学习(二)[转自奥索]
2006/10/09 PHP
将RTF格式的文件转成HTML并在网页中显示的代码
2006/10/09 PHP
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
phpmail类发送邮件函数代码
2012/02/20 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
微信支付开发维权通知实例
2016/07/12 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
javascript 新浪背投广告实现代码
2009/07/07 Javascript
鼠标事件延时切换插件
2011/03/12 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
JavaScript中为事件指定处理程序的五种方式分析
2018/07/27 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
详解Python中的序列化与反序列化的使用
2015/06/30 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
Ruby如何进行文件操作
2014/07/17 面试题
商家认证委托书格式
2014/10/16 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
英语教学课后反思
2016/02/15 职场文书
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android
python 镜像环境搭建总结
2022/09/23 Python