現代 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 內含兩種容器:

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

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

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

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

    但不建議直接用陣列包資料:

    [1, 2, 3]
    

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

    JSON 資料的型別

    JSON 可用的資料型態如下:

    • 字串 (string)
    • 數字
    • truefalse
    • null

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

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

    JSON 物件算是電腦中抽象的容器,實際要在不同程式間傳遞時,通會先轉為字串後再傳送。

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

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

    在 JavaScript 中處理 JSON 的方式

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

    以下是實例:

    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");
    
    // Home-made `assert`
    function assert(cond, msg) {
        if (!(cond)) {
            throw msg;
        }
    }
    

    使用 Polyfill 補足 JSON 支援

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

    【分享本文】
    Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Email
    【追蹤新文章】
    Facebook Twitter Plurk