JavaScript中JSON字符串转对象的方法对比与最佳实践

JSON字符串解析的两种基本方式

在JS中将JSON的字符串解析成JSON数据格式，通常采用两种途径： 1. 借助eval()函数。 2. 利用Function对象进行解析返回。 第一种解析方式：通过eval函数执行解析，并结合jQuery的each方法遍历。 利用jQuery解析JSON数据，作为jQuery异步请求的传输对象，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: '重庆市'},
{name: '6105', value: '渭南市'},
{name: '6106', value: '延安市'},
{name: '6107', value: '汉中市'},
{name: '6108', value: '榆林市'},
{name: '6109', value: '安康市'},
{name: '6110', value: '商洛'}
    ]
}
";

以下将基于jQuery异步请求返回的两种数据类型——JSON对象和JSON字符串，分别介绍这两种方式下的数据处理方法。

使用eval函数解析JSON字符串

1、针对服务器返回的JSON字符串，若jQuery异步请求未指定类型说明，或以字符串形式接收结果，则需进行对象化处理。处理过程并不复杂，只需将该字符串放入eval()中执行一次即可。此外，普通JavaScript获取JSON对象时也可采用此方式，举例如下：

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

为何在eval中需要添加 "("(" + data + ")");" 这部分代码？

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

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

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

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

例如，在编写闭包操作时使用的 (function(){})(); 结构。

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

jQuery异步请求中的JSON处理

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

$.getJSON("http://blog.snsgou.com/", {param: "snsgou"}, function (data) {
// 此处返回的data已经是json对象
// 以下其他操作同第一种情况
$.each(data.root, function (index, item) {
if (index == 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对象。

最佳实践与工具推荐

最终结论：

将JSON字符串转换为JSON对象时，建议使用 (new Function("return " + jsonString))(); 来替代 eval('(' + jsonString + ')');

补充说明：关于JSON操作，此处推荐几款实用的在线JSON工具供参考：

在线JSON代码检验、检验、美化、格式化工具： http://tools.jb51.net/code/json

JSON在线格式化工具： http://tools.jb51.net/code/jsonformat

在线XML/JSON互相转换工具： http://tools.jb51.net/code/xmljson

json代码在线格式化/美化/压缩/编辑/转换工具： http://tools.jb51.net/code/jsoncodeformat

在线json压缩/转义工具：

http://tools.jb51.net/code/json_yasuo_trans

C语言风格/HTML/CSS/json代码格式化美化工具： http://tools.jb51.net/code/ccode_html_css_json