【程式語言 - Javascript】輕量資料格式 JSON

2023/08/24閱讀時間約 5 分鐘

JSON 全名 JavaScript Object Notation，其格式基本上就是key: value的組成如下：

{
   "name": "Bob",
   "age": 40,
   "childs": [
     {
       "name": "Justin",
       "age": 10
     }
   ]
}

格式有以下幾個特點：

名稱必須為字串，用雙引號包括其名稱： "name"。
value的部份可以是「字串、數字、true、false、null、物件或陣列」。
支援嵌套物件。
不支援Javascript的Date、Error、undefined。

Javascript: JSON.stringify

從Javascript中的物件轉為JSON字串

const obj = {
   "name": "Bob",
   "age": 40,
   "childs": [
     {
       "name": "Justin",
       "age": 10
     }
   ]
}

const str = JSON.stringify(obj);
// "{"name":"Bob","age":40,"childs":[{"name":"Justin","age":10}]}"

我們也可以只對其中的name、age進行JSON字串的輸出即可。

const obj = {
   "name": "Bob",
   "age": 40,
   "childs": [
     {
       "name": "Justin",
       "age": 10
     }
   ]
}

const str = JSON.stringify(obj, ["name", "age"]);
// "{"name":"Bob","age":40}"

另外Javascript本身也可以對物件本身實做toJSON的方法來進行加工，舉例來說，我們今天想要把name的部份都轉換為大寫輸出，那麼可以這麼做：

const obj = {
   "name": "Bob",
   "age": 40,
   "toJSON" : function() {
        return {
            name : this.name.toUpperCase(), 
            age  : this.age
        };
    }
}

const str = JSON.stringify(obj, ["name", "age"]);
// "{"name":"BOB","age":40}"

最後來介紹第三個參數，做為縮排輸出的配置：

如果是數字1 ~ 10，會自動換行並以指定數字作為縮排的層次。
也可以用某個字元作為縮排的識別。

const obj = {
   "name": "Bob",
   "age": 40
}

const str = JSON.stringify(obj, undefined, 2);
// "{
//     "name": "Bob",
//     "age": 40,
//     "childs": [
//       {
//         "name": "Justin",
//         "age": 10
//       }
//     ]
//  }"

Javascript: JSON.parse

主要從字串解析回Javascript的物件，常用於讀檔的時候，讀取json檔案後由於型態為字串，而我們希望解析為JSON物件較方便處理可以這樣：

const str = "{\\"name\\":\\"Bob\\",\\"age\\":40,\\"childs\\":[{\\"name\\":\\"Justin\\",\\"age\\":10}]}"
const obj = JSON.parse(str);
console.log(obj.name); // "Bob"