javaScript系列 [05]-javaScript和JSON

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

1.1 JSON和javaScript

JSON是一種數據交換格式。

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

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

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

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

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

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

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/

---

• 獲取更多、更專業的IT技能，請猛戳~小碼哥教育︎
• Posted by 博客園·文頂頂 ~ 文頂頂的我的博客_花田半畝
• 聯繫做者 簡書·文頂頂 新浪微博·Coder_文頂頂
• 原創文章，版權聲明：自由轉載-非商用-非衍生-保持署名 | 文頂頂