JavaScript - JSON：初學者指南

你好，未來的編程巫師們！今天，我們將踏上一段令人興奮的旅程，進入 JSON 的世界。如果你之前從未聽說過它，別擔心——在本教程結束時，你將能夠自信地像專家一樣使用 JSON。所以，拿起你喜歡的飲料，舒適地坐好，我們一起來深入探究吧！

JavaScript - JSON

JSON 是什麼？

JSON，全稱為 JavaScript Object Notation，是一種輕量級的數據交互格式。我知道這聽起來可能有些抽象，但你可以把它想像成計算機之間交流信息和分享數據的一種方式，這種方式既對機器友好，也對人類容易理解。

想像你在課堂上傳遞紙條（當然，我並不提倡這樣做！）。JSON 就像是書寫這些紙條的一種標準化方式，讓任何閱讀它的人都能快速且輕鬆地理解信息。

JSON 的特點

在我們深入細節之前，讓我們先看看 JSON 有哪些特別之處：

它輕量且易於閱讀。
它語言獨立（不僅限於 JavaScript）。
它基於兩種通用結構：對象和數組。

這些特點使 JSON 成為數據存儲和傳輸的絕佳選擇，這也是它在網頁應用程序中被廣泛使用的原因。

JSON 語法

現在，讓我們來看看 JSON 的基本語法。別擔心一开始看起来可能有些奇怪——我們會一步步分解它。

{
"name": "John Doe",
"age": 30,
"city": "New York"
}

這是一個簡單的 JSON 對象。讓我們來分解它：

整個對象被大括號 {} 包圍。
裡面有鍵-值對。
鍵總是字符串，用雙引號包圍。
值可以是字符串、數字、布爾值、數組、對象或 null。
鍵-值對之間用逗號分隔。

JSON 數據

JSON 可以表示各種類型的數據。讓我們看一些例子：

字符串

{"message": "Hello, World!"}

數字

{"age": 30}

布爾值

{"isStudent": true}

Null

{"spouse": null}

記住，JSON 的核心在於以一種容易理解和使用的形式表示數據。把它當成為每個信息片段創建一個詳細的個人資料。

JSON 對象

我們已經看過了一個簡單的 JSON 對象，但讓我們再深入一點。JSON 對象可以包含多個鍵-值對，甚至可以嵌套對象。

{
"person": {
"name": "Alice",
"age": 25,
"hobbies": ["reading", "cycling", "photography"],
"address": {
"street": "123 Main St",
"city": "Wonderland"
}
}
}

在這個例子中，我們有一個主對象，鍵為 "person"。"person" 的值是另一個包含各種信息的對象。注意我們如何嵌套對象，甚至包括數組（我們稍後會更多地談論這些）。

JSON 數組

JSON 數組是有序的值列表。它們被方括號 [] 包圍，並且可以包含任何類型的 JSON 數據。

{
"fruits": ["apple", "banana", "cherry"],
"numbers": [1, 2, 3, 4, 5],
"mix": [42, "answer", true, null]
}

數組在表示一系列相關項目時非常有用。例如，菜譜中的食材列表，或遊戲中的高分列表。

讀取 JSON 數據

現在我們知道了如何結構 JSON 數據，讓我們學習如何在 JavaScript 中訪問它。我們將使用前面提到的 person 對象作為例子。

let data = {
"person": {
"name": "Alice",
"age": 25,
"hobbies": ["reading", "cycling", "photography"],
"address": {
"street": "123 Main St",
"city": "Wonderland"
}
}
};

console.log(data.person.name); // 輸出：Alice
console.log(data.person.hobbies[1]); // 輸出：cycling
console.log(data.person.address.city); // 輸出：Wonderland

正如你所看到的，我們使用點語法來訪問對象屬性，並使用方括號來訪問數組元素。這就像按照地圖找到你想要的确切信息！

JSON 方法

JavaScript 提供了兩種主要方法來處理 JSON：

方法	描述
JSON.parse()	將 JSON 字符串轉換為 JavaScript 對象
JSON.stringify()	將 JavaScript 對象轉換為 JSON 字符串

讓我們看看這些方法是如何工作的：

// JSON.parse()
let jsonString = '{"name": "John", "age": 30}';
let obj = JSON.parse(jsonString);
console.log(obj.name); // 輸出：John

// JSON.stringify()
let person = {name: "Alice", age: 25};
let json = JSON.stringify(person);
console.log(json); // 輸出：{"name":"Alice","age":25}

這些方法就像翻譯員，幫助 JavaScript 和 JSON 有效通信。

JSON 與 JavaScript 對象的區別

雖然 JSON 與 JavaScript 對象看起來非常相似，但它們之間有一些關鍵差異：

JSON 鍵必須是字符串，並且用雙引號包圍。
JSON 值必須是以下類型之一：字符串、數字、對象、數組、布爾值或 null。
JSON 不支持函數或註釋。

以下是一個快速比較：

// 合法的 JavaScript 對象
let jsObj = {
name: 'John',
age: 30,
greet: function() { console.log('Hello!'); }
};

// 等效的 JSON
let jsonObj = {
"name": "John",
"age": 30
};

注意 JSON 版本中函數和未加引號的鍵是如何不存在的。

將 JSON 字符串轉換為 JavaScript 對象

我們已經看到了如何使用 JSON.parse() 將 JSON 字符串轉換為 JavaScript 對象，但讓我們看一個更複雜的例子：

let jsonString = '{"name":"Alice","pets":[{"type":"cat","name":"Fluffy"},{"type":"dog","name":"Rover"}]}';

let obj = JSON.parse(jsonString);

console.log(obj.name); // 輸出：Alice
console.log(obj.pets[0].name); // 輸出：Fluffy

這在從服務器接收數據時特別有用，因為數據通常以 JSON 字符串的形態傳遞。

將 JavaScript 對象轉換為 JSON

同樣，我們可以使用 JSON.stringify() 將 JavaScript 對象轉換為 JSON 字符串。這在向服務器發送數據時通常是必要的。

let person = {
name: "Bob",
age: 35,
hobbies: ["swimming", "painting"],
address: {
street: "456 Elm St",
city: "Dreamland"
}
};

let jsonString = JSON.stringify(person);
console.log(jsonString);
// 輸出：{"name":"Bob","age":35,"hobbies":["swimming","painting"],"address":{"street":"456 Elm St","city":"Dreamland"}}

就这样！你剛剛完成了 JSON 的速成課程。記住，熟能生巧，所以不要害怕嘗試創建和操作 JSON 數據。在你還未意識到之前，你將會像專家一樣使用 JSON！

Credits: Image by storyset