JavaScript中JSON转换与解析的多种方法详解

本文通过具体实例，详细阐述JavaScript中JSON数据的转换与解析实现方式，供开发者参考学习。

JavaScript原生JSON解析示例

首先定义如下格式的JSON数据：

var json = { 'jquery': [{ "id": "1", "type": "ASP.NET", "title": "JSON全解析"}] }
    alert(json.jquery[0].id);
    alert(json.jquery[0].type);
    alert(json.jquery[0].title);

接下来演示如何使用JavaScript原生方式解析上述JSON数据：

window.onload = function() {
 var json = { "China": "[{'City':'上海','value':'1'},{'City':'南京','value':'2'},{'City':'杭州','value':'3'},{'City':'武汉','value':'4'}]" }
 var datas = eval(json.China);
 for (var i = 0; i < datas.length; i++) 
 {
  alert(datas[i].City);
  alert(datas[i].value);
 }
}

jQuery解析JSON数据方法

此外，补充介绍基于jQuery库解析JSON的常用方法：

主要思路是利用eval函数进行解析，并结合jQuery的each方法完成数据遍历。

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

首先提供一组JSON字符串集合，内容如下：

var data=" 
{ 
root: 
[ 
  {name:'1',value:'0'}, 
  {name:'6101',value:'北京市'}, 
  {name:'6102',value:'天津市'}, 
  {name:'6103',value:'上海市'}, 
  {name:'6104',value:'重庆市'}, 
]
}"; 

本文以jQuery异步请求返回的两种数据类型——JSON对象和JSON字符串为例，分别介绍这两种情况下的结果处理策略。

eval函数解析原理与安全分析

eval()函数解析法

针对服务器返回的JSON字符串，若jQuery异步请求未指定类型说明，或以字符串形式接收，则需进行对象化处理。操作并不复杂，核心是将该字符串放入eval()中执行一次。此方法同样适用于普通JavaScript环境下获取JSON对象的场景，具体示例如下：

// 转换为json对象
var dataObj=eval("("+data+")");

为何在eval中需要添加 ("("+data+")"); 这一操作？

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

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

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

这种写法在JavaScript中十分常见，例如在编写闭包操作时使用的 (function(){}()) 形式。

//输出root的子对象数量 
alert(dataObj.root.length);
$.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对象处理

以下是服务器返回的JSON字符串示例：

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

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

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

Function对象解析方式

另一种解析方式是使用Function对象，其典型应用场景包括jQuery中AJAX方法的success回调函数里对返回数据data的解析。

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

此时，变量data将被解析为一个JSON对象。

希望本文所述内容能对各位JavaScript程序设计人员有所帮助。