Json基礎 · JS與WEB前端框架技術

JSON === [TOC] # 參考資源 http://www.runoob.com/json/json-tutorial.html # 概念 JSON: JavaScript Object Notation（JavaScript 對象表示法）。JSON 是存儲和交換文本信息的語法。JSON 使用 Javascript語法來描述數據對象，但是 JSON獨立于語言和平臺。PHP、Nodejs等編程語言都支持JSON。一個JSON對象的列子： ``` { "sites": [ { "name":"菜鳥教程" , "url":"www.runoob.com" }, { "name":"google" , "url":"www.google.com" }, { "name":"微博" , "url":"www.weibo.com" } ] } ``` JSON 文本格式在語法上與創建 JavaScript 對象的代碼相同。由于這種相似性，無需解析器，JavaScript 程序能夠使用內建的 eval() 函數，用 JSON 數據來生成原生的 JavaScript 對象。 # JSON 語法規則 JSON 語法是 JavaScript 對象表示語法的子集。數據在名稱/值對中數據由逗號分隔大括號保存對象中括號保存數組 ## JSON 名稱/值對 JSON 數據的書寫格式是：名稱/值對。名稱/值對包括字段名稱（在雙引號中），后面寫一個冒號，然后是值： "name" : "菜鳥教程" ## JSON 值 JSON 值可以是： * 數字（整數或浮點數） * 字符串（在雙引號中） * 邏輯值（true 或 false） * 數組（在中括號中） * 對象（在大括號中） * null ## JSON 數字 JSON 數字可以是整型或者浮點型： ``` { "age":30 } ``` ## JSON 對象 JSON 對象在大括號（{}）中書寫，對象可以包含多個名稱/值對： ``` { "name":"菜鳥教程" , "url":"www.runoob.com" } ``` 你可以使用點號（.）來訪問對象的值： ``` var myObj, x; myObj = { "name":"runoob", "alexa":10000, "site":null }; x = myObj.name; ``` 你也可以使用中括號（[]）來訪問對象的值： ``` x = myObj["name"]; ``` 你可以使用 for-in 來循環對象的屬性： ``` var myObj = { "name":"runoob", "alexa":10000, "site":null }; for (x in myObj) { … } ``` 在 for-in 循環對象的屬性時，使用中括號（[]）來訪問屬性的值： ``` var myObj = { "name":"runoob", "alexa":10000, "site":null }; let str=”” for (x in myObj) { str+= myObj[x]; } ``` JSON 對象中可以包含另外一個 JSON 對象： ``` myObj = { "name": "runoob", "alexa": 10000, "sites": { "site1": "www.runoob.com", "site2": "m.runoob.com", "site3": "c.runoob.com" } } ``` 你可以使用點號(.)或者中括號([])來訪問嵌套的 JSON 對象。 ``` x = myObj.sites.site1; // 或者 x = myObj.sites["site1"]; ``` 你可以使用點號(.)來修改 JSON 對象的值： ``` myObj.sites.site1 = "www.google.com"; ``` 你可以使用中括號([])來修改 JSON 對象的值： ``` myObj.sites["site1"] = "www.google.com"; ``` 我們可以使用 delete 關鍵字來刪除 JSON 對象的屬性： ``` delete myObj.sites.site1; ``` 你可以使用中括號([])來刪除 JSON 對象的屬性： ``` delete myObj.sites["site1"] ``` ## JSON 數組 JSON 數組在中括號中書寫：數組可包含多個對象： ``` let myObj = { "name": "網站", "sites": [{ "name": "菜鳥教程", "url": "www.runoob.com" }, { "name": "google", "url": "www.google.com" }, { "name": "微博", "url": "www.weibo.com" }] } ``` 在上面的例子中，對象 "sites" 是包含三個對象的數組。每個對象代表一條關于某個網站（name、url）的記錄。我們可以使用索引值來訪問數組，索引從 0 開始： ``` x = myObj.sites[0]; ``` 你可以使用 for-in 來訪問數組： ``` for (let i in myObj.sites) { x += myObj.sites[i]; } ``` 你也可以使用 for 循環： ``` for (i = 0; i < myObj.sites.length; i++) { x += myObj.sites[i]; } ``` 你可以使用索引值來修改數組值： ``` myObj.sites[1] = "Github"; ``` 我們可以使用 delete 關鍵字來刪除數組元素： ``` delete myObj.sites[1]; ``` ## JSON 布爾值 JSON 布爾值可以是 true 或者 false： ``` { "flag":true } ``` ## JSON null JSON 可以設置 null 值： ``` { "runoob":null } ``` # JSON.parse() JSON 通常用于與服務端交換數據。在接收服務器數據時一般是字符串。我們可以使用 JSON.parse() 方法將數據轉換為 JavaScript 對象。 ``` JSON.parse(text[, reviver]) ``` 參數說明： * text：必需，一個有效的 JSON 字符串。 * reviver：可選，一個轉換結果的函數，將為對象的每個成員調用此函數。例如我們從服務器接收了以下數據： ``` { "name":"runoob", "alexa":10000, "site":"www.runoob.com" } ``` 我們使用 JSON.parse() 方法處理以上數據，將其轉換為 JavaScript 對象： ``` var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }'); ``` # JSON.stringify() JSON 通常用于與服務端交換數據。在向服務器發送數據時一般是字符串。我們可以使用 JSON.stringify() 方法將 JavaScript 對象轉換為字符串。 ``` JSON.stringify(value[, replacer[, space]]) ``` 參數說明： * value：必需，一個有效的 JSON 對象。 * replacer：可選。用于轉換結果的函數或數組。如果 replacer 為函數，則 JSON.stringify 將調用該函數，并傳入每個成員的鍵和值。使用返回值而不是原始值。如果此函數返回 undefined，則排除成員。根對象的鍵是一個空字符串：""。如果 replacer 是一個數組，則僅轉換該數組中具有鍵值的成員。成員的轉換順序與鍵在數組中的順序一樣。當 value 參數也為數組時，將忽略 replacer 數組。 * space：可選，文本添加縮進、空格和換行符，如果 space 是一個數字，則返回值文本在每個級別縮進指定數目的空格，如果 space 大于 10，則文本縮進 10 個空格。space 有可以使用非數字，如：。 ## JavaScript 對象轉換例如我們向服務器發送以下數據： ``` var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"}; ``` 我們使用 JSON.stringify() 方法處理以上數據，將其轉換為字符串： ``` var myJSON = JSON.stringify(obj); ‘{ "name":"runoob", "alexa":10000, "site":"www.runoob.com"}’ ``` # JavaScript 數組轉換我們也可以將 JavaScript 數組轉換為 JSON 字符串： ``` var arr = [ "Google", "Runoob", "Taobao", "Facebook" ]; var myJSON = JSON.stringify(arr); ```