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 中的类和闭包
Jan 08 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
Apr 12 Javascript
jquery仿微信聊天界面
May 06 jQuery
Vue学习笔记进阶篇之过渡状态详解
Jul 14 Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
JavaScript中关于class的调用方法
Nov 28 Javascript
Vue组件通信之Bus的具体使用
Dec 28 Javascript
Node.js 的 GC 机制详解
Jun 03 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 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
第三节--定义一个类
2006/11/16 PHP
创建配置文件 用PHP写出自己的BLOG系统 2
2010/04/12 PHP
php中的登陆login实例代码
2016/06/20 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
PHP获取ttf格式文件字体名的方法示例
2019/03/06 PHP
如何实现JS函数的重载
2006/09/22 Javascript
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
基于jquery的simpleValidate简易验证插件
2014/01/31 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
Vue3 响应式侦听与计算的实现
2020/11/11 Javascript
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
python 不以科学计数法输出的方法
2018/07/16 Python
django用户登录验证的完整示例代码
2019/07/21 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
检测浏览器对HTML5和CSS3支持度的方法
2015/06/25 HTML / CSS
百丽国际旗下购物网站:优购
2017/02/28 全球购物
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
战友聚会邀请函
2014/01/18 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
会计求职自荐信
2014/06/20 职场文书
2014年学雷锋活动总结
2014/06/26 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
授权委托书
2014/07/31 职场文书