javascript
【JSON】JSON入门详解(二)
文章目錄
- JSON基礎(chǔ)文章薦讀
- JavaScript創(chuàng)建JSON對象
- JSON與XML的那些事
- JSON與XML的相同之處
- JSON與XML的不同之處
- AJAX相關(guān)JSON與XML
- JSON與XML的解析
- JSON核心知識
- JSON語法規(guī)則概述
- JSON對象相關(guān)
- JSON訪問K-V對的對象值
- JSON循環(huán)讀取對象
- JSON修改對象的值
- JSON刪除對象的值
- JSON數(shù)組相關(guān)
- JSON嵌套問題
- 談?wù)勗趺慈ダ斫膺@個嵌套關(guān)系☆☆☆
- JSON與String的轉(zhuǎn)換
- JSON.parse()
- JSON.stringify()
- JSON與Date對象的處理
- JSON文件后綴
- JSON學(xué)習(xí)工具
- JSON語法驗證器
- JSON在線解析器
JSON基礎(chǔ)文章薦讀
這些都是我寫過的文章，特別是第一篇文章，薦讀。
- 《JSON入門詳解(一)》
- 《Pandas高效加載JSON文件》
- 《Java對象數(shù)據(jù)的XML和JSON表示》
- 《Java中的JSON類庫》
- 《用Jackson進行JSON序列化/反序列化操作》
- 《在JavaScript中使用JSON進行序列化、反序列化操作》
JavaScript創(chuàng)建JSON對象
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>JSON</title></head><body><h1>員工信息</h1><p>ID: <span id="js_id"></span><br/> Name: <span id="js_name"></span><br/> Age: <span id="js_age"></span><br/> Email: <span id="js_email"></span><br/> </p><script>var jsonObj= {"id":"1111","name":"王富貴", "age":"30","email":"fugui@gmail.com"};document.getElementById("js_id").innerHTML=jsonObj.id document.getElementById("js_name").innerHTML=jsonObj.namedocument.getElementById("js_age").innerHTML=jsonObj.agedocument.getElementById("js_email").innerHTML=jsonObj.email</script></body> </html>JSON與XML的那些事
有關(guān)于第三篇文章——《Java對象數(shù)據(jù)的XML和JSON表示》，這篇文章主要是實例的演示，下面講講JSON與XML的異同，以及為什么選擇JSON更好。
JSON與XML的相同之處
- 都是純文本
- 都具有自我描述性，我們能夠理解其含義
- 都具有嵌套的層次結(jié)構(gòu)
- 都可通過JavaScript進行解析，Java等語言也支持解析二者
- 包含的數(shù)據(jù)都可使用AJAX（Asynchronous Javascript And XML）進行傳輸
JSON與XML的不同之處
- JSON沒有結(jié)束標簽，XML嚴格遵循格式化
- JSON更簡潔
- JSON讀寫速度更快
- JSON能夠使用JavaScript內(nèi)置的eval()函數(shù)進行解析
- JSON能使用數(shù)組
- JSON不使用保留字
AJAX相關(guān)JSON與XML
- AJAX應(yīng)用程序解析XML的流程：
1.讀取XML文檔
2.使用XML DOM來循環(huán)遍歷文檔
3.讀取值并存儲在變量中 - AJAX應(yīng)用程序解析JSON的流程：
1.讀取JSON字符串
2.使用eval()處理JSON字符串
=> 對于AJAX應(yīng)用程序來說，JSON比XML可以更便捷。
JSON與XML的解析
XML需要使用XML解析器來解析，JSON可以使用標準的JavaScript函數(shù)來解析，這也是二者最大不同之一了。
- JSON.parse()：將一個 JSON 字符串轉(zhuǎn)換為 JavaScript 對象。
- JSON.stringify()：于將 JavaScript 值轉(zhuǎn)換為 JSON 字符串。
JSON核心知識
JSON語法規(guī)則概述
- 大括號（{}）保存對象的K-V對
- 中括號（[]）保存數(shù)組，同類多種元素
- 在K-V對中存儲數(shù)據(jù)
- K-V對中的數(shù)據(jù)用逗號（,）分隔，K與V之間用冒號（:）分隔
- 六種類型：
- 數(shù)字（integer or float）
- 字符串（""）
- 邏輯值（true or false）
- 數(shù)組（[]）
- 對象（{}）
- null
JSON對象相關(guān)
JSON訪問K-V對的對象值
上面的代碼可以按照名稱訪問JSON對象值。
<p>ID: <span id="js_id"></span><br/> Name: <span id="js_name"></span><br/> Age: <span id="js_age"></span><br/> Email: <span id="js_email"></span><br/> </p>讀取id屬性為例，還有如下兩種寫法：
- 使用點號（.）訪問：var a = jsonObj.id;
- 使用數(shù)組式方括號（[]）訪問：var a = jsonObj["id"];
JSON循環(huán)讀取對象
我們可以使用 for-in 來循環(huán)對象讀取對象屬性和值（參考Java的 for-each 循環(huán)）：
for (a in jsonObj) {document.getElementById("attribute").innerHTML += a + "：" + jsonObj[a]+ "<br>"; }完整代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>JSON</title></head><body><h1>員工信息</h1><p id="attribute"></p><script>var jsonObj= {"id":"1111","name":"王富貴", "age":"30","email":"fugui@gmail.com"};for (a in jsonObj) {document.getElementById("attribute").innerHTML += a + "：" + jsonObj[a]+ "<br>";}</script></body> </html>運行示例：
JSON修改對象的值
可以直接用點（.）運算符或者方括號（[]）來訪問并修改對象的值。
下面的代碼，把“王富貴”的名字，改成了“陳二狗”：
jsonObj.name="陳二狗";完整代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>JSON</title></head><body><h1>員工信息</h1><p id="attribute"></p><script>var jsonObj= {"id":"1111","name":"王富貴", "age":"30","email":"fugui@gmail.com"};jsonObj.name="陳二狗";for (a in jsonObj) {document.getElementById("attribute").innerHTML += a + "：" + jsonObj[a]+ "<br>";}</script></body> </html>運行示例：
JSON刪除對象的值
可以使用delete關(guān)鍵詞+點（.）運算符或者方括號（[]）來訪問并刪除對象的值。
下面的代碼，刪除了王富貴的年齡和Email：
delete jsonObj.age; delete jsonObj["email"];完整代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>JSON</title></head><body><h1>員工信息</h1><p id="attribute"></p><script>var jsonObj= {"id":"1111","name":"王富貴", "age":"30","email":"fugui@gmail.com"};delete jsonObj.age;delete jsonObj["email"];for (a in jsonObj) {document.getElementById("attribute").innerHTML += a + "：" + jsonObj[a]+ "<br>";}</script></body> </html>運行示例：
JSON數(shù)組相關(guān)
數(shù)組和對象相似，包括訪問、修改、刪除的點號（.）和刪除的delete關(guān)鍵詞。
不過，使用屬性名+方括號的訪問方式被換成了使用索引數(shù)字+方括號的訪問方式（參考其他編程語言）
JSON嵌套問題
之前也說了，可以大括號小括號隨便嵌套。
讀or改的話，只需要符合上面說的訪問語法，逐層使用點號即可。
談?wù)勗趺慈ダ斫膺@個嵌套關(guān)系☆☆☆
我想用Java面向?qū)ο?/strong>的知識來說明一下。
-
先說為什么是大括號，為什么是中括號？
系統(tǒng)中可能存在同一類型的很多對象，他們實際上是“平級”的，這時，相當于是數(shù)組中存儲的多個元素，所以要使用方括號（[]）。
而每個類規(guī)定了其對象應(yīng)該具有的屬性，屬性有類型，也有其取值，所以K-V對兒表達的正是這種屬性名:屬性值的關(guān)系，它是一個對象內(nèi)部的。 -
接下來談?wù)劄槭裁磿短啄?#xff1f;
四種情況吧：- 元素的類型可能是引用類型的，引用類型的對象可能含有某種屬性，該屬性還是引用類型，這時就出現(xiàn)了層次的嵌套，這是字典套字典，即大括號套大括號。
- 數(shù)組可能不是一維的，二維數(shù)組是一維的一維數(shù)組，所以存在數(shù)組套數(shù)組，即中括號套中括號。
- 數(shù)組的元素可能是引用類型的，該類型可能有很多屬性，這就是數(shù)組套字典，即中括號套大括號。
- 字典元素的屬性中可能有數(shù)組，這就是字典套數(shù)組，即大括號套中括號。
如此，我們不難理解嵌套的實際意義了。
JSON與String的轉(zhuǎn)換
JSON 通常用于與服務(wù)端交換數(shù)據(jù)。通過網(wǎng)絡(luò)接收服務(wù)器端發(fā)來的JSON是String，而通過網(wǎng)絡(luò)發(fā)往服務(wù)器的JSON也是String，但我們處理的是JSON，所以設(shè)計JSON與String的轉(zhuǎn)換。
轉(zhuǎn)換函數(shù)是這樣的：
- JSON.parse()：String => JSON
- JSON.stringify()：JSON => String
JSON.parse()
語法格式：
JSON.parse(text[, reviver])參數(shù)說明：
| text | 有效的JSON字符串 | √ |
| reviver | 每個成員都會調(diào)用的、用于轉(zhuǎn)換結(jié)果的函數(shù) | × |
實例：
接收到數(shù)據(jù)：
JSON.parse()：
var jsonObj = JSON.parse(str);JSON.stringify()
語法格式：
JSON.stringify(value[, replacer[, space]])參數(shù)說明：
| value | 要轉(zhuǎn)換的JavaScript值（通常為對象或數(shù)組） | √ |
| replacer | 用于轉(zhuǎn)換結(jié)果的函數(shù)或數(shù)組 | × |
| space | 文本添加縮進、空格和換行符 | × |
space參數(shù)：
- 值為10以下整數(shù)表示這么多空格
- 值為10以上整數(shù)表示10個空格
- 可以用其他分隔符表示比如"\t"
實例：
接收到數(shù)據(jù)：
JSON.parse()：
var str = JSON.stringify(jsonObj);注意事項：
JSON不允許包含函數(shù)，JSON.stringify()會刪除JavaScript對象的函數(shù)，包括key和value。
真的不建議使用函數(shù)，如果非要用，也要先將函數(shù)轉(zhuǎn)換為字符串再用。
JSON與Date對象的處理
JSON不能存儲Date對象！
如果我們想要存儲Date對象，需要將其轉(zhuǎn)換為字符串，再將字符串轉(zhuǎn)換為Date對象。
JSON文件后綴
- JSON文件的文件類型：".json"
- JSON文本的MIME類型：“application/json”
JSON學(xué)習(xí)工具
JSON語法驗證器
JSLint
JSON在線解析器
推薦菜鳥教程的JSON在線解析器，支持如下功能：
- 格式化
- 壓縮
- 驗證
- JSON→XML
- JSON→CSV
- JSON→YAML
總結(jié)
以上是生活随笔為你收集整理的【JSON】JSON入门详解(二)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【Servlet】解决org.apach
- 下一篇： 【操作系统】系统引导