JS使用eval解析JSON的注意事项分析

本文深入探讨了在JavaScript中使用eval函数解析JSON字符串时的关键注意事项。内容旨在为开发者提供实用的参考建议。

JSON解析的两种主要方式

在JavaScript中，将JSON格式的字符串转换为JSON对象通常有两种主要方法。

第一种方法是借助eval()函数进行解析。

第二种方法则是利用Function对象来实现解析过程。

使用eval函数解析JSON

接下来将演示如何使用eval函数进行解析，并结合jQuery的each方法遍历数据。

在jQuery中解析JSON数据时，若将其作为异步请求的传输对象，服务器返回的结果通常为JSON对象。本文主要关注服务器返回JSON格式字符串的情况，对于使用JSONObject等插件封装的JSON对象，处理方式类似，此处不再赘述。

首先提供一组JSON字符串示例，具体内容如下。

相关代码展示如下。

var data="
{
root:
[
{name:'1',value:'0'},
{name:'6101',value:'北京市'},
{name:'6102',value:'天津市'},
{name:'6103',value:'上海市'},
{name:'6104',value:'重庆市'},
{name:'6105',value:'渭南市'},
{name:'6106',value:'延安市'},
{name:'6107',value:'汉中市'},
{name:'6108',value:'榆林市'},
{name:'6109',value:'安康市'},
{name:'6110',value:'商洛市'}
]
}";

基于jQuery异步请求返回的数据类型（JSON对象或字符串），分别介绍两种情况下的数据处理方式。

1. 若服务器返回的是JSON字符串，且jQuery异步请求未指定类型说明，或以字符串形式接收数据，则需要进行对象化处理。具体操作并不复杂，只需将该字符串放入eval()中执行一次即可。这种方法同样适用于普通JavaScript环境下获取JSON对象，举例说明如下。

var dataObj=eval("("+data+")");//转换为json对象
Red rose为什么要 eval这里要添加 “("("+data+")");//”呢？

原因在于eval函数本身的特性。由于JSON以“{}”开始和结束，在JavaScript中，这会被解析为语句块。因此，必须强制将其转换为表达式。

添加外层圆括号的目的是迫使eval函数在处理JavaScript代码时，将括号内的内容视为表达式（expression）而非语句（statement）。例如，对象字面量{}若不加外层括号，eval会将其识别为代码块的开始和结束标记，导致执行空语句。因此，以下两种执行结果存在差异。

alert(eval("{}"); // return undefined
alert(eval("({})");// return object[Object]

这种写法在JavaScript中十分常见。

例如：(function() {})(); 在闭包操作中经常见到此类用法。

alert(dataObj.root.length);//输出root的子对象数量 
$.each(dataObj.root,fucntion(idx,item){ 
if(idx==0){ 
return true; 
} 
//输出每个root子对象的名称和值 
alert("name:"+item.name+",value:"+item.value); 
})

注：对于普通JavaScript生成JSON对象，只需将$.each()方法替换为for循环语句即可，其他逻辑保持不变。

jQuery异步请求中的JSON处理

2. 若服务器返回的JSON字符串在jQuery异步请求中，type配置项被设置为“json”，或利用$.getJSON()方法获取服务器返回数据，则无需使用eval()方法。因为此时得到的结果已经是JSON对象，直接调用该对象即可。以下以$.getJSON方法为例说明数据处理流程。

$.getJSON("http://www.phpzixue.cn/",{param:"gaoyusi"},function(data){ 
//此处返回的data已经是json对象 
//以下其他操作同第一种情况 
$.each(data.root,function(idx,item){ 
if(idx==0){ 
return true;//同countinue，返回false同break 
} 
alert("name:"+item.name+",value:"+item.value); 
}); 
});

需要特别注意的是，方式1中的eval()方法会动态执行其中的字符串（可能包含JavaScript脚本），这极易引发系统安全问题。因此，建议采用规避eval()的第三方客户端脚本库，例如“JSON in JavaScript”提供的脚本库，其体积不足3k。

使用Function对象解析JSON

第二种解析方式是利用Function对象完成，其典型应用场景包括jQuery中AJAX方法的success回调中对返回数据data的解析。

var json='{"name":"CJ","age":18}';
data =(new Function("","return "+json))();

此时的data将被解析为一个JSON对象。

希望本文的阐述能对JavaScript程序设计有所帮助。