位元詩人 現代 [JavaScript] 程式設計教學:使用 JSON 物件

Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Email

什麼是 JSON?

JSON (JavaScript Object Notation) 是一種輕量級的檔案格式 (file format),其語法剛好是 JavaScript 的子集合。學會 JavaScript 就可以學會 JSON。由於 JSON 在網頁程式中廣泛使用著,在學習 JavaScript 時都會順便學習 JSON。

雖然 JSON 在語法上是 JavaScript 的子集,但 JSON 本身是語言獨立的。由於 JSON 的普遍性,大部分的程式語言都有至少一種處理 JSON 的函式庫。所以,我們可以把 JSON 當成一種跨語言、跨平台的資料儲存媒介。

JSON 內建的資料結構

JSON 內含兩種容器 (collection):

  • 物件實字 (object literal)
  • 陣列 (array)

這兩種容器相當於映射和陣列,應是足以表達資料的結構。

實務上,JSON 最外層一定會用物件實字包資料,不會用陣列。如下例:

{
  "data": [1, 2, 3]
}

但不建議在 JSON 頂層直接用陣列包住資料:

[1, 2, 3]

這是安全性上的考量 (參考這裡)。

JSON 資料的型別

JSON 可用的資料型態如下:

  • 字串 (string)
  • 數字
  • 布林數,即 truefalse
  • null

寫法如同 JavaScript 中對應的資料型別,此處不詳述。

千萬不要用 eval 函式接外部的 JSON 資料

JSON 物件算是電腦中抽象的容器,實際要在不同程式間傳遞時,會先轉為字串後再傳送。常見的情境是在網頁前後端間傳送資料,這時候傳送的是字串,傳送後再將字串重新解析成可用的 JSON 物件。

eval() 函式是 JavaScript 中既邪惡又好用的函式。該函式的用途是接受字串,將字串視為 JavaScript 程式碼執行。由於該函式接收任意字串,可以用來做相當動態的行為。但若執行到外部惡意程式碼,也就變成程式安全的大漏洞。

雖然 JSON 是 JavaScript 的子集,千萬不要為了方便直接用 eval() 函式去接外部的 JSON 字串,這無異於大開城門放敵人進來。JavaScript 另有內建的 JSON 物件,可用來處理 JSON 資料,詳見下文。

在 JavaScript 中處理 JSON 的方式

在 JavaScript 中,透過內建的 JSON 物件來處理 JSON 資料。該物件提供兩個函式:

以下是實例:

// Home-made `assert`
function assert(cond, msg) {
    if (!(cond)) {
        throw (msg ? msg : 'Assertion failed');
    }
}

let s = '{ "a": 36, "b": 42, "c": 57 }';

// Destructing assignment on parsed json object.
let {a, b, c} = JSON.parse(s);

assert(a === 36, "a should be 36");
assert(b === 42, "b should be 42");
assert(c === 57, "c should be 57");

使用 Polyfill 補足 JSON 支援

在舊瀏覽器上,缺乏內建的 JSON 物件,無法直接處理 JSON 資料。若網頁程式需要支援舊瀏覽器,可用 polyfill 補足,像是 JSON-js 等。

在其他程式語言中使用 JSON

JSON (JavaScript Object Notation) 官網上有各個語言中和處理 JSON 相關的函式庫,從中選擇適合自身需求的即可。由於處理 JSON 是常見的任務,需要重造輪子的機會甚少。

關於作者

身為資訊領域碩士,位元詩人 (ByteBard) 認為開發應用程式的目的是為社會帶來價值。如果在這個過程中該軟體能成為永續經營的項目,那就是開發者和使用者雙贏的局面。

位元詩人喜歡用開源技術來解決各式各樣的問題,但必要時對專有技術也不排斥。閒暇之餘,位元詩人將所學寫成文章,放在這個網站上和大家分享。