欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-29 08:11:14
 json 和xml比较 json的长度和xml比起来更加短小 json读取速度更快 json可以使用javascript的内置方法直接进行解析,转化成ja...

 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格式字符串的在线校验工具: