1. 程式人生 > 程式設計 >javascript解析json格式的資料方法詳解

javascript解析json格式的資料方法詳解

JSON (JavaScript Object Notation)是一種簡單的資料格式,比xml更輕巧。 它是 JavaScript 原生格式,這意味著在 JavaScript 中處理 JSON 資料不需要任何特殊的 API 或工具包。那麼如何用JavaScript來解析json呢?

首先,科普一下json。在json中,有兩種結構:物件和陣列。

一個物件以“{”(左括號)開始,“}”(右括號)結束。每個“名稱”後跟一個“:”(冒號);“‘名稱/值' 對”之間運用 “,”(逗號)分隔。 名稱用引號括起來;值如果是字串則必須用括號,數值型則不須要。例如:
var o={“key”:”value”};

陣列是值(value)的有序集合。一個數組以“[”(左中括號)開始,“]”(右中括號)結束。值之間運用 “,”(逗號)分隔。
var array = [{“name”:”tom”},{“name”:”jake”}];
在資料傳輸流程中,json是以字串的形式傳遞的,而JS操作的是JSON物件,所以,JSON物件和JSON字串之間的相互轉換是關鍵。
json字串:var str='{“key”:”value”}';
json物件:var o={“key”:”value”};

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

我的天,evel方法竟然會執行json字串裡的程式碼!!

我們再看一下JSON.parse()方法:

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

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

現在知道怎麼選擇了吧。

eval()方法是極其不安全的,尤其是在解析第三方資料的時候,萬一第三方資料給你加點惡意程式碼什麼的你不就完了麼?所以,JSON.parse()才是正確的選擇,當然,有些瀏覽器不支援這個方法,
可以到https://github.com/douglascrockford/JSON-js/blob/master/json2.js 下載json2.js,新增到你的hlml中就可以了。

除此之外還有一個 jsonStr.parseJSON()的方法,也可以將json字串轉化為json物件,同樣需要json2.js包的支援。

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(str) 相對應的方法JSON.stringify(obj)。

同樣,還有一個方法叫做obj.toJSONString()也可以將json物件轉化為json字串,與 jsonStr.parseJSON()相對應。

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迴圈進行遍歷。

4.jquery解析json字串

簡單地提一下jquery。在使用jquery的ajax功能時,有一個dataType屬性,可以將這個屬性設定為json或者利用$.getJSON()方法獲得伺服器返回的值,這個返回值就是一個json物件,所以就不需要再做轉化。

當然,jquery也提供了轉換的函式 $.parseJSON(string); 這個和之前講的JSON.parse()得用法是一樣的,具體怎麼使用,看個人喜好。

到此這篇關於javascript解析json格式的資料方法詳解的文章就介紹到這了,更多相關javascript解析json格式的資料內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!