上門一對一計算機家教
當前位置: 首頁 > Web前端家教 >

Javascript自學筆記第15節 JSON[不容易,硬著頭條也要堅持學]

點擊: 時間:2016-10-24 來源:北京家教網
前兩章我們探討了XML的結構化數據,但開發人員還是覺得這種微型的數據結構還是過于煩瑣、冗長。為了解決這個問題,JSON的結構化數據出現了。JSON是JavaScript的一個嚴格的子集,利用JavaScript中的一些模式來表示結構化數據。 一. JSON
前兩章我們探討了XML的結構化數據,但開發人員還是覺得這種微型的數據結構還是過于煩瑣、冗長。為了解決這個問題,JSON的結構化數據出現了。JSON是JavaScript的一個嚴格的子集,利用JavaScript中的一些模式來表示結構化數據。
 
一.JSON語法
JSON和XML類型,都是一種結構化的數據表示方式。所以,JSON并不是JavaScript獨有的數據格式,其他很多語言都可以對JSON進行解析和序列化。
JSON的語法可以表示三種類型的值:
1.簡單值:可以在JSON中表示字符串、數值、布爾值和null。但JSON不支持JavaScript中的特殊值undefined。
2.對象:顧名思義。
3.數組:顧名思義。
 
簡單值
100、"Lee" 這兩個量就是JSON的表示方法,一個是JSON數值,一個是JSON字符串。布爾值和null也是有效的形式。但實際運用中要結合對象或數組。
 
對象
JavaScript對象字面量表示法:
var box = {
       name : 'Lee',
       age : 100
};
 
而JSON中的對象表示法需要加上雙引號,并且不存在賦值運算和分號:
{
       "name" : "Lee",                                         //使用雙引號,否則轉換會出錯
       "age" : 100
}
 
數組
JavaScript數組字面量表示法:
var box = [100, 'Lee', true];
 
而JSON中的數組表示法同樣沒有變量賦值和分號:
[100, "Lee", true]
 
一般比較常用的一種復雜形式是數組結合對象的形式:
[
       {
              "title" : "a",
              "num" : 1
       },
       {
              "title" : "b",
              "num" : 2
       },
       {
              "title" : "c",
              "num" : 3
       }
]
 
PS:一般情況下,我們可以把JSON結構數據保存到一個文本文件里,然后通過XMLHttpRequest對象去加載它,得到這串結構數據字符串(XMLHttpRequest對象將在Aajx章節中詳細探討)。所以,我們可以模擬這種過程。
 
模擬加載JSON文本文件的數據,并且賦值給變量。
var box = '[{"name" : "a","age" : 1},{"name" : "b","age" : 2}]';
 
PS;上面這短代碼模擬了var box = load('demo.json');賦值過程。因為通過load加載的文本文件,不管內容是什么,都必須是字符串。所以兩邊要加上雙引號。
 
其實JSON就是比普通數組多了兩邊的雙引號,普通數組如下:
var box = [{name : 'a', age : 1},{name : 'b', age : 2}]; 
 
二.解析和序列化
如果是載入的JSON文件,我們需要對其進行使用,那么就必須對JSON字符串解析成原生的JavaScript值。當然,如果是原生的JavaScript對象或數組,也可以轉換成JSON字符串。
對于講JSON字符串解析為JavaScript原生值,早期采用的是eval()函數。但這種方法既不安全,可能會執行一些惡意代碼。
var box = '[{"name" : "a","age" : 1},{"name" : "b","age" : 2}]';
alert(box);                                                       //JSON字符串
var json = eval(box);                                        //使用eval()函數解析
alert(json);                                                       //得到JavaScript原生值
 
ECMAScript5對解析JSON的行為進行規范,定義了全局對象JSON。支持這個對象的瀏覽器有IE8+、Firefox3.5+、Safari4+、Chrome和Opera10.5+。不支持的瀏覽器也可以通過一個開源庫json.js來模擬執行。JSON對象提供了兩個方法,一個是將原生JavaScript值轉換為JSON字符串:stringify();另一個是將JSON字符串轉換為JavaScript原生值:parse()。
var box = '[{"name" : "a","age" : 1},{"name" : "b","age" : 2}]'; //特別注意,鍵要用雙引號
alert(box);                                        
var json = JSON.parse(box);                                           //不是雙引號,會報錯
alert(json);
 
var box = [{name : 'a', age : 1},{name : 'b', age : 2}];  //JavaScript原生值
var json = JSON.stringify(box);                                       //轉換成JSON字符串
alert(json);                                                                     //自動雙引號
 
在序列化JSON的過程中,stringify()方法還提供了第二個參數。第一個參數可以是一個數組,也可以是一個函數,用于過濾結果。第二個參數則表示是否在JSON字符串中保留縮進。
var box = [{name : 'a', age : 1, height : 177},{name : 'b', age : 2, height : 188}];
var json = JSON.stringify(box, ['name', 'age'], 4);
alert(json);
 
PS:如果不需要保留縮進,則不填即可;如果不需要過濾結果,但又要保留縮進,則講過濾結果的參數設置為null。如果采用函數,可以進行復雜的過濾。
var box = [{name : 'a', age : 1, height : 177},{name : 'b', age : 2, height : 188}];
var json = JSON.stringify(box, function (key, value) {
       switch (key) {
              case 'name' :
                     return 'Mr. ' + value;
              case 'age' :
                     return value + '歲';
              default :
                     return value;
       }
}, 4);
alert(json);
 
PS:保留縮進除了是普通的數字,也可以是字符。
 
還有一種方法可以自定義過濾一些數據,使用toJSON()方法,可以將某一組對象里指定返回某個值。
var box = [{name : 'a', age : 1, height : 177, toJSON : function () {
       return this.name;
}},{name : 'b',age : 2, height : 188, toJSON : function () {
       return this.name;
}}];
var json = JSON.stringify(box);
alert(json);                                                      
 
PS:由此可見序列化也有執行順序,首先先執行toJSON()方法;如果應用了第二個過濾參數,則執行這個方法;然后執行序列化過程,比如將鍵值對組成合法的JSON字符串,比如加上雙引號。如果提供了縮進,再執行縮進操作。
 
解析JSON字符串方法parse()也可以接受第二個參數,這樣可以在還原出JavaScript值的時候替換成自己想要的值。
var box = '[{"name" : "a","age" : 1},{"name" : "b","age" : 2}]';
var json = JSON.parse(box, function (key, value) {
       if (key == 'name') {
              return 'Mr. ' + value;
       } else {
              return value;
       }
});
alert(json[0].name);
------分隔線----------------------------
30选5开奖查询