iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

前端藏寶圖系列 第 7

資料傳輸格式 JSON

在沒有網路的年代,人們獲取資訊的來源可能是報章雜誌、廣播電視等等,報章雜誌的排版需要符合出版業的要求,廣播的頻道也有特定的頻率,那麼網路世界的資料是不是也有特定的格式要求呢?

答案當然是有的,不然我鋪這麼長的梗是為了什麼?

常見的資料傳輸格式

談論到資料傳輸最常討論的兩個格式便是 JSON ( JavaScript Object Notation ) 和 XML ( EXtensible Markup Language ),JSON 還沒發明前,大多是使用 XML,JSON 可以取代 XML 最大的原因大概便是它主打的輕量,為什麼可以做到輕量呢?先來看看三個寶物資料以 XML 和 JSON 的格式呈現有什麼差異?

// XML 格式

<treasures>
  <treasure>
    <type>gold</type> <value>100000</value>
  </treasure>
  <treasure>
    <type>silver</type> <value>2000</value>
  </treasure>
  <treasure>
    <type>jade</type> <value>5000</value>
  </treasure>
</treasures>
//JSON 格式

{"treasures":[
  { "type":"gold", "value": 100000 },
  { "type":"silver", "value": 2000 },
  { "type":"jade", "value": 5000 }
]}

光是三筆資料就可以觀察到XML格式儲存了重複的屬性名稱,在資料量變多的狀況下,檔案會明顯地更龐大造成傳輸速度變慢。

除了這兩個格式以外,還有人提到一個叫YAML的格式,是一種適合表達資料序列化的格式。

奇怪小知識:YAML是"'YAML Ain't a Markup Language"的遞迴縮寫,遞迴縮寫指的是參照自己而形成的縮寫,據說這種命名方式原先是駭客社群的傳統,但後來也滲透到各個領域。舉幾個比較知名的例子:

  • GNU (GNU's Not UNIX): 一個自由的作業系統,其設計類似Unix
  • VISA (Visa International Service Association): 對,就是大家信用卡上的VISA

好,岔題結束,我們還是言歸正傳地來認識JSON吧!

JSON

語法規則

JSON 的語法是歸屬在JavaScript 語法規則下的子集,所以會覺得莫名熟悉,先看個簡單的例子:

 {"name":"Ironman"}
  • JS物件有key-value pairs,JSON則是name-value pairs
  • JS物件key值可以是字串或數字,JSON的name值必須是字串,而且要用雙引號
  • JSON的value的值是 string 時,必須用雙引號包裹,單引號會出錯

資料類型

基本上物件能存的,JSON都可以儲存,但有三種值不行

  • 函式
  • 日期
  • undefined

JavaScript處理JSON的內建函式

JSON之所以成為現今主流的資料傳輸格式,還有一點是因為大多的程式語言都有內建的方法或函式庫,將JSON字串格式轉成物件,我們先前提到的XML則需要使用專屬的解析器,相較起來,JSON的操作容易許多。

來實際試試看JS提供的兩個方法

  • 把物件轉成JSON JSON.stringfy()
    註:先前有提到value值不能是undefined,實際來踩雷看看會怎麼樣

確實轉成JSON string,不過因為owner的value值是undefined,所以直接被忽略呢!!!

  • 把JSON轉成物件 JSON.parse()

無聊冷笑話之JSON的反義詞是什麼?

JSOFF。/images/emoticon/emoticon01.gif

參考資料:
w3school
資料傳輸三種格式
Introducing JSON
YAML - wiki
遞迴縮寫


上一篇
深不可測的海 - Regular Expression
下一篇
瀏覽器物件模型 BOM
系列文
前端藏寶圖30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
MJ
iT邦新手 4 級 ‧ 2021-09-22 14:23:37

Jsoff是什麼梗><

Chiahsuan iT邦新手 4 級 ‧ 2021-09-22 14:32:02 檢舉

哈哈哈哈~覺得冷請穿外套喔/images/emoticon/emoticon01.gif

0
Hooo
iT邦新手 4 級 ‧ 2021-09-22 14:35:56

ON...OFF... 快穿外套

Chiahsuan iT邦新手 4 級 ‧ 2021-09-22 17:11:23 檢舉

/images/emoticon/emoticon37.gif
很喜歡文字遊戲XD

0
南國安迪
iT邦新手 3 級 ‧ 2021-09-22 18:22:25

期待每天都分享笑話~

Chiahsuan iT邦新手 4 級 ‧ 2021-09-23 12:51:29 檢舉

冷冷的也沒關係嗎XDDD

我要留言

立即登入留言