JavaScript 核心觀念(32)-物件-JSON

前言

接下來這章節來聊聊 JSON。

JSON

JSON 很特別,本身在形式上也與 JavaScript 的物件非常相像

1
2
3
4
{
"name":"Ray",
"fn":"SayHello"
}

但是在此 JSON 可以透過維基百科的說明來了解它跟 JavaScript 的關係

JSON(JavaScript Object Notation,JavaScript物件表示法,讀作/ˈdʒeɪsən/)是一種由道格拉斯·克羅克福特構想和設計、輕量級的資料交換語言,該語言以易於讓人閱讀的文字為基礎,用來傳輸由屬性值或者序列性的值組成的資料物件。儘管JSON是JavaScript的一個子集,但JSON是獨立於語言的文字格式,並且採用了類似於C語言家族的一些習慣。

但是這邊有一句話是重點

JSON 資料格式與語言無關。即便它源自JavaScript,但目前很多程式語言都支援 JSON 格式資料的生成和解析。

因此簡單來講 JSON 只是一個資料格式與 JavaScript 並沒有任何關係,因此如果你使用 JavaScript 的物件形式去撰寫 JSON 就可容易出現錯誤

1
2
3
4
{
name: 'Ray',
fn: 'SayHello',
}
1
2
3
4
{
"name":"Ray",
"fn":"SayHello"
}

以上是錯誤範例,因此你實際如果貼到一些編譯器中是會出現紅字錯誤的,例如:VSCode

因此我們可以了解到 JSON 屬性與值必定為雙引號的字串(紅色是錯誤的提示)

JSON 比較

另外提醒一下, JSON 結尾最後一個是不能加上「,」的。

剛剛有講到 JSON 與 JavaScript 物件最大差異有幾個

  • 必定為字串格式
  • 最後一個不可有逗號
  • 一定是採用雙引號而非單引號

那在這個狀況下該如何在 JavaScript 中使用呢?那麼這邊 JavaScript 就特別為了 JSON 格式出了互轉的

  • JSON.stringify()
    • 將物件轉為 JSON 格式
  • JSON.parse()
    • 將 JSON 轉為物件格式

首先先講講 JSON.stringify() 在 MDN 就有提供一系列的參考範本,因此這邊就直接貼上 MDN 範本給予參考

1
2
3
4
5
6
7
8
9
10
11
console.log(JSON.stringify({ x: 5, y: 6 }));
// expected output: "{"x":5,"y":6}"

console.log(JSON.stringify([new Number(3), new String('false'), new Boolean(false)]));
// expected output: "[3,"false",false]"

console.log(JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] }));
// expected output: "{"x":[10,null,null,null]}"

console.log(JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)));
// expected output: ""2006-01-02T15:04:05.000Z""

透過上面範例可以看到內容都會被轉換為一個字串與數字,但在這邊比較需要注意的是 undefinedNaN 或是 function 這種在轉換上就會有問題,直接變成一個 null

JSON.parse() 呢?以往我們在使用 JSON.parse() 只會帶入一個參數,但其實 JSON.parse() 可以這樣寫

以下範例來自 MDN

1
2
3
4
5
6
JSON.parse('{"p": 5}', function(k, v) {
if (typeof v === 'number') {
return v * 2;
}
return v;
});

因此 JSON.parse() 不單只是可以將字串轉為物件,還可以將所有內容呈現出來

1
2
3
4
JSON.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', function(k, v) {
console.log(v);
return v;
});

算是一個滿特別的作法呢。

參考文獻

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee Buy Me A Coffee

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ