javaScript系列 [05]-javaScript和JSON

本文輸出和JSON有關的如下內容
❐ JSON和javaScript
❐ JSON的語法介紹
❐ JSON的數據類型
❐ JSON和XMLHTTPRequest
❐ JSON的序列化和反序列化處理html

1.1 JSON和javaScript

JSON是一種數據交換格式。前端

JSON的全稱是JavaScript Object Notation,翻譯爲JavaScript對象表示法。JSON的這個全稱,無疑讓不少人既興奮又困惑,興奮的人直接認爲這就是JavaScript中的對象,困惑的人覺察出JSON數據和JavaScript對象好像有些不同。接下來咱們先談一談JSON數據和JavaScript的關係。java

誠然,從JSON的全稱能夠看出JSON和JavaScript語言一定有種某種神祕關聯,至少可以肯定的是JSON的命名確實來源於JavaScript這門語言。web

JSON基於JavaScript對象字面量,但JSON自己是一種數據交換格式,所以它是獨立於語言的。JSON全稱爲JavaScript對象表示法,在理解的時候能夠認爲JSON ==> JavaScript && 對象 && 表示法編程

JavaScript咱們知道是一門動態腳本語言,那麼對象表示法是什麼?json

對象是面向對象編程語言中一種常見的數據類型,表示鍵值對的集合,那麼表示法是什麼?數組

表示法:是指一個能夠表示諸如數字或單詞等數據的字符系統。瀏覽器

JSON起源於JavaScript(靈感來源於JavaScript的對象語法),但真正重要的是具體的表示法自己。JSON不只獨立於語言,並且使用了一種在許多編程語言中可以找到共同元素的表達方式。基於這種簡潔的表達方式,JSON迅速成爲一種流行的數據交換格式。目前,客戶端和服務器端在進行數據通訊的時候,常見的數據格式就是JSON和XML。服務器

1.2 JSON的語法介紹

1.2.1 JSON的語法

JSON由於基於JavaScript的字面量,因此咱們先來看下JavaScript字面量的樣子,下面給出簡單的代碼示例,描述了一個書對象。網絡

1 var book = {
2 name:"聲名狼藉者的生活",
3 price:42.00,
4 author:"福柯",
5 press:"北京大學出版社",
6 read:function () {
7 console.log("個人書名爲:聲名狼藉者的的生活,做者爲福柯....");
8 }
9 };

順便貼出一個簡短的JSON數據

{
"name":"聲名狼藉者的生活",
"price":42.00,
"author":"福柯",
"press":"北京大學出版社",
"content":["a","b","c",123]
}

咱們能夠對比下上面的JavaScript對象和JSON數據,會發現它們的結構和語法形式很像,都是鍵值對的集合,接下來咱們作更詳細的說明。JSON數據在表達上和對象保持一致,但由於數據交換格式的核心是數據,因此JSON並不會保存函數等信息。JSON數據所基於的JavaScript對象字面量單純指對象字面量以及其屬性的語法表示。

JSON的主要語法特色

① 以鍵值對的方式來保存數據
② 標準的JSON數據的key必需要使用雙引號包裹
③ { } 用於表示和存放對象,[ ] 用於表示和存放數組數據

JSON數據的讀取,在讀取JSON的時候

{ 表示開始讀取對象,} 表示對象讀取結束
[ 表示開始讀取數組,] 表示數組讀取結束
:用於分隔鍵值對中的key和value
, 用於分隔對象中的多個鍵值對或者是數組中的多個元素
JavaScript對象字面量中的key可使用單引號,可使用雙引號,能夠沒必要加上引號包裹,可是在JSON中,全部的key必需要加上雙引號。

1.2.2 JSON的驗證和格式化工具

下面列出一些可以對JSON數據進行校驗和格式化的在線地址
https://jsonlint.com/
http://tool.oschina.net/codeformat/json
https://jsonformatter.curiousconcept.com/

1.2.3 JSON文件和MIME類型

在開發中咱們常常須要處理大量的JSON數據,JSON這種數據交換格式能夠做爲獨立的文件存在於文件系統中,文件擴展名爲 .json

JSON的MIME類型是application/json, 詳細信息請參考IANA官網維護的全部媒體類型列表

1.3 JSON的數據類型

JSON中(做爲value值)的數據類型包括對象、字符串、數字、布爾值、null和數組六種

① 字符串
JSON中的字符串能夠由任何的Unicode字符構成,字符串的兩邊必須被雙引號包裹。須要注意的是:雖然在JavaScript語言中字符串可使用單引號來包裹,可是在JSON中的字符串必須使用雙引號包裹。

若是字符串中存在如下特殊字符,那麼須要在它們的前面加上一個反斜線(\)來進行轉義。

- " 雙引號
- \ 反斜線
- \/ 正斜線
- \b 退格符
- \f 換頁符
- \t 製表符
- \n 換行符
- \r 回車符
- \u 後面跟16進制字符

 

② 數字
JSON中的數字能夠是整數、小數、負數或者是指數。

③ 布爾類型
JSON數據僅僅支持小寫形式的布爾類型值:true 和 false。

④ null類型
JSON中沒有undefined這種數據類型,它使用null表示空,而且必須小寫。
在JavaScript語言中,var obj = null 表示把obj這個對象清空,它和undefined不太同樣,null表示什麼都沒有,undefined表示未定義。

⑤ 對象類型
對象類型是使用逗號分隔的鍵值對的集合,使用大括號({})裹。

⑥ 數組類型
數組類型是元素的集合,每一個元素均可以是字符串、數字、布爾值、對象或者數組中的任何一種。元素與元素之間使用逗號隔開,全部的元素被方括號([])包裹,建議數組中全部的元素都應該是相同數據類型的。

1.4 JSON和XMLHTTPRequest

在前端開發中有一種發送網絡請求的技術Ajax,它能夠實現異步處理網絡通訊而不刷新頁面。

Ajax的全稱爲Asynchronous JavaScript and XML,即異步的JavaScript和XML。咱們知道JSON的定位是輕量級的數據交互格式,客戶端在和服務器端進行網絡通訊的時候,服務器端返回給咱們的數據大多數是JSON或者是XML。也就是說JSON數據在Ajax網絡通訊中可能扮演重要的角色,那什麼Ajax不叫異步的JSON而叫作異步的XML呢? 答案是:由於剛提出這種網絡請求技術的時候,XML相比JSON更流行。

在Ajax網絡請求中用到的核心對象XMLHTTPRequest也是如此,其實這個對象命名中包含XML也僅僅是由於對於當時而言,XML是網絡請求中最經常使用的數據交換格式。若是放在今天,那麼它們的名字應該叫作AjaJ(Asynchronous JavaScript and JSON)和JSONHTTPRequest更合適一些。

1.5 JavaScript中JSON數據的序列化和反序列化處理

在網絡請求中,若是服務器返回給咱們的數據是JSON數據,那麼爲了方便對數據的操做,一般咱們在網絡請求成功拿到JSON數據以後會先對JSON數據進行反序列化操做。
在前端開發中,早期的JSON解析基本上由eval函數來完成,ECMAScript5對解析JSON的行爲進行了規範,定義了全局對象JSON。目前IE8+、FireFox 3.5+、Opera 10.五、Safari 4+和Chrome等瀏覽器均支持原生的JSON全局對象。

JSON數據的處理主要涉及到兩方面:序列化處理和反序列化處理

1.5.1 使用eavl函數來處理JSON數據

eavl函數說明

JavaScript語言中eavl函數能夠把字符串轉換爲js的代碼而且立刻執行,使用狀況和Function構造函數用法類型。

eval("var a = 123;");
console.log(a + 1); //輸出結果爲124

由於從某種程度上來說,json實際上是JavaScript語言的嚴格子集,因此咱們能夠直接經過eval函數來對json數據進行解析。須要注意的是,使用eavl函數來對json數據結構求值存在風險,由於可能會執行一些惡意代碼。 

eavl函數解析JSON

服務器返回給前端的json數據多是{...}形式的,也多是[...]形式的,分別對應js中的對象和數組。若是是{...}形式的,那麼在解析的時候,若是直接以eval(json)的方式處理會報錯,由於js中不容許直接寫{name:」zs」}相似的語句。遇到這種結構的json數據,一般咱們有兩種方式進行處理:① 包裝成表達式 ② 賦值給變量。

 1  
 2 //001 [...] 格式的json數據
 3 var arrJson= '[{"name":"zs","age":18},{"name":"lisi","age":28}]';
 4 var jsonArr = eval(arrJson);
 5  
 6 //002 {...} 格式的json數據
 7 var objJson = `{"name":"wendingding","age":18,"contentAbout":["JavaScript","CSS","HTML"],"car":{"number":"粵A6666","color":"red"}}`;
 8  
 9 //eval(json); 錯誤的演示:報錯
10 //處理方式(1):以拼接的方式賦值給變量
11 eval("var jsonObj1 = " + objJson);
12 //處理方式(2):包裝成表達式
13 var jsonObj2 = eval("(" + objJson +")");
14  
15 //打印轉換後獲得的數組|對象
16 console.log(jsonArr);
17 console.log(jsonObj1);
18 console.log(jsonObj2);

 

1.5.2 使用JSON全局對象來處理JSON數據

JSON全局對象擁有兩個方法:stringify()和parse(),其中parse方法用於把json數據反序列化爲原生的js,stringify方法用於把js對象序列化爲json字符串。

parse方法的使用
語法:JSON.parse(jsonString,[fn])

參數說明

第一個參數:jsonString爲要解析的json字符串
第二個參數:fn是一個可選參數,該參數爲函數類型,接收兩個參數,分別是每一個鍵值對的key和value。

 1  
 2 //json字符串
 3 var objJson = `{"name":"wendingding","age":18,"contentAbout":["JavaScript","CSS","HTML"],"car":{"number":"粵A6666","color":"red"}}`;
 4  
 5 //把json字符串轉換爲js數組
 6 var arrJson= '[{"name":"zs","age":18},{"name":"lisi","age":28}]';
 7  
 8 //把json字符串轉換爲js對象
 9 var jsonObj = JSON.parse(objJson);
10 var jsonArr = JSON.parse(arrJson);
11 console.log(jsonObj);
12 console.log(jsonArr);
13  
14 //演示parse方法中函數參數的使用
15 function fn(key, value) {
16 if (key === "name") {
17 return value + "++" //在原有value值的基礎上拼接++字符串
18 } else if (key === "age") {
19 return undefined //若是返回undefined,則表示刪除對應的鍵值對
20 } else {
21 return value //正常返回對應的value值
22 }
23 }
24 console.log(JSON.parse(objJson, fn));

stringify方法使用說明

語法:JSON.stringify(Obj,[fn|arr],[space])

參數說明

第一個參數:Obj爲要進行序列化操做的JavaScript對象
第二個參數:過濾器,能夠是函數或者是一個數組
第三個參數:是否在生成的json字符串中保留縮進,用於控制縮進的字符

 1 //js中的普通對象
 2 var obj = {
 3 name:"zs",
 4 age:18,
 5 friends:["小霸王","花仙子","奧特曼"],
 6 other:undefined,
 7 showName:function () {
 8 console.log(this.name);
 9 }
10  
11 };
12  
13 //把js中的對象轉換爲json字符串
14 //注意:
15 //001 若是鍵值對中存在value值爲undefined的數據,那麼會被跳過
16 //002 對象中的方法以及該對象的原型成員數據在進行轉換的時候,會被有意忽略
17 console.log(JSON.stringify(obj));
18  
19 //控制縮進,該參數的值能夠是數字也能夠是字符串,自動換行
20 //001 若是是字符串那麼會把對應的字符拼接在鍵值對前面,超過10個字符的省略
21 //002 若是是數字那麼會設置對應的縮進,最多爲10,超過則默認爲10
22 console.log(JSON.stringify(obj, null, 4));
23 console.log(JSON.stringify(obj, null, "@@"));
24  
25 //過濾器(數組):表示只處理key爲name和age這兩個鍵值對
26 console.log(JSON.stringify(obj, ["name","age"]));
27  
28 //過濾器(函數):
29 function fn(key,value) {
30 if (key === "age")
31 {
32 return value + 20;
33 }else if (key === "name")
34 {
35 return undefined; //過濾掉key爲name這個鍵值對
36 }else
37 {
38 return value;
39 }
40 }
41 console.log(JSON.stringify(obj,fn));

JSON數據總結

❐ JSON全稱是JavaScript Object Notation基於JavaScript,是JavaScript的子集。
❐ JSON雖然是JavaScript的子集,但並不從屬於JavaScript,它獨立於語言。
❐ JSON是用來表示和傳輸數據的格式,比XML更輕量級,現已成爲web數據交換的事實標準。
❐ JSON的優點在於其能夠方便的把JSON字符串數據轉換爲對應的對象,比XML更方便且數據更小。
❐ JSON語法能夠表示:字符串、數值、布爾值、null、對象和數組6種類型的值,不支持undefined。
❐ JSON中的」鍵」區別於JavaScript,必需要加上雙引號。
❐ JSON解析可使用傳統的eval函數,或ECMAScript5推出的全局對象來處理。

參考資料

JSON官網:http://json.org/
JSON維基百科:https://en.wikipedia.org/wiki/JSON
JSON做者簡介:https://en.wikipedia.org/wiki/Douglas_Crockford
JSON必知必會:https://book.douban.com/subject/26789960/
JavaScript高級程序設計:https://book.douban.com/subject/10546125/


相關文章
相關標籤/搜索