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

前言

接下來這章節來聊聊 JSON。

JSON

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

{
  "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 就可容易出現錯誤

{
  name: 'Ray',
  fn: 'SayHello',
}

{
  "name":"Ray",
  "fn":"SayHello"
}

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

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

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

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

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

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

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

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

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""

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

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

以下範例來自 MDN

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

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

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

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

參考文獻

• JavaScript 核心篇