JSON：讓資料傳輸更優雅

在東南亞海灘的陽光下，時而有一些貝殼、手工藝品等迷人的商品吸引着你。然而，語言的障礙有時會成為購買商品的阻礙。不得不用手比劃以及嘗試各種辦法來進行交流。幸運的是，人們找到原始溝通的技巧，讓彼此都能接受的資訊交流方式：在沙灘上用腳畫數字。

商家在沙灘上細心繪制商品的價格，遊客仔細觀察，并以圖形的方式表達自己的意願。如果商家同意，他會點頭或用手勢表示接受；如果不同意，他會擦掉所畫的數字，并用新的數字來表示自己的心理價位。通過幾輪互動，雙方逐漸接近對價格的共識，最終達成交易，這一切既有趣又高效。

在程式設計中，前後端為了確定雙方能夠順利傳遞資訊，需要約定一種資訊交換的方式。其中JSON作為一種輕量級、易讀寫的資料格式，就像在沙灘上畫數字一樣，成為了前後端資訊互動的默契方式。通過約定好的JSON資料結構，請求和響應雙方能夠更加高效地交換資訊，實作資訊的無縫傳遞。

那麼，JSON就是資訊交換所使用的的一種資料格式。

常見的資料互動的格式

常見的資料互動格式包括純文字、XML、JSON等不同結構，讓我們分别來看一下它們之間的差別。

1. 純文字格式

● 豎線分割的（姓名|性别|位址|年齡|手機号）

張三|男|沙陽路18号北京科技職業學院内|23|13333335555
婉兒|女|大連設計城901|22|13333336666           

● 逗号分割的（姓名,性别,位址,年齡,手機号）

張三,男,沙陽路18号北京科技職業學院内,23,13333335555
婉兒,女,大連設計城901,22,13333336666           

2. XML格式

<students>
    <student>
        <name>張三</name>
        <gender>張三</gender>
        <addr>沙陽路18号北京科技職業學院内</addr>
        <age>23</age>
        <phone>13333335555</phone>
    </student>
    <student>
        <name>張三</name>
        <gender>張三</gender>
        <addr>沙陽路18号北京科技職業學院内</addr>
        <age>23</age>
        <phone>13333335555</phone>
    </student>
</students>           

3. JSON格式

{
    "students": [
        {
            "name": "張三",
            "gender": "張三",
            "addr": "沙陽路18号北京科技職業學院内",
            "age": 23,
            "phone": "13333335555"
        },
        {
            "name": "張三",
            "gender": "張三",
            "addr": "沙陽路18号北京科技職業學院内",
            "age": 23,
            "phone": "13333335555"
        }
    ]
}           

各種格式的對比

1. 文本格式

a. 優點：内容簡潔，傳輸資料量少

b. 缺點1：無法适應複雜的業務變化，例如後端将電話與年齡調換位置，前端如果不調整資料就會錯亂

c. 缺點2：不支援有層級結構的，層級結構下面會展開講解

d. 缺點3：如果資料中包含豎線，解析時就會出現資料錯亂，例如“張三|男|沙陽路18号北京科技職業學院内|23|13333335555”中的位址資訊改為“張三|男|沙陽路18号北京科技職業學院内-服務樓2|3|4層|23|13333335555”，解析時就會多出來很多個字段

2. xml格式

a. 優點1：格式清晰，順序可調整，後端新增項也不影響前端

b. 優點2：支援層級結構

c. 優點3：資料内容與标簽相同時可進行轉義

原文：“<addr>中國>北京>昌平>沙河>千鋒教育</addr>”
轉義為：“<addr>中國>北京>昌平>沙河>千鋒教育</addr>”           

d. 缺點1：資料傳輸量大，是文本的好幾倍，屬性描述字段需要有開始和結束标簽,例如：“<name>張三</name>”

3. json格式

a. 優點1：格式清晰，順序可調整，後端新增項不會影響影響前端

b. 優點2：支援層級結構（後面展開說）

c. 優點3：資料内容與标簽相同時可進行轉義

原始内容："addr":"中國北京昌平沙河"千鋒教育""
轉義後："addr":"中國北京昌平沙河\"千鋒教育\""           

d. 優點4：資料傳輸量适當，屬性描述字段不需要有閉合标簽，例如：“name:"張三"”

展開說說JSON？

JSON，即JavaScript Object Notation，直譯是js對象标記。是一種輕量級的資料交換格式，它由鍵值對組成，用于表示結構化的資料

既然咱們展開說就說的直白一點，JSON的是由js當中的對象資料類型演化而來，用于描述某種對象的屬性和值的，并且具有上級結構，為了友善傳輸，把這種資料改造為字元串，诶，這不就來了嗎，js對象資料類型如下：

//某個人
const person= {
    name:'張三',
    age:19,
    phone:'13333335555',
    addr:'國家省市縣'
}
//省市縣的對象,樹狀的層級結構
const addr = {
  "name": "中國",
  "type": "country",
  "children": [
    {
      "name": "北京市",
      "type": "province",
      "children": [
        {
          "name": "北京市",
          "type": "city",
          "children": [
            { "name": "東城區", "type": "county" },
            { "name": "西城區", "type": "county" },
            { "name": "朝陽區", "type": "county" },
            { "name": "海澱區", "type": "county" }
          ]
        }
      ]
    },
    {
      "name": "上海市",
      "type": "province",
      "children": [
        {
          "name": "上海市",
          "type": "city",
          "children": [
            { "name": "黃浦區", "type": "county" },
            { "name": "徐彙區", "type": "county" },
            { "name": "闵行區", "type": "county" },
            { "name": "寶山區", "type": "county" }
          ]
        }
      ]
    }
  ]
}           

但，這是js的對象資料類型，資料類型本質是記憶體中存儲資料的方式，我們不可能把記憶體傳輸給背景。

不能傳輸記憶體，那就轉為字元串傳遞呗，按照對象資料類型的這個結構，變為字元串格式的，這多清晰明了，資料量也不是很大，又能很好兼顧層級結構（省市縣const addr），說幹就幹，于是我們轉為下面這個樣子：

let addrJSONString = `{
  "name": "中國",
  "type": "country",
  "children": [
    {
      "name": "北京市",
      "type": "province",
      "children": [
        {
          "name": "北京市",
          "type": "city",
          "children": [
            { "name": "東城區", "type": "county" },
            { "name": "西城區", "type": "county" },
            { "name": "朝陽區", "type": "county" },
            { "name": "海澱區", "type": "county" }
          ]
        }
      ]
    },
    {
      "name": "上海市",
      "type": "province",
      "children": [
        {
          "name": "上海市",
          "type": "city",
          "children": [
            { "name": "黃浦區", "type": "county" },
            { "name": "徐彙區", "type": "county" },
            { "name": "闵行區", "type": "county" },
            { "name": "寶山區", "type": "county" }
          ]
        }
      ]
    }
  ]
}`
//注意，我使用了反引号，這樣的資料字元串可以換行           

JSON的組成

● 大括号 {}：用于表示對象的開始和結束，對象是由一組無序的鍵值對組成的。

● 方括号 []：用于表示數組的開始和結束，數組是由一組有序的值組成的。

● 冒号 :：用于分隔鍵和值，将鍵與對應的值關聯在一起。

● 逗号 ,：用于分隔數組或對象中的不同鍵值對或值，将它們分開。

● 雙引号 " 或單引号 '：用于包圍字元串，表示字元串的開始和結束。

● 反斜杠 \：用于轉義特殊字元，確定特殊字元的正确解析。

寫到最後：JSON的優雅之處

● 資料體積：JSON通常比XML更小巧。由于JSON采用了簡潔的文法，不需要像XML那樣添加大量的标簽和屬性，是以JSON的資料體積相對較小。這使得JSON在網絡傳輸中消耗的帶寬更少，有利于提高資料傳輸的效率。

● 文法複雜性：相比較而言，XML的文法相對複雜一些。XML需要使用起始标簽和結束标簽來包裹資料，而JSON隻需要使用花括号 {} 和方括号 [] 就可以表示對象和數組。這使得JSON的文法更加簡潔和易讀。

● 解析效率：由于JSON的文法相對簡單，它的解析速度通常比XML更快。這對于大規模資料的處理和解析非常重要，尤其在需要實時響應的應用場景下。

● 相容性：JSON在前端和後端的相容性較好。幾乎所有主流程式設計語言都有JSON的解析和序列化庫，這使得JSON在前後端互動時更為便捷。

● 可讀性：JSON相對于XML更易讀寫。JSON的結構類似于JavaScript對象，使得開發者能夠更直覺地了解資料結構，便于調試和開發。

● 擴充性：盡管XML在一些特定領域具有更好的擴充性，但對于一般的樹形資料結構，JSON的擴充性也是足夠的。JSON支援嵌套對象和數組，可以靈活地表示複雜的資料結構。

綜上所述，JSON在處理省市縣和汽車等樹形資料結構時具有更小的資料體積、更簡潔的文法、更快的解析效率和更好的相容性等優勢。這些優勢使得JSON成為處理樹形資料結構的首選資料格式，尤其在現代Web應用和移動應用中廣泛應用。然而，對于一些特定需求，XML仍然可能是更好的選擇，比如需要更複雜結構和更強的擴充性的場景。

- End -