什麼是JSON:理解語法、儲存JSON資料、示例

什麼是JSON:理解語法、儲存JSON資料、示例

JSON(JavaScript Object Notation)是一種為資料交換而設計的基於文字的檔案格式。它表示基於JavaScript物件語法的結構化資料。因此,JavaScript程式可以將JSON資料轉換為原生JavaScript物件,而無需解析或序列化資料。

JSON因其自描述、易於理解、輕量級和緊湊的風格而廣受歡迎。它與許多程式語言、環境和庫相容。

在本文中,我們將解釋JSON是什麼以及如何使用它來管理資料。我們還將為您提供可下載的備忘單,以幫助您瞭解這種資料格式。

什麼是JSON檔案以及為什麼要使用它

JSON是一種儲存結構化資訊的格式。它主要用於在伺服器和客戶端之間傳輸Web應用程式資料。JSON以字串或物件的形式出現在副檔名為.json的檔案中或在引號內,以其他檔案格式分配給變數。

JSON是擴充套件標記語言 (XML) 的一種簡單且輕量級的替代方案,XML作為一種資料交換格式已經變得不那麼普遍了。這是因為將XML轉換為JavaScript物件需要數十到數百行程式碼,並且需要根據要解析的特定元素進一步定製。

相比之下,JSON解析器只需一行程式碼即可將文字轉換為JavaScript,因為兩者的語法非常相似。

JSON利用伺服器端解析來提高響應能力。該過程不需要任何關於被解析物件的先驗知識。這就是JSON被廣泛用作標準資料交換格式的原因。

此外,它允許使用者通過使用稱為JSON padding (JSONP) 的方法從不同域請求資料,該方法採用回撥函式來傳輸JSON資料。它有效地繞過了同源策略的限制。

瞭解JSON語法

由於JSON結構基於JavaScript物件文字語法,因此它們有許多相似之處。

這些是JSON語法的核心元素:

  • 資料以key/value對的形式呈現。
  • 資料元素用逗號分隔。
  • 花括號{}確定物件。
  • 方括號[]表示陣列。

因此,JSON物件字面量語法如下所示:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{“key”:“value”,“key”:“value”,“key”:“value”.}
{“key”:“value”,“key”:“value”,“key”:“value”.}
{“key”:“value”,“key”:“value”,“key”:“value”.}

什麼是JSON:理解語法、儲存JSON資料、示例配圖1

值的型別

在本節中,我們將討論JSON值的型別。

Array

陣列是值的有序集合。陣列值可以包含JSON物件,這意味著它使用相同的鍵/值對概念。例如:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
"students":[
{"firstName":"Tom", "lastName":"Jackson"},
{"firstName":"Linda", "lastName":"Garner"},
{"firstName":"Adam", "lastName":"Cooper"}
]
}
{ "students":[ {"firstName":"Tom", "lastName":"Jackson"}, {"firstName":"Linda", "lastName":"Garner"}, {"firstName":"Adam", "lastName":"Cooper"} ] }
{
"students":[
{"firstName":"Tom", "lastName":"Jackson"},
{"firstName":"Linda", "lastName":"Garner"},
{"firstName":"Adam", "lastName":"Cooper"}
]
}

方括號內的資訊構成了三個物件的陣列。

什麼是JSON:理解語法、儲存JSON資料、示例配圖2

Object

JSON物件由兩個元件對組成:

  • Keys是字串——被引號包圍的字元序列。
  • Values是有效的JSON資料型別。它們可以是陣列、物件、字串、布林值、數字或空值的形式。

冒號放在每個鍵和值之間,用逗號分隔對。這兩個元件都用引號引起來。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
"employees":{
"firstName":"Tom",
"lastName":"Jackson"
}
}
{ "employees":{ "firstName":"Tom", "lastName":"Jackson" } }
{
"employees":{
   "firstName":"Tom",
   "lastName":"Jackson"
}
}

在這裡,employees是關鍵,而花括號內的一切都是物件。

什麼是JSON:理解語法、儲存JSON資料、示例配圖3

String

字串值是零個或多個Unicode字元的集合序列,它們用雙引號括起來。

例如:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{"firstName":"Tom"}
{"firstName":"Tom"}
{"firstName":"Tom"}

此示例顯示Tom表示一個字串,因為它是雙引號內的一組字元。

Number

JSON中的數字應該是integerfloating point

例如:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{“age”:30}
{“age”:30}
{“age”:30}

Boolean

Boolean包含truefalse作為值。

例如:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{“married”:false)
{“married”:false)
{“married”:false)

Null

Null是一個空值。這是為了表明沒有資訊。

例如:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{"bloodType":null}
{"bloodType":null}
{"bloodType":null}

儲存JSON資料的方法

儲存JSON資料的方法有兩種——物件和陣列。前者是鍵/值對集合,而後者是值列表。

在本節中,我們將進一步解釋使用物件和陣列儲存JSON資料。

使用物件

JSON物件以大括號開頭和結尾。它包含稱為屬性的鍵/值對,每行用逗號分隔。每個鍵和值之間都有一個冒號。

雖然鍵必須是字串,但值可以是六種JSON資料型別中的任何一種——字串、數字、物件、陣列、布林值或空值。

請注意,JSON物件與JSON資料型別中的物件不同。前者用作儲存資料的方法,而後者表示鍵/值對的關聯陣列。

讓我們看一個例子,我們有三個鍵/值對。firstName、lastNamegender是鍵,Tom、Jacksonmale是值。

JSON物件將如下所示:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
"firstName":"Tom",
"lastName":"Jackson",
"gender":"male"
}
{ "firstName":"Tom", "lastName":"Jackson", "gender":"male" }
{
"firstName":"Tom",
"lastName":"Jackson",
"gender":"male"
}

使用的值是字串,因此,它們也在引號內,就像鍵一樣。

使用陣列

另一種儲存資料的方法是使用陣列。這些值用方括號括起來,每行用逗號分隔。JSON陣列中的每個值都可以是不同的型別。

請記住,JSON陣列不同於作為值的陣列——後者由有序的元素集合組成,通常都是相同型別。

看看這個例子:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
"firstName":"Tom",
"lastName":”Jackson”,
“gender”:”male”,
"hobby":[
“football",
"reading",
"swimming"
]
}
{ "firstName":"Tom", "lastName":”Jackson”, “gender”:”male”, "hobby":[ “football", "reading", "swimming" ] }
{
"firstName":"Tom",
"lastName":”Jackson”,
“gender”:”male”,
"hobby":[
“football", 
"reading", 
"swimming"
]
}

這與之前的方法不同的是第四個鍵/值對。hobby是關鍵,方括號中有幾個值(足球、閱讀、游泳)代表一個陣列。

當與JSONP配對時,陣列可以用來克服跨域問題。它們還支援迴圈,讓使用者執行重複的命令來查詢資料,從而使過程更快、更有效。

JSON備忘單

下載JSON備忘單。

使用JSON編碼

這是JSON用法的一個簡單示例——為了清楚起見,我們將分解每個元素。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
"className":"Class 2B",
"year":2022,
"phoneNumber":null,
"active":true,
"homeroomTeacher":{"firstName":"Richard", "lastName":"Roe"},
"members":[{
"firstName":"Jane","lastName":"Doe"},
{"firstName":"Jinny","lastName":"Roe"},
{"firstName":"Johnny","lastName":"Roe"},
]
}
{ "className":"Class 2B", "year":2022, "phoneNumber":null, "active":true, "homeroomTeacher":{"firstName":"Richard", "lastName":"Roe"}, "members":[{ "firstName":"Jane","lastName":"Doe"}, {"firstName":"Jinny","lastName":"Roe"}, {"firstName":"Johnny","lastName":"Roe"}, ] }
{
  "className":"Class 2B",
  "year":2022,
  "phoneNumber":null,
  "active":true,
  "homeroomTeacher":{"firstName":"Richard", "lastName":"Roe"},
  "members":[{
      "firstName":"Jane","lastName":"Doe"},
      {"firstName":"Jinny","lastName":"Roe"},
      {"firstName":"Johnny","lastName":"Roe"},
      ]
}

以下是每對錶示的內容:

  • 第一行 “className”:”Class 2B” 是一個字串。
  • 第二對 “year”:2022 有一個數值。
  • 第三對 “phoneNumber”:null 代表一個空值——沒有值。
  • 第四對 “active”:true 是一個布林表示式。
  • 第五行 “homeroomTeacher”:{ “firstName”:”Richard”, “lastName”:”Roe” }表示一個物件字面量。
  • 最後,從第六行開始的指令碼是一個陣列。

小結

JavaScript Object Notation (JSON) 是一種人類可讀的基於文字的格式,專為資料交換而設計。許多程式語言、環境和庫都支援它。

JSON值得注意,因為它允許使用者使用JSONP功能跨域請求資料。更重要的是,它比XML更簡單、更輕量級。

JSON語法由兩個核心元素組成——作為六種可用資料型別之一的值和作為字串的鍵。

在儲存資料方面,JSON提供了兩種方法:

  • 物件。此方法以大括號開頭和結尾,並且有兩個或多個鍵/值對,用逗號分隔它們。每個鍵後面都有一個冒號,以將其與關聯的值區分開來。
  • 陣列。此方法使用方括號將元素括起來,並用逗號分隔它們。

評論留言