JavaScript解析JSON数据的方法详解：eval与JSON.parse对比

JavaScript解析JSON数据概述

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，相较于XML更为简洁。作为JavaScript的原生数据格式，它在JS环境中处理时无需依赖额外的API或工具库。本文将详细介绍如何在JavaScript中解析JSON数据。

首先简要介绍JSON的基础知识。JSON主要包含两种数据结构：对象（Object）和数组（Array）。

对象以左花括号“{”开始，右花括号“}”结束。键值对之间使用冒号“:”分隔，多个键值对之间使用逗号“,”分隔。键名必须用引号包裹，字符串类型的值也必须用引号包裹，而数值类型的值则不需要。例如： var o={"key":"value"}; 数组是值的有序集合，以左中括号“[”开始，右中括号“]”结束，元素之间使用逗号“,”分隔。例如： var array = [{"name":"tom"},{"name":"jake"}]; 在数据传输过程中，JSON以字符串形式传递，而JavaScript操作的是JSON对象。因此，JSON字符串与JSON对象之间的相互转换是核心关键。 JSON字符串示例：var str='{"key":"value"}'; JSON对象示例：var o={"key":"value"};

JSON字符串转对象：eval与JSON.parse对比

1. 将JSON字符串转换为JSON对象

可以使用JavaScript的eval()函数进行解析，具体代码如下：

<script type="text/javascript">
  var json = '{"key":"value","jian":"zhi"}';
  var obj = eval("(" + json + ")");

  console.log(obj);     //控制台返回 Object
  console.log(obj.key);   //控制台返回 value
  console.log(obj.jian);  //控制台返回 zhi

</script>

或者使用JSON.parse()方法进行解析，代码如下：

var json = '{"key":"value","jian":"zhi"}';
var obj =JSON.parse(json);

console.log(obj);     //控制台返回 Object
console.log(obj.key);   //控制台返回 value
console.log(obj.jian);  //控制台返回 zhi

既然这两种方法都能解析JSON字符串，我们应该如何选择呢？在此之前，我们先进行一个测试：

var value = 1;
var jsonstr = '{"name":"jifeng","company":"taobao","value":++value}';
var json1 = eval('('+jsonstr+')');
console.log(json1);         //控制台返回 Object
console.log('value: '+ value);    //控制台返回 value 2

结果令人惊讶，eval()方法竟然会执行JSON字符串中的代码逻辑！

我们再来看一下JSON.parse()方法的表现：

var value = 1;
var jsonstr = '{"name":"jifeng","company":"taobao","value":++value}';

var json2 = JSON.parse(jsonstr);
console.log(json2);
console.log('value: '+ value);     
 //控制台报错Unexpected token + in JSON at position

通过对比，现在应该清楚如何选择解析方法了。

eval()方法存在极大的安全隐患，特别是在解析不可信的第三方数据时，如果数据中嵌入恶意代码，eval()会直接执行，导致严重后果。因此，JSON.parse()是更安全的选择。需要注意的是，部分旧版浏览器可能不支持该方法，此时可以下载json2.js库（地址：https://github.com/douglascrockford/JSON-js/blob/master/json2.js）并引入HTML文件中以提供兼容支持。

此外，还有一个jsonStr.parseJSON()方法也可将JSON字符串转换为JSON对象，该方法同样需要json2.js库的支持。

JSON对象转字符串的方法

2. 将JSON对象转换为JSON字符串

直接看代码示例：

var json = '{"key":"value","jian":"zhi"}';
var obj =JSON.parse(json);

var str=JSON.stringify(obj);
console.log(str);    
//控制台返回 {"key":"value","jian":"zhi"}

这里使用了与JSON.parse()相对的方法JSON.stringify(obj)。

同样，还有一个obj.toJSONString()方法可以将JSON对象转换为JSON字符串，该方法与jsonStr.parseJSON()相对应。

JSON数组的解析与遍历

3. 将JSON字符串数组转换为JSON数组

该转换过程与字符串转对象类似，只是操作JSON数组的方式与操作JSON对象略有不同。参考以下代码：

var arrayStr = '[{"name":"tom","age":"18"},{"name":"jake","age":"20"}]';
var arrayObj =JSON.parse(arrayStr);

console.log(arrayObj);     //控制台返回 Array[2]
console.log(arrayObj[0]);   //控制台返回 Object
console.log(arrayObj[0].name); //控制台返回 tom
console.log(arrayObj[1].age); //控制台返回 20

对于JSON数组，可以通过下标进行访问。由于它是数组类型，也可以通过for循环进行遍历操作。

jQuery中的JSON处理

4. 使用jQuery解析JSON字符串

简要提及jQuery。在使用jQuery的ajax功能时，可以设置dataType属性为json，或者使用$.getJSON()方法获取服务器返回值，该返回值直接为JSON对象，无需额外转换。

当然，jQuery也提供了$.parseJSON(string)函数进行转换，其用法与原生JSON.parse()相同，具体使用方式可根据个人偏好选择。

关于JavaScript解析JSON格式数据的方法详解到此介绍完毕。如需了解更多相关内容，可搜索本站历史文章或继续浏览后续文章，感谢支持！