JSON 簡易教程

1. 什麼是JSON ？

• JSON 是 JavaScript Object Notation 簡寫，是一種輕量級的數據交換格式。
• JSON 是 JS 對象的字符串表示法，它使用純文本表示一個 JS 對象的信息，本質是一個字符串。
• JSON 與 XML 文檔相比較，JSON 格式的數據比 XML 更加易於讀取，解析速度更快，而且JSON存儲的數據比XML更小；沒有XML文檔複雜的標籤。
•  JSON 獨立於編程語言和平臺之外，支持各種不同的編程語言進行JSON解析。

2. JSON 的表示

JSON 數據支持兩種表示，分別是對象表示、數組表示。

2.1 對象表示法

對象表示法是在大括號 { } 中進行書寫，一個JSON對象可以包含多個 key/value（鍵/值）對，key 必須是字符串，value 可以是合法的 JSON 數據類型（ 字符串, 數字, 對象, 數組, 布爾值或 null ），key 和 value 中使用冒號 (:) 分割，每個 key/value 對使用逗號 (,) 分割。

/* JSON 對象表示法 */
obj = { 
    "name":"runoob", 
    "alexa":10000, 
    "site":null ,
    "address":"henan-xinyang",
    "Tel":12345678900
}

2.2 數組表示法

JSON 數組在中括號 [ ] 中書寫，JSON 中數組值必須是合法的 JSON 數據類型（字符串, 數字, 對象, 數組, 布爾值或 null），JavaScript 中，數組值可以是以上的 JSON 數據類型，也可以是 JavaScript 的表達式，包括函數，日期，及 undefined 。

/* 數組表示法 */
arrObj = [ "HeNan", "XinYang", "MyHome" ]
         

2.3 嵌套表示

JSON數據格式非常靈活，可以在一個對象裏嵌套一個數組，也可以在數組裏嵌套一個對象或另外一個數組。

/*  JSON 的嵌套表示以及訪問格式  */

/* 1. 對象屬性的值value可以是一個數組 */
obj1 = {
        "username":"Tom",
        "age":20,
        "address":["shanghai","jiading","hongshilu"]
        }

/* 數組大小知道前提下：訪問讀取 "jiading"  */
var x = obj1.address[1];

/* 數組大小未知時：for-in 循環讀取 */
for (i in obj1.address) {
    x += obj1.address[i] + "<br>";
}


/* 2. JSON 對象中數組可以包含另外一個數組，或者另外一個 JSON 對象 */ 
obj2= {
        "username":"網站",
        "age":3,
        "address": [
            { 
                "province":"shanghai",
                "city":[ "jiading", "hongshilu"]
            },
            { 
                "province":"henan", 
                "city":[ "xinyang", "xixian"] 
            }
         ]
      }

/* for-in 遍歷訪問每個元素值 */
for (i in obj2.address) {
    x += "<h1>" + obj2.address[i].province+ "</h1>";
    for (j in obj2.address[i].city) {
        x += obj2.address[i].city[j] + "<br/>";
    }
}

/* 根據索引訪問其中一個 : 如 xixian */
var xx = obj2.address[1].city[1];


/* 3. 對象屬性值可以是一個對象 */
obj3 = {
           "username":"馬雲",
            "salary":100,
            "address":{
                "province":"上海",
                "city","嘉定紅世路"
                }
        }

var x1 = obj3.address.province + obj3.address["city"];

3. JSON 的轉換

• JSON.parse() 將服務端返回的JSON字符串格式的數據轉換成JSON對象進行訪問，這個字符串必須嚴格是JSON格式的。

  /* 服務端返回的json字符串在前端解析成JSON對象 */
  var obj = JSON.parse('{ "username":"老王", "salary":10000, "city":"日本" }');
  var x = obj.uesrname;

   

• JSON.stringify() 用於向服務端提交數據，將JavaScript對象轉成符合JSON格式的字符串。

  var obj = { "username":"老王", "salary":10000, "city":"日本"};
  var jsonStr= JSON.stringify(obj);
  /* 前端可以將 jsonStr 字符串發送到服務端 */

   

今天就簡單的講解下JSON相關知識，熟能生巧，只有多練習，多運用，才能發現更多的問題。

希望自己接下來能堅持寫下去，分享更多！收穫更多！

給自己打個氣💪！！！