JavaScript 核心觀念(32)-物件-JSON
前言
接下來這章節來聊聊 JSON。
JSON
JSON 很特別,本身在形式上也與 JavaScript 的物件非常相像
1 | { |
但是在此 JSON 可以透過維基百科的說明來了解它跟 JavaScript 的關係
JSON(JavaScript Object Notation,JavaScript物件表示法,讀作/ˈdʒeɪsən/)是一種由道格拉斯·克羅克福特構想和設計、輕量級的資料交換語言,該語言以易於讓人閱讀的文字為基礎,用來傳輸由屬性值或者序列性的值組成的資料物件。儘管JSON是JavaScript的一個子集,但JSON是獨立於語言的文字格式,並且採用了類似於C語言家族的一些習慣。
但是這邊有一句話是重點
JSON 資料格式與語言無關。即便它源自JavaScript,但目前很多程式語言都支援 JSON 格式資料的生成和解析。
因此簡單來講 JSON 只是一個資料格式與 JavaScript 並沒有任何關係,因此如果你使用 JavaScript 的物件形式去撰寫 JSON 就可容易出現錯誤
1 | { |
1 | { |
以上是錯誤範例,因此你實際如果貼到一些編譯器中是會出現紅字錯誤的,例如:VSCode
因此我們可以了解到 JSON 屬性與值必定為雙引號的字串(紅色是錯誤的提示)
另外提醒一下, JSON 結尾最後一個是不能加上「,
」的。
剛剛有講到 JSON 與 JavaScript 物件最大差異有幾個
- 必定為字串格式
- 最後一個不可有逗號
- 一定是採用雙引號而非單引號
那在這個狀況下該如何在 JavaScript 中使用呢?那麼這邊 JavaScript 就特別為了 JSON 格式出了互轉的
JSON.stringify()
- 將物件轉為 JSON 格式
JSON.parse()
- 將 JSON 轉為物件格式
首先先講講 JSON.stringify()
在 MDN 就有提供一系列的參考範本,因此這邊就直接貼上 MDN 範本給予參考
1 | console.log(JSON.stringify({ x: 5, y: 6 })); |
透過上面範例可以看到內容都會被轉換為一個字串與數字,但在這邊比較需要注意的是 undefined
、 NaN
或是 function
這種在轉換上就會有問題,直接變成一個 null
那 JSON.parse()
呢?以往我們在使用 JSON.parse()
只會帶入一個參數,但其實 JSON.parse()
可以這樣寫
以下範例來自 MDN
1 | JSON.parse('{"p": 5}', function(k, v) { |
因此 JSON.parse()
不單只是可以將字串轉為物件,還可以將所有內容呈現出來
1 | JSON.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', function(k, v) { |
算是一個滿特別的作法呢。