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

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

基本 JSON 語(yǔ)法

{
  "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 可以定義在一個(gè)對(duì)象或一個(gè)數(shù)組中，它可能包含多個(gè)對(duì)象。因此，對(duì)象和數(shù)組是 JSON 中自動(dòng)可接受的數(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ù)庫(kù)服務(wù)提供商 MongoDB 使用 BSON。

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

JSON 語(yǔ)法規(guī)則

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

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

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

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

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

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

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

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

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

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

該JSON.stringify()方法返回一個(gè)與 JavaScript 對(duì)象完全相同的 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)識(shí)符 (name) 的對(duì)象字面量JSONData。我們使用 JavaScript 的JSON.stringify()方法將其轉(zhuǎn)換為字符串，并使用 DOM 的查詢選擇器方法獲取 HTML 中的空 div。這使得使用innerHTMLDOM 操作方法填充其中的 JSON 數(shù)據(jù)成為可能。

我們可以使用該JSON.parse()方法將 JSON 數(shù)據(jù)轉(zhuǎn)換為對(duì)象——它正在運(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。現(xiàn)在大多數(shù) API 都是用 JSON 而不是 XML 編寫的。

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

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

更多有用的編程知識(shí)請(qǐng)多多關(guān)注W3Cschool。