本文輸出和JSON有關的如下內容
❐ JSON和javaScript
❐ JSON的語法介紹
❐ JSON的數據類型
❐ JSON和XMLHTTPRequest
❐ JSON的序列化和反序列化處理html
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。服務器
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
, 用於分隔對象中的多個鍵值對或者是數組中的多個元素
下面列出一些可以對JSON數據進行校驗和格式化的在線地址
https://jsonlint.com/
http://tool.oschina.net/codeformat/json
https://jsonformatter.curiousconcept.com/
在開發中咱們常常須要處理大量的JSON數據,JSON這種數據交換格式能夠做爲獨立的文件存在於文件系統中,文件擴展名爲 .json
JSON的MIME類型是application/json
, 詳細信息請參考IANA官網維護的全部媒體類型列表。
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表示未定義。
⑤ 對象類型
對象類型是使用逗號分隔的鍵值對的集合,使用大括號({}
)裹。
⑥ 數組類型
數組類型是元素的集合,每一個元素均可以是字符串、數字、布爾值、對象或者數組中的任何一種。元素與元素之間使用逗號隔開,全部的元素被方括號([]
)包裹,建議數組中全部的元素都應該是相同數據類型的。
在前端開發中有一種發送網絡請求的技術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更合適一些。
在網絡請求中,若是服務器返回給咱們的數據是JSON數據,那麼爲了方便對數據的操做,一般咱們在網絡請求成功拿到JSON數據以後會先對JSON數據進行反序列化操做。
在前端開發中,早期的JSON解析基本上由eval函數來完成,ECMAScript5對解析JSON的行爲進行了規範,定義了全局對象JSON。目前IE8+、FireFox 3.5+、Opera 10.五、Safari 4+和Chrome等瀏覽器均支持原生的JSON全局對象。
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);
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/