在 JavaScript 中處理 JSON 的教學

簡介

有很多種方法可以將 JSON 應用於 JavaScript。其最基本的使用方式之一是儲存資料。您還可以使用它在用戶端之間、伺服器之間，或從伺服器到用戶端傳輸資料。其他有用的應用包括設定和驗證資料以及生成資料結構的能力。

在本教學中，我們將探索如何在 JavaScript 程式中使用 JSON。如果您之前有使用 JavaScript 進行程式設計的經驗，這對您來說應該非常直觀。

什麼是 JSON？

JSON 代表 JavaScript 物件表示法（JavaScript Object Notation）。它是一種旨在實現共享不同類型資料的格式。JSON 主要利用 JavaScript 作為其主要程式語言。它也適用於其他語言，例如 Python, PHP, Ruby，以及 Java。它易於閱讀、極其輕量，且不需要太多格式化。您可以透過閱讀我們的教學來熟悉該格式的一般語法和結構： JSON 資料共享格式概述.

JSON 可以單獨使用，也可以在其他檔案格式中定義。單獨使用時，它使用 .json 副檔名。在其他格式中時，它會以引號內的 JSON 字串形式出現，或者作為分配給變數的物件出現。例如，JSON 也可以用於 .html 格式。這種格式允許您在伺服器和瀏覽器之間相對輕鬆地進行資料傳輸。

JSON 格式是基於文字的。鍵值資料出現在大括號中。以下是典型的 .json 檔案的外觀：

如果您的 JSON 物件位於 .js 或 .html 檔案中，它將像這樣顯示為一個變數：

在某些情況下，您可能會看到它們都在同一行中。這是當 JSON 在 JavaScript 檔案中渲染為字串而不是物件時：

您可以將 JSON 物件轉換為字串。當您想要進行快速資料傳輸時，這非常有用。

JSON 與 JavaScript 物件

正如我們之前提到的，JSON 適用於任何程式語言。然而，您只能使用 JavaScript 來處理 JavaScript 物件。JSON 和 JavaScript 的語法相似。不同之處在於 JavaScript 物件的鍵不需要引號。此外，JavaScript 物件可以使用函式作為值，這意味著它們受到的限制較少。

在以下範例中，我們展示了一個使用者的 JavaScript 物件。該使用者是 Sammy Shark，他們目前在線上：

如您所見，任何鍵（例如 first_name, last_name, online 或 full_name）周圍都沒有引號。此外，最後一行放置了一個函式值。如果您想以字串形式存取資料，您可以呼叫 user.first_name。如果您想要完整姓名，則可以使用 user.full_name()，因為它是一個函式。

如何存取 JSON 資料

正如我們在上一節中提到的，您可以使用點記法在 JavaScript 中存取 JSON 資料。讓我們以一個名為 sammy:

我們用來存取這些值的點記法將是：

變數排在最前面。接著，我們加上一個點。最後，我們指出想要存取的鍵。

假設我們想在 JavaScript 中建立一個警示，顯示 first_name 鍵的值。為了讓它顯示在彈出視窗中，我們將使用 JavaScript 的 alert() 函式，如下所示：

另一種存取 JSON 資料的方法是使用中括號語法。鍵應該放在中括號內的雙引號中。以下是前一個範例的延續：

如果您正在處理巢狀陣列元素該怎麼辦？在這種情況下，您必須呼叫該項目在陣列中的索引編號。請看以下範例：

假設我們希望存取字串 facebook。以下是我們如何使用點記法，並透過其索引編號來存取陣列中的該項目：

請記住，每個巢狀元素都要加上一個額外的點。

與 JSON 搭配使用的函式

接下來，我們將介紹幾個可以與 JSON 搭配使用的函式。當您可以將 JSON 從物件轉換為字串，或將字串轉換為物件時，資料傳輸和儲存就會變得非常容易。我們將探索如何以兩種不同的方式對 JSON 進行字串化（stringify）和解析（parse）：

• JSON.stringify()

當嘗試以輕量級的方式傳輸資料時，使用字串是更好的選擇。這就是為什麼它被用來儲存和在用戶端與伺服器之間傳輸資料。請考慮以下範例。假設您正在某台機器上收集使用者的設定資料。您需要將此資訊傳送到您的伺服器。為此，您會使用字串。然後您可以使用 JSON.parse() 將其轉換回來以進行讀取和操作。

我們在這裡要強調的函式是 JSON.stringify()。此函式會將 JSON 物件轉換為 JSON 字串。在此範例中，我們將把物件指派給變數 obj。我們將使用 JSON.stringify() 函式進行轉換。為此，我們將把 obj 傳遞給該函式，然後將字串指派給變數 s ，如下所示：

呼叫 s 變數將會以字串形式傳回 JSON：

• JSON.parse()

可以理解的是，JSON.parse() 具有相反的功能。在您完成資料傳輸後，您需要將其轉換回 JSON 物件，以便對其進行操作。一種選擇是使用 eval() 函式。然而，這種方法不太安全。這就是為什麼我們更傾向於使用 JSON.parse() 函式。

再次考慮前一個範例。我們將把字串 s 傳遞給 JSON.parse() 函式。然後，我們將為其指定一個新變數：

我們的新物件現在是 o。它將與 obj 相同。當我們在 HTML 檔案中考慮 JSON.parse() 時，會有更深入的了解，如下所示：

在這裡，您實際上可以看到我們是如何將字串 s 轉換為可檢索的物件。因此，JSON.parse() 是將 JSON 字串轉換為物件的安全選擇。

結論

正如我們在整篇教學中所看到的，JSON 在 JavaScript 中有很多應用。它特別有用，因為它幾乎可以與任何程式語言一起使用，這使它成為自然的首選。最重要的是，我們才剛剛接觸到皮毛而已。您還可以使用 JSON 做更多的事情。它已經在 API 中得到支援。

以下是來自 我們部落格 的更多資源，將有助於您使用 JavaScript 進行程式設計：

• 了解 原型與繼承在 JavaScript 中如何運作.
• 詳細探索 如何將 JavaScript 新增至 HTML.
• 如果您正在建置自己的網頁應用程式，請參考 我們關於如何選擇最佳伺服器設定的指南.

祝您程式設計愉快！