在JS/JavaScript中解析JSON --- JSON.parse()、JSON.stringify()以及$.parseJSON()使用

现在JSON格式在web开发中非常重要，特别是在使用ajax开发项目的过程中，经常需要将后端响应的JSON格式的字符串返回到前端，前端解析成JS对象值（JSON 对象），再对页面进行渲染。

在数据传输过程中，JSON是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。

一、JSON对象（Object）和JSON字符串（String）

例如：

JSON字符串（首尾字符串带引号）:

var str1 = '[{"name":"chunlynn","sex":"man" },{ "name":"linda","sex":"wowen"}]'; 

var jsonstr ='{"name":"chunlynn","sex":"man"}'; 

JSON对象（JS对象值）（首尾不带引号）:

var obj = [{"name":"chunlynn","sex":"man" },{"name":"linda","sex":"wowen"}];

二、解析JSON数据的四种方法

「解析」：将JSON格式的字符串转化成JSON对象（JS对象值）的过程。也称为「反序列化」。

「序列化」：就是说把原来是对象的类型转换成字符串类型（或者更确切的说是JSON字符串类型的）。

1、jQuery的 $.parseJSON(data) 转换方式： 

描述: 接受一个标准格式的 JSON 字符串，并返回解析后的 JavaScript 值。

var jsonObj = $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),将JSON字符串反序列化成JSON对象

① 使用一段标准JSON字符串做为测试用例 

程序清单1：

$(document).ready(function(){

//双引号转义

    //var data = "{\"name\":\"chunlynn\" ,\"age\": 27, \"sex\": \"man\" ,\"qq\":\"277539687\"}"; 

//单引号放在最外面，就不用转义了，数字类型不用加引号

    var data = '{"name":"chunlynn" ,"age": 27, "sex": "man" ,"qq":"277539687"}'; 

    var jsondata = $.parseJSON(data);

    console.info(jsondata);

    console.info("姓名:"+jsondata.name);

    console.info("年龄:"+jsondata.age);

    console.info("性别:"+jsondata.sex);

    console.info("qq:"+jsondata.qq); // console.info("qq:"+jsondata["qq"]);也行

    console.info("age的JS类型: "+ typeof jsondata.age);

    console.info("qq的JS类型: "+ typeof jsondata.qq);

});

我们通过chrome浏览器控制台查看打印的结果： 

可以看到，var jsondata = $.parseJSON(data)这行代码将JSON字符串转化为了一个Object对象，JSON字符串内的键名成为了Object对象的属性名，我们就可以使用 jsondata.name 或者 jsondata["name"] 这样的形式来获取对应的值。同时可以看到属性的类型，age为number类型，qq为string类型。

② 如果我们解析的JSON字符串是JSON数组的形式，则有所不同，如： 

程序清单2：

 $(document).ready(function(){

    //双引号转义

    //var data = "[{\"name\":\"chunlynn\",\"age\": 27,\"qq\":\"277539687\"},

{"name":"linda","age":25,"qq":"123456789"}]"; 

    //单引号放在最外面，就不用转义了.

    var data = '[{"name":"chunlynn","age": 27,"qq":"277539687"},

{"name":"linda" ,"age": 25,"qq":"123456789"}]';  //同上放在一行

    var jsondata = $.parseJSON(data);

    console.info(jsondata);

    console.info("姓名:"+jsondata[0].name);

    console.info("年龄:"+jsondata[0].age);

    console.info("性别:"+jsondata[0].sex);

    console.info("qq:"+jsondata[0].qq);

console.info("qq:"+jsondata[0]["qq"]);

    console.info(jsondata instanceof Array); //true

    console.info("jsondata[0]的JS类型: "+ typeof jsondata[0]);

    console.info("age的JS类型: "+ typeof jsondata[0].age);

    console.info("qq的JS类型: "+ typeof jsondata[0].qq);

});

打印的结果为一个数组Array，数组的每一个元素都是一个Object对象，我们取值时就要写成 jsondata[0].name 的形式。