JSON （JavaScript Object Notation）是一種簡(jiǎn)單的數(shù)據(jù)格式，比xml更輕巧。 它是 JavaScript 原生格式，這意味著在 JavaScript 中處理 JSON 數(shù)據(jù)不需要任何特殊的 API 或工具包。那么如何用JavaScript來(lái)解析json呢？

首先，科普一下json。在json中，有兩種結(jié)構(gòu)：對(duì)象和數(shù)組。

一個(gè)對(duì)象以“{”（左括號(hào)）開(kāi)始，“}”（右括號(hào)）結(jié)束。每個(gè)“名稱”后跟一個(gè)“:”（冒號(hào)）；“‘名稱/值' 對(duì)”之間運(yùn)用 “,”（逗號(hào)）分隔。 名稱用引號(hào)括起來(lái)；值如果是字符串則必須用括號(hào)，數(shù)值型則不須要。例如：
var o={“key”:”value”};
數(shù)組是值（value）的有序集合。一個(gè)數(shù)組以“[”（左中括號(hào)）開(kāi)始，“]”（右中括號(hào)）結(jié)束。值之間運(yùn)用 “,”（逗號(hào)）分隔。
var array = [{“name”:”tom”},{“name”:”jake”}];
在數(shù)據(jù)傳輸流程中，json是以字符串的形式傳遞的，而JS操作的是JSON對(duì)象，所以，JSON對(duì)象和JSON字符串之間的相互轉(zhuǎn)換是關(guān)鍵。
json字符串：var str='{“key”:”value”}';
json對(duì)象：var o={“key”:”value”};

1. json字符串轉(zhuǎn)化為json對(duì)象

可以通過(guò)JavaScript的eval()函數(shù)來(lái)進(jìn)行解析，代碼如下：

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

  console.log(obj);     //控制臺(tái)返回 Object
  console.log(obj.key);   //控制臺(tái)返回 value
  console.log(obj.jian);  //控制臺(tái)返回 zhi

</script>

或者通過(guò)JSON.parse（）方法來(lái)解析，代碼如下：

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

console.log(obj);     //控制臺(tái)返回 Object
console.log(obj.key);   //控制臺(tái)返回 value
console.log(obj.jian);  //控制臺(tái)返回 zhi

既然這兩種方法都可以解析json字符串，那么我們究竟使用哪種呢？在這之前，我們先來(lái)做一個(gè)測(cè)試：

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

我的天，evel方法竟然會(huì)執(zhí)行json字符串里的代碼?。?/p>

我們?cè)倏匆幌翵SON.parse()方法：

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

var json2 = JSON.parse(jsonstr);
console.log(json2);
console.log('value: '+ value);     
 //控制臺(tái)報(bào)錯(cuò)Unexpected token + in JSON at position

現(xiàn)在知道怎么選擇了吧。

eval()方法是極其不安全的，尤其是在解析第三方數(shù)據(jù)的時(shí)候，萬(wàn)一第三方數(shù)據(jù)給你加點(diǎn)惡意代碼什么的你不就完了么？所以，JSON.parse()才是正確的選擇，當(dāng)然，有些瀏覽器不支持這個(gè)方法，
可以到https://github.com/douglascrockford/JSON-js/blob/master/json2.js 下載json2.js,添加到你的hlml中就可以了。

除此之外還有一個(gè) jsonStr.parseJSON()的方法，也可以將json字符串轉(zhuǎn)化為json對(duì)象，同樣需要json2.js包的支持。

2.json對(duì)象轉(zhuǎn)化為json字符串

話不多說(shuō)，先看代碼：

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

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

這里我們用到了和JSON.parse(str) 相對(duì)應(yīng)的方法JSON.stringify(obj)。

同樣，還有一個(gè)方法叫做obj.toJSONString()也可以將json對(duì)象轉(zhuǎn)化為json字符串，與 jsonStr.parseJSON()相對(duì)應(yīng)。

3.json字符數(shù)組轉(zhuǎn)化為json數(shù)組

這個(gè)轉(zhuǎn)化和字符串轉(zhuǎn)對(duì)象是一樣的，只是操作json數(shù)組的方式與操作json對(duì)象的方式稍有不同而已?？匆欢未a：

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

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

對(duì)于json數(shù)組，可以通過(guò)下標(biāo)來(lái)進(jìn)行訪問(wèn)。由于它是一個(gè)數(shù)組，所以也可以通過(guò)for循環(huán)進(jìn)行遍歷。

4.jquery解析json字符串

簡(jiǎn)單地提一下jquery。在使用jquery的ajax功能時(shí)，有一個(gè)dataType屬性，可以將這個(gè)屬性設(shè)置為json或者利用$.getJSON()方法獲得服務(wù)器返回的值，這個(gè)返回值就是一個(gè)json對(duì)象，所以就不需要再做轉(zhuǎn)化。

當(dāng)然，jquery也提供了轉(zhuǎn)換的函數(shù) $.parseJSON(string); 這個(gè)和之前講的JSON.parse()得用法是一樣的，具體怎么使用，看個(gè)人喜好。

到此這篇關(guān)于javascript解析json格式的數(shù)據(jù)方法詳解的文章就介紹到這了,更多相關(guān)javascript解析json格式的數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論