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"
結語
這種資料交換格式以可讀性來講勝於XML格式，畢竟省去了太多的標記符號了，而且非常靈活彈性，以空間上來說也較XML輕量，但仍有改善空間，後面我們有會陸續介紹YAML、TOML這類型的資料交換格式，之間又有什麼不同、帶來什麼改善與好處…。
喜歡撰寫文章的你，不妨來了解一下：
Web3.0時代下為創作者、閱讀者打造的專屬共贏平台 — 為什麼要加入？
歡迎加入一起練習寫作，賺取知識！
