什么是 JSON 文件？JavaScript 代碼示例

JSON 代表 JavaScript 對象表示法。JSON 文件以 .json 為擴(kuò)展名，其中的數(shù)據(jù)以鍵：值對表示，就像傳統(tǒng)的 JavaScript 對象一樣。不過，JSON 和對象并不完全相同。核心區(qū)別在于JSON中的key必須是雙引號，除number和null之外的值也必須是雙引號。如果您在編程過程中使用過 API，您可能知道什么是 JSON，因?yàn)楝F(xiàn)在很多 API 數(shù)據(jù)都采用 JSON 格式。如果您之前沒有使用過 API 并且您是一個絕對的初學(xué)者，那么您并不孤單。在本文中，我將向您介紹 JSON 的全部內(nèi)容以及如何充分利用它。

基本 JSON 語法

{
  "key1": "value1",
  "key2": "value2",
  "key3": "value3",
  "key4": 7,
  "key5": null,
  "favFriends": ["Kolade", "Nithya", "Dammy", "Jack"],
  "favPlayers": {"one": "Kante", "two": "Hazard", "three": "Didier"}
}

接受的 JSON 數(shù)據(jù)類型

JSON 可以定義在一個對象或一個數(shù)組中，它可能包含多個對象。因此，對象和數(shù)組是 JSON 中自動可接受的數(shù)據(jù)類型。它支持的其他數(shù)據(jù)類型是布爾值、空值和字符串。

JSON 不支持 undefined、function 和 date 等數(shù)據(jù)類型。

此外，JSON 還可以擴(kuò)展為其他數(shù)據(jù)格式，這些格式可能接受原始 JSON 不接受的額外數(shù)據(jù)類型。

此類擴(kuò)展的示例是 GeoJSON 和 BSON。GeoJSON 用于表示地理數(shù)據(jù)，而流行的數(shù)據(jù)庫服務(wù)提供商 MongoDB 使用 BSON。

例如，BSON 接受正則表達(dá)式、日期和時間戳作為數(shù)據(jù)類型，而 JSON 不接受。

JSON 語法規(guī)則

JSON 在支持的數(shù)據(jù)類型方面非常嚴(yán)格。如果您在代碼編輯器中安裝了 linter，它會在您輸入不受支持的數(shù)據(jù)類型或違反語法規(guī)則時立即通知您存在錯誤。

要知道的 JSON 語法規(guī)則：

• 如果將文件表示為對象，則文件中的所有數(shù)據(jù)必須用大括號括起來，如果它是數(shù)組，則必須用方括號括起來。
• 不允許單引號
• 每個 JSON 中的鍵必須是唯一的，并且必須用雙引號引起來
• 數(shù)字不能用雙引號括起來，否則它們將被視為字符串。
• 空數(shù)據(jù)類型不能用雙引號括起來。
• 布爾值只能為真或假。
• 除最后一項外，每個鍵值對都必須以逗號結(jié)尾
• 數(shù)組中的特定對象也必須以逗號結(jié)尾。

JSON 數(shù)據(jù)如何發(fā)送到客戶端（瀏覽器）

JSON 是出于將數(shù)據(jù)從服務(wù)器（例如數(shù)據(jù)庫）實(shí)時發(fā)送到客戶端（瀏覽器）的需要而創(chuàng)建的。

但是 JSON 數(shù)據(jù)不能以其原始的鍵值對形式傳輸?shù)綖g覽器，因此編程語言有操作 JSON 數(shù)據(jù)的方法。

例如，在 JavaScript 中，JSON.parse()將 JSON 數(shù)據(jù)轉(zhuǎn)換為對象，JSON.stringify()并將對象的鍵值對轉(zhuǎn)換為 JSON 數(shù)據(jù)。

Python 提供了諸如json.loads()將現(xiàn)有字符串轉(zhuǎn)換為 JSON 以及json.dumps()將對象轉(zhuǎn)換為 JSON 字符串等方法。

您可以使用 JavaScript 提供的兩種方法將基本 JSON 語法中的數(shù)據(jù)發(fā)送到瀏覽器。

如何使用 JavaScript 將 JSON 數(shù)據(jù)發(fā)送到客戶端（瀏覽器）

該JSON.stringify()方法返回一個與 JavaScript 對象完全相同的 JSON 字符串。您可以將它與 DOM 操作方法結(jié)合使用以在瀏覽器中顯示 JSON 數(shù)據(jù)，就像我在下面的代碼片段中所做的那樣：

<h2>Here is the Data from the JSON:</h2> 
<div id="json"></div>

 const JSONData = {
    "key1": "value1",
    "key2": "value2",
    "key3": "value3",
    "key4": 7,
    "key5": null,
    "favFriends": ["Kolade", "Nithya", "Dammy", "Jack"],
    "favPlayers": {"one": "Kante", "two": "Hazard", "three": "Didier"}
}

const JSONString = JSON.stringify(JSONData)
const JSONDisplay = document.querySelector("#json")
JSONDisplay.innerHTML = JSONString

在 JavaScript 代碼中，我們將 JSON 數(shù)據(jù)聲明為帶有標(biāo)識符 (name) 的對象字面量JSONData。我們使用 JavaScript 的JSON.stringify()方法將其轉(zhuǎn)換為字符串，并使用 DOM 的查詢選擇器方法獲取 HTML 中的空 div。這使得使用innerHTMLDOM 操作方法填充其中的 JSON 數(shù)據(jù)成為可能。

我們可以使用該JSON.parse()方法將 JSON 數(shù)據(jù)轉(zhuǎn)換為對象——它正在運(yùn)行：

<h2>Here is the Data from the JSON:</h2>
<div id="json"></div>

const JSONData =
     '{"name": "Kolade", "favFriends": ["Kolade", "Nithya", "Rocco", "Jack"], "from": "Africa"}';

   try {
     const JSONString = JSON.parse(JSONData);
     const JSONDisplay = document.querySelector("#json");
     JSONDisplay.innerHTML = JSONString.name + ", [" + JSONString.favFriends + "], " + JSONString.from;
   } catch (error) {
     console.log("Cannot parse the JSON Data");
   }

瀏覽器中的結(jié)果輸出如下所示：

結(jié)論

作為程序員，您離不開 JSON?，F(xiàn)在大多數(shù) API 都是用 JSON 而不是 XML 編寫的。

JSON 最初是為 JavaScript 設(shè)計的，但由于其獨(dú)立于語言的特性，現(xiàn)在許多其他編程語言都支持它。因此，許多語言都有使用它的庫。

我希望本教程為您提供了使用 JSON 所需的見解，以便您在遇到它時可以正確使用它。

更多有用的編程知識請多多關(guān)注W3Cschool。