JavaScript - JSON

什麼是 JSON？

JSON（JavaScript 物件表示法）是一種基於文字的資料格式，用於表示物件和資料結構。它是語言無關的，這意味著它可以與任何程式語言一起使用。JSON 通常用於在伺服器和 Web 應用程式之間交換資料，或者在兩個不同的 Web 應用程式之間交換資料。

JSON 特性

JSON 是一種語言無關的資料儲存格式。

語言無關
可用於表示物件和資料結構。
可用於在不同的程式語言之間交換資料。
可以巢狀在其他物件中。
可以包含任何型別的資料。

JSON 語法

JSON 資料表示為鍵值對。每個鍵值對用逗號分隔。JSON 資料寫在花括號內。

以下是一個簡單的 JSON 語法示例：

{
   "key1": value1,
   "key2": value2,
   ...
}

鍵名（key1、key2、…）始終用雙引號括起來。JSON 資料值（value1、value2、…）可以包含以下資料型別：

字串 - 用雙引號括起來的字元序列。
數字 - 整數或浮點數。
布林值 - true 或 false。
陣列 - 值的有序列表。
物件 - 鍵值對的無序集合。
null - 表示值不存在。

JSON 資料

JSON 資料的寫法與 JavaScript 物件的屬性寫法相同，都是鍵值對的形式。每個鍵值對由用雙引號括起來的鍵名、冒號和值組成。

"name":"John Doe"

JSON 資料和 JavaScript 物件屬性之間存在差異。JSON 資料中的鍵名始終用雙引號括起來，而物件屬性名則不需要。

JSON 物件

我們可以透過在花括號內寫入 JSON 資料來建立 JSON 物件。JSON 物件可以包含多個用逗號分隔的鍵值對。

{"name": "John Doe", "age": 30, "isStudent": false}

在 JavaScript 中，我們可以將 JSON 物件解析到變數中：

let person = {"name": "John Doe", "age": 30, "isStudent": false}

在上面的示例中，JSNO 物件包含三個 JSON 資料。

JSON 陣列

JSON 陣列寫在方括號內。我們將 JSON 資料寫入方括號內以建立 JSON 陣列。陣列可以包含物件。

[
   {
      "name": "John Doe",
      "age": 30,
      "occupation": "Software Engineer"
   },
   {
      "name": "Jane Doe",
      "age": 25,
      "occupation": "Doctor"
   }
]

在上面的示例中，一個數組包含兩個 JSON 物件。該陣列是 JSON 陣列。它是一種有效的 JSON 型別。

訪問 JSON 資料

我們可以使用點或括號表示法訪問 JSON 資料。

示例

在下面的示例中，我們建立了一個包含三個鍵名（name、age 和 occupation）的 JSON 物件，並將其解析到名為 person 的變數中。然後，我們使用點表示法訪問了 name，使用括號表示法訪問了 age。

<html>
<body>
   <div> Accessing JSON data </div>
   <div id="demo"></div>
   <script>
      const person = {
         "name": "John Doe",
         "age": 30,
         "occupation": "Software Engineer"
      }
      document.getElementById("demo").innerHTML = 
      "Name: "+person.name + "<br>"+
      "Age: "+person.age+ "<br>"+
      "Occupation: "+person.occupation;
   </script>
</body>
</html>

輸出

Accessing JSON data
Name: John Doe
Age: 30
Occupation: Software Engineer

從輸出中我們可以看到，它檢索了鍵名“John Doe”和“30”。

JSON 方法

下表顯示了 JSON 方法及其描述：

序號	名稱和描述
1	JSON.parse() 它解析 JSON 字串並建立一個 JavaScript 物件。
2	JSON.stringify() 它將 JavaScript 物件轉換為 JSON 字串。

序號

名稱和描述

JSON.parse()

它解析 JSON 字串並建立一個 JavaScript 物件。

JSON.stringify()

它將 JavaScript 物件轉換為 JSON 字串。

JSON 與 JavaScript 物件

JSON 物件與 JavaScript 物件相同。兩者可以相互轉換。但它們也有一些區別：

JSON 是語言無關的——可用於不同程式語言之間交換資料，但 JavaScript 物件只能在 JavaScript 中使用。

JSON 不能包含函式，而 JavaScript 物件可以包含函式作為屬性值。

JSON 資料中的鍵名始終用雙引號括起來，但在 JavaScript 物件中則不是這樣。

將 JSON 字串轉換為 JavaScript 物件

我們可以使用內建函式 JSON.parse() 將 JSON 轉換為 JavaScript 物件。為此，我們首先建立一個包含 JSON 物件的 JavaScript 字串。

let jsonString = '{"name": "John Doe", "age": 30, "isStudent": false}';

然後，我們使用 JSON.parse() 函式將字串轉換為 JavaScript 物件。

const jsonObject = JSON.parse(jsonString);

示例

在下面的示例中，我們定義了一個包含 JSON 物件的字串。然後我們使用 JSON.parse() 函式將 JSON 字串解析為 JavaScript 物件。最後，我們顯示了第一個 JSON 資料值。

<html>
<body>
   <div> Converting JSON string to JavaScript object</div>
   <div id="demo"></div>
   <script>
      let jsonString = '{"name": "John Doe", "age": 30, "isStudent": false}';
      const jsonObject = JSON.parse(jsonString);
      document.getElementById("demo").innerHTML = jsonObject.name;
   </script>
</body>
</html>

輸出

Converting JSON string to JavaScript object
John Doe

如輸出所示，上述程式將 JavaScript 物件轉換為 JSON 物件。

將 JavaScript 物件轉換為 JSON

我們可以使用 JavaScript 內建函式 JSON.stringify() 將 JavaScript 物件轉換為 JSON 字串。

<html>
<body>
   <div> Converting JavaScript object to JSON string </div>
   <div id="demo"></div>
   <script>
      const person = {
         name: "John Doe",
         age: 30,
         isStudent: false
      };
      const jsonString = JSON.stringify(person);
     document.getElementById("demo").innerHTML = jsonString;
   </script>
</body>
</html>

輸出

Converting JavaScript object to JSON string
{"name":"John Doe","age":30,"isStudent":false}

列印頁面