JS/JavaScript中解析JSON --- JSON.parse()、JSON.stringify()以及$.parseJSON()使用详解
现在JSON格式在web开发中非常重要，特别是在使用ajax开发项目的过程中，经常需要将后端响应的JSON格式的字符串返回到前端，前端解析成JS对象值（JSON 对象），再对页面进行渲染。在数据传输过程中，JSON是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。
一、JSON对象（Object）和JSON字符串（String）例如：
JSON字符串（首尾字符串带引号）:
varstr1='[{"name":"chunlynn","sex":"man"},{"name":"linda","sex":"wowen"}]';varjsonstr ='{"name":"chunlynn","sex":"man"}';
JSON对象（JS对象值）（首尾不带引号）:
varobj=[{"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(){//双引号转义//vardata="{\"name\":\"chunlynn\",\"age\":27,\"sex\":\"man\",\"qq\":\"277539687\"}"; //单引号放在最外面，就不用转义了，数字类型不用加引号vardata='{"name":"chunlynn","age":27,"sex":"man","qq":"277539687"}';varjsondata=$.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类型:"+typeofjsondata.age);console.info("qq的JS类型:"+typeofjsondata.qq);});
我们通过chrome浏览器控制台查看打印的结果：
可以看到，var jsondata = $.parseJSON(data)这行代码将JSON字符串转化为了一个Object对象，JSON字符串内的键名成为了Object对象的属性名，我们就可以使用jsondata.name或者jsondata["name"]这样的形式来获取对应的值。同时可以看到属性的类型，age为number类型，qq为string类型。
② 如果我们解析的JSON字符串是JSON数组的形式，则有所不同，如：
程序清单2：
$(document).ready(function(){
//双引号转义//vardata="[{\"name\":\"chunlynn\",\"age\":27,\"qq\":\"277539687\"}, {"name":"linda","age":25,"qq":"123456789"}]";//单引号放在最外面，就不用转义了.vardata='[{"name":"chunlynn","age":27,"qq":"277539687"}, {"name":"linda","age":25,"qq":"123456789"}]';//同上放在一行varjsondata=$.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(jsondatainstanceofArray); //trueconsole.info("jsondata[0]的JS类型:"+typeofjsondata[0]);console.info("age的JS类型:"+typeofjsondata[0].age);console.info("qq的JS类型:"+typeofjsondata[0].qq);});
打印的结果为一个数组Array，数组的每一个元素都是一个Object对象，我们取值时就要写成jsondata[0].name的形式。
2）浏览器支持的转换方式JSON.parse(jsonstr)和JSON.stringify(jsonobj)： 只支持IE8/Firefox3.5+/Chrome4/Safari4/Opera10 以上版本，这些浏览器都已经接近W3C标准，默认实现了JSON.parse(jsonstr)和JSON.stringify(jsonobj)方法。
这两个浏览器默认实现了的方法，本来是JSON官方的api，ECMA-262(E3)/ECMAScript E3中没有将JSON概念写到标准中，在ECMAScript5中JSON的概念被正式引入了，包括全局的JSON对象。
① JSON.parse(jsonstr); //可以将JSON字符串反序列化成JSON对象
举例：同上$.parseJSON(str)的例子，参考程序清单1和程序清单2，结果也一样。 程序清单3：
$(document).ready(function(){
vardata='[{"name":"chunlynn","age":27,"qq":"277539687"}, {"name":"linda","age":25,"qq":"123456789"}]';//同上放在一行varjsondata=JSON.parse(data);console.info(jsondata);console.info("姓名:"+jsondata[0].name);console.info("年龄:"+jsondata[0].age);console.info("qq:"+jsondata[0].qq);
console.info("qq:"+jsondata[0]["qq"]);console.info(jsondatainstanceofArray); //trueconsole.info("jsondata[0]的JS类型:"+typeofjsondata[0]);console.info("age的JS类型:"+typeofjsondata[0].age); //numberconsole.info("qq的JS类型:"+typeofjsondata[0].qq); //string
});
结果：
② JSON.stringify(jsonobj); //可以将JSON对象序列化成JSON对符串程序清单4：
$(document).ready(function(){
// JS对象，数组对象
vardata=[{"name":"chunlynn","age":27,"qq":"277539687"}, {"name":"linda","age":25,"qq":"123456789"}]; //同上行放在一行console.info("data的JS类型:"+typeofdata);varjsondata=JSON.stringify(data); //将JSON对象序列化为JSON字符串console.info(jsondata);console.info("jsondata的JS类型:"+typeofjsondata);});
结果：
可以看到，JSON对象已经被序列化成JSON字符串了。类型为string了。注意：ie8(兼容模式),ie7和ie6没有JSON对象，推荐采用JSON官方的方式，引入json3.js。 json.js已淘汰，json2.js正在淘汰中...，这个两个json包现在不建议使用了，建议使用json3.js。
实战代码：
//导出报表数据到excelfunctionexportReportExcel(fileName){varresult={};result.titles=getTitles();result.contents=getContents();$("#exportReportFileName").val(fileName);$("#exportReportData").val(JSON.stringify(result));$("#exportReportForm").submit();}
3） Javascript原生支持的转换方式：
① eval('(' + jsonstr + ')');//可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号
注：ie8(兼容模式),ie7和ie6也可以使用eval()将字符串转为JSON对象，但不推荐这些方式，这种方式不安全，eval会执行json串中的表达式。
②(new Function("return " + str))();var json = (new Function("return " + str))();
return json;
4） JSON官方的转换方式：
JSON官方（/）提供了一个json3.js，提供了JSON的序列化和反序列化方法，可以将一个JSON对象转换成JSON字符串，也可以将一个JSON字符串转换成一个JSON对象。这样ie8(兼容模式)，ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法；
JSON 3是与各种JavaScript平台兼容的现代JSON实现，包括Internet Explorer 6，Opera 7，Safari 2和Netscape 6.当前版本是3.3.2。 可以在https://bestiejs.github.io/json3/获取到这个js. 现在一般用json3.jsjson3.js本地下载地址：/download/chenchunlin526/10170731使用方法：使用该js包，需要在页面引入json3.js文件。
JSON.parse(jsonstr); //可以将JSON字符串反序列化成JSON对象JSON.stringify(jsonobj); //可以将JSON对象序列化成JSON对符串使用方法同浏览器支持的转换方法相同，参考本节第2点。
更多的使用方法如下：
<%@pagelanguage="java"contentType="text/html;charset=utf-8"pageEncoding="utf-8"%><html><head><scriptsrc="/json3/3.3.2/json3.js"></script><scriptsrc="/jquery/1.11.2/jquery.js"></script></head><body><scripttype="text/javascript">$(document).ready(function(){//双引号转义//vardata="[{\"name\":\"chunlynn\",\"age\":27,\"qq\":\"277539687\"},{"name":"linda","age":25,"qq":"556677"}]";//单引号放在最外面，就不用转义了vardata='[{"name":"chunlynn","age":27,"qq":"277539687"},{"name":"linda","age":25,"qq":"556677"}]';varjsondata=JSON.parse(data);console.info(jsondata);console.info("姓名:"+jsondata[0].name);console.info("年龄:"+jsondata[0].age);console.info("qq:"+jsondata[0].qq);console.info(jsondatainstanceofArray);console.info("jsondata[0]的JS类型:"+typeofjsondata[0]);console.info("age的JS类型:"+typeofjsondata[0].age);console.info("qq的JS类型:"+typeofjsondata[0].qq);varjsondata2=JSON.parse(data,function(key,value){if(typeofvalue=="number"){value=value+1000;}returnvalue;});console.info("姓名2:"+jsondata2[0].name);console.info("年龄2:"+jsondata2[0].age);console.info("qq2:"+jsondata2[0].qq);});</script></body></html>
结果：
三、总结：1、如果要使用 JSON.parse(str) 和 JSON.stringify(obj) 方法转换JSON，建议引入json3.js包，因为低版本的浏览器中没有实现本地的 JSON.parse(str)和JSON.stringify(obj)。
2、推荐用jQuery的$.parseJSON(jsonstr)来解析JSON字符串为JSON对象（JS对象）。请传入正确的JSON字符串，因为传入格式有误的 JSON 字符串可能导致抛出异常。从jQuery 3.0开始，不推荐使用$.parseJSON。 要解析JSON字符串，请改用原生的 JSON.parse 方法。
3、不管用哪个方法解析JSON字符串，都要求指定的字符串必须符合严格的JSON格式。例如：属性名称必须加双引号、字符串值也必须用双引号。否则可能会抛出异常。
最后再来看看$.parseJSON(str)的源码(中文是自己注释的)：
parseJSON:function(data){
//如果参数为空或参数类型不是string,则返回nullif(!data||typeofdata!=="string"){returnnull;}//Makesureleading/trailingwhitespaceisremoved(IEcan'thandleit)data=jQuery.trim(data);//去掉字符串首尾空格//AttempttoparseusingthenativeJSONparserfirst//使用浏览器提供的JSON解析函数来解析JSON字符串if(window.JSON&&window.JSON.parse){returnwindow.JSON.parse(data);}//MakesuretheincomingdataisactualJSON//Logicborrowedfrom/json2.js/*使用正则表达式判断JSON字符串格式是否正确rvalidchars=/^[\],:{}\s]*$/,rvalidbraces=/(?:^|:|,)(?:\s*\[)+/g,rvalidescape=/\\(?:["\\\/bfnrt]|u[\da-fA-F]{4})/g,rvalidtokens=/"[^"\\\r\n]*"|true|false|null|-?(?:\d\d*\.|)\d+(?:[eE][\-+]?\d+|)/g*/if(rvalidchars.test(data.replace(rvalidescape,"@").replace(rvalidtokens,"]").replace(rvalidbraces,""))){//使用原生的jsFunction()方法解析json字符串return(newFunction("return"+data))();}jQuery.error("InvalidJSON:"+data);}
如果浏览器提供了一个本地的JSON.parse()方法，则jQuery将使用它来解析JSON字符串。
资源下载： 【1】json3.js 【JS / JavaScript 中解析JSON的js包，JSON官方的JSON解析包】-CSDN下载
/download/chenchunlin526/10170731
如果觉得对你有帮助就顶一个吧！
如果觉得《JS/JavaScript中解析JSON --- JSON.parse() JSON.stringify()以及$.parseJSON()使用详解》对你有帮助，请点赞、收藏，并留下你的观点哦！
