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 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
javascript中json基础知识详解
Jan 19 Javascript
vuejs使用FormData实现ajax上传图片文件
Aug 08 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 Javascript
ES6 Generator基本使用方法示例
Jun 06 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 Javascript
javascript之Object.assign()的痛点分析
Mar 03 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
用header 发送cookie的php代码
2007/03/16 PHP
php查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
jquery click([data],fn)使用方法实例介绍
2013/07/08 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
[01:32]DOTA2次级联赛——首支职业女子战队选拔赛全记录
2014/10/23 DOTA
Python实现选择排序
2017/06/04 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
安全检查验收制度
2014/01/12 职场文书
开工庆典邀请函范文
2014/01/16 职场文书
我有一个梦想演讲稿
2014/05/05 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
2019各种承诺书范文
2019/06/24 职场文书
vue如何清除浏览器历史栈
2022/05/25 Vue.js