脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → json 在js中的使用

JSON在Javascript中的使用（eval和JSON.parse的区别）详细解析

 更新时间：2017年09月05日 09:44:39   作者：babulongbo  
这篇文章主要介绍了JSON在Javascript中的使用以及eval和JSON.parse的区别详细解析,本文对eval()和JSON.parse()的区别介绍的非常详细，需要的朋友可以参考下

 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实现更换头像功能

    这篇文章主要为大家详细介绍了JavaScript实现更换头像功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 详解webpack的配置文件entry与output

    详解webpack的配置文件entry与output

    本篇文章主要介绍了webpack的配置文件entry与output，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • webpack v4 从dev到prd的方法

    webpack v4 从dev到prd的方法

    这篇文章主要介绍了webpack v4 从dev到prd的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • JavaScrip数组删除特定元素的几种方法总结

    JavaScrip数组删除特定元素的几种方法总结

    从js数组中删除指定元素是我们每个人都遇到的问题，网上这方面的资料也很多，但有的时间过于久远，有的内容不够全面，所以自己来整理下，这篇文章主要给大家总结介绍了关于JavaScrip数组删除特定元素的多种方法，需要的朋友可以参考下。
    2017-09-09
  • JS图片预加载 JS实现图片预加载应用

    JS图片预加载 JS实现图片预加载应用

    由于图片加载慢，导致用户体验特别差，本文将介绍一种图片预加载技术，需要了解的朋友可以参考下
    2012-12-12
  • JavaScript创建闭包的两种方式的优劣与区别分析

    JavaScript创建闭包的两种方式的优劣与区别分析

    这篇文章主要介绍了JavaScript创建闭包的两种方式的优劣与区别分析的相关资料,需要的朋友可以参考下
    2015-06-06
  • JS常见问题之为什么点击弹出的i总是最后一个

    JS常见问题之为什么点击弹出的i总是最后一个

    最近有很多朋友问我，为什么点击弹出的i总是最后一个，于是抽时间写了这篇文章，特此分享到脚本之家平台，供大家参考
    2016-01-01
  • JavaScript常用脚本汇总（二）

    JavaScript常用脚本汇总（二）

    本文给大家分享的javascript常用脚本有把JavaScript中的伪数组转换为真数组、JavaScript设置主页功能、JavaScript收藏功能、javascript检测元素是否支持某个属性代码、创建和使用命名空间，有需要的小伙伴们快来看看吧。
    2015-03-03
  • 浅谈js中test()函数在正则中的使用

    浅谈js中test()函数在正则中的使用

    下面小编就为大家带来一篇浅谈js中test()函数在正则中的使用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • JS验证码实现代码

    JS验证码实现代码

    本文通过实例代码给大家分享基于javascript实现的验证码功能，非常不错，具有参考借鉴价值，需要的朋友参考下吧
    2017-09-09

最新评论