json基礎知識串講（JSON教程簡介語法）

2023-04-23 19:01:29

JSON: JavaScript Object Notation(JavaScript 對象表示法)

JSON 是存儲和交換文本信息的語法。類似 XML。

JSON 比 XML 更小、更快，更易解析。

JSON 實例

{"sites": [{"name":"h5混合開發" , "url":"www.dongyibiancheng.com"}, {"name":"google" , "url":"www.google.com"}, {"name":"微博" , "url":"www.weibo.com"}]}

這個 sites 對象是包含 3 個站點記錄（對象）的數組。

什麼是 JSON ？

JSON 指的是 JavaScript 對象表示法（JavaScript Object Notation）

JSON 是輕量級的文本數據交換格式

JSON 獨立於語言：JSON 使用 Javascript語法來描述數據對象，但是 JSON 仍然獨立於語言和平臺。JSON 解析器和 JSON 庫支持許多不同的程式語言。 目前非常多的動態（PHP，JSP，.NET）程式語言都支持JSON。

JSON 具有自我描述性，更易理解

JSON - 轉換為 JavaScript 對象

JSON 是純文本

JSON 具有"自我描述性"（人類可讀）

JSON 具有層級結構（值中存在值）

JSON 可通過 JavaScript 進行解析

JSON 數據可使用 AJAX 進行傳輸

與 XML 不同之處

沒有結束標籤

更短

讀寫的速度更快

能夠使用內建的 JavaScript eval 方法進行解析

使用數組

不使用保留字

為什麼使用 JSON？

對於 AJAX 應用程式來說，JSON 比 XML 更快更易使用：

使用 XML

讀取 XML 文檔

使用 XML DOM 來循環遍歷文檔

讀取值並存儲在變量中

使用 JSON

讀取 JSON 字符串

用 eval 處理 JSON 字符串

JSON 語法是 JavaScript 語法的子集。

JSON 語法規則

JSON 語法是 JavaScript 對象表示法語法的子集。

數據在名稱/值對中

數據由逗號分隔

大括號保存對象

中括號保存數組

JSON 名稱/值對

JSON 數據的書寫格式是：名稱/值對。

名稱/值對包括欄位名稱（在雙引號中），後面寫一個冒號，然後是值：

"name" : "h5混合開發"

這很容易理解，等價於這條 JavaScript 語句：

name = "h5混合開發"

JSON 值

JSON 值可以是：

數字（整數或浮點數）

字符串（在雙引號中）

邏輯值（true 或 false）

數組（在中括號中）

對象（在大括號中）

null

JSON 數字

JSON 數字可以是整型或者浮點型：

{"age":30}

JSON 對象

JSON 對象在大括號（{}）中書寫：

對象可以包含多個名稱/值對：

{"name":"h5混合開發" , "url":"www.xxxx.com"}

這一點也容易理解，與這條 JavaScript 語句等價：

name = "h5混合開發"url = "www.xxxx.com"

JSON 數組

JSON 數組在中括號中書寫：

數組可包含多個對象：

{"sites": [{"name":"h5混合開發" , "url":"www.xxx.com"}, {"name":"google" , "url":"www.google.com"}, {"name":"微博" , "url":"www.weibo.com"}]}

在上面的例子中，對象 "sites" 是包含三個對象的數組。每個對象代表一條關於某個網站（name、url）的記錄。

JSON 布爾值

JSON 布爾值可以是 true 或者 false：

{"flag":true}

JSON null

JSON 可以設置 null 值：

{"runoob":null}

JSON 使用 JavaScript 語法

因為 JSON 使用 JavaScript 語法，所以無需額外的軟體就能處理 JavaScript 中的 JSON。

通過 JavaScript，您可以創建一個對象數組，並像這樣進行賦值：

實例

varsites = [{"name":"runoob" , "url":"www.xxxx.com"}, {"name":"google" , "url":"www.google.com"}, {"name":"微博" , "url":"www.weibo.com"}];

可以像這樣訪問 JavaScript 對象數組中的第一項（索引從 0 開始）：

sites[0].name;

返回的內容是：

runoob

可以像這樣修改數據：

sites[0].name="h5混合開發";

嘗試一下 »

在下面的章節，您將學到如何把 JSON 文本轉換為 JavaScript 對象。

JSON 文件

JSON 文件的文件類型是 ".json"

JSON 文本的 MIME 類型是 "application/json"

對象語法

實例

{"name":"runoob", "alexa":10000, "site":null}

JSON 對象使用在大括號({})中書寫。

對象可以包含多個 key/value（鍵/值）對。

key 必須是字符串，value 可以是合法的 JSON 數據類型（字符串, 數字, 對象, 數組, 布爾值或 null）。

key 和 value 中使用冒號(:)分割。

每個 key/value 對使用逗號(,)分割。

訪問對象值

你可以使用點號（.）來訪問對象的值：

實例

varmyObj, x;myObj = {"name":"runoob", "alexa":10000, "site":null};x = myObj.name;

嘗試一下 »

你也可以使用中括號（[]）來訪問對象的值：

實例

varmyObj, x;myObj = {"name":"runoob", "alexa":10000, "site":null};x = myObj["name"];

嘗試一下 »

循環對象

你可以使用 for-in 來循環對象的屬性：

實例

varmyObj = {"name":"runoob", "alexa":10000, "site":null};for(xinmyObj){document.getElementById("demo").innerHTML = x "";}

嘗試一下 »

在 for-in 循環對象的屬性時，使用中括號（[]）來訪問屬性的值：

實例

varmyObj = {"name":"runoob", "alexa":10000, "site":null};for(xinmyObj){document.getElementById("demo").innerHTML = myObj[x] "";}

嘗試一下 »

嵌套 JSON 對象

JSON 對象中可以包含另外一個 JSON 對象：

實例

myObj = {"name":"runoob", "alexa":10000, "sites": {"site1":"www.xxxx.com", "site2":"m.runoob.com", "site3":"c.runoob.com"}}

你可以使用點號(.)或者中括號([])來訪問嵌套的 JSON 對象。

實例

x = myObj.sites.site1;// 或者x = myObj.sites["site1"];

嘗試一下 »

修改值

你可以使用點號(.)來修改 JSON 對象的值：

實例

myObj.sites.site1 = "www.google.com";

嘗試一下 »

你可以使用中括號([])來修改 JSON 對象的值：

實例

myObj.sites["site1"] = "www.google.com";

嘗試一下 »

刪除對象屬性

我們可以使用 delete 關鍵字來刪除 JSON 對象的屬性：

實例

deletemyObj.sites.site1;

嘗試一下 »

你可以使用中括號([])來刪除 JSON 對象的屬性：

實例

deletemyObj.sites["site1"]

嘗試一下 »

數組作為 JSON 對象

實例

["Google", "Runoob", "Taobao"]

JSON 數組在中括號中書寫。

JSON 中數組值必須是合法的 JSON 數據類型（字符串, 數字, 對象, 數組, 布爾值或 null）。

JavaScript 中，數組值可以是以上的 JSON 數據類型，也可以是 JavaScript 的表達式，包括函數，日期，及 undefined。

JSON 對象中的數組

對象屬性的值可以是一個數組：

實例

{"name":"網站","num":3,"sites":["Google", "Runoob", "Taobao"]}

我們可以使用索引值來訪問數組：

實例

x = myObj.sites[0];

嘗試一下 »

循環數組

你可以使用 for-in 來訪問數組：

實例

for(iinmyObj.sites){x = myObj.sites[i] "";}

嘗試一下 »

你也可以使用 for 循環：

實例

for(i = 0; i < myObj.sites.length; i ){x = myObj.sites[i] "";}

嘗試一下 »

嵌套 JSON 對象中的數組

JSON 對象中數組可以包含另外一個數組，或者另外一個 JSON 對象：

實例

myObj = {"name":"網站", "num":3, "sites": [{"name":"Google", "info":["Android", "Google 搜索", "Google 翻譯"]}, {"name":"Runoob", "info":["h5混合開發", "h5混合開發工具", "h5混合開發微信"]}, {"name":"Taobao", "info":["淘寶", "網購"]}]}

我們可以使用 for-in 來循環訪問每個數組：

實例

for(iinmyObj.sites){x = "" myObj.sites[i].name ""; for(jinmyObj.sites[i].info){x = myObj.sites[i].info[j] ""; }}

嘗試一下 »

修改數組值

你可以使用索引值來修改數組值：

實例

myObj.sites[1] = "Github";

嘗試一下 »

刪除數組元素

我們可以使用 delete 關鍵字來刪除數組元素：

實例

deletemyObj.sites[1];

嘗試一下 »

JSON 通常用於與服務端交換數據。

在接收伺服器數據時一般是字符串。

我們可以使用 JSON.parse 方法將數據轉換為 JavaScript 對象。

語法

JSON.parse(text[, reviver])

參數說明：

text:必需， 一個有效的 JSON 字符串。

reviver: 可選，一個轉換結果的函數， 將為對象的每個成員調用此函數。

JSON 解析實例

例如我們從伺服器接收了以下數據：

{"name":"runoob", "alexa":10000, "site":"www.xxx.com"}

我們使用 JSON.parse 方法處理以上數據，將其轉換為 JavaScript 對象：

varobj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.xxx.com" }');

解析前要確保你的數據是標準的 JSON 格式，否則會解析出錯。

你可以使用我們的在線工具檢測：https://c.runoob.com/front-end/53。

解析完成後，我們就可以在網頁上使用 JSON 數據了：

實例

var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');document.getElementById("demo").innerHTML = obj.name "：" obj.site;

嘗試一下 »

從服務端接收 JSON 數據

我們可以使用 AJAX 從伺服器請求 JSON 數據，並解析為 JavaScript 對象。

實例

varxmlhttp = newXMLHttpRequest;xmlhttp.onreadystatechange = function{if(this.readyState == 4 && this.status == 200){myObj = JSON.parse(this.responseText); document.getElementById("demo").innerHTML = myObj.name; }};xmlhttp.open("GET", "/try/ajax/json_demo.txt", true);xmlhttp.send;

嘗試一下 »

查看服務端數據： json_demo.txt

從服務端接收數組的 JSON 數據

如果從服務端接收的是數組的 JSON 數據，則 JSON.parse 會將其轉換為 JavaScript 數組：

實例

varxmlhttp = newXMLHttpRequest;xmlhttp.onreadystatechange = function{if(this.readyState == 4 && this.status == 200){myArr = JSON.parse(this.responseText); document.getElementById("demo").innerHTML = myArr[1]; }};xmlhttp.open("GET", "/try/ajax/json_demo_array.txt", true);xmlhttp.send;

嘗試一下 »

查看服務端數據： json_demo_array.txt

異常

解析數據

JSON 不能存儲 Date 對象。

如果你需要存儲 Date 對象，需要將其轉換為字符串。

之後再將字符串轉換為 Date 對象。

實例

vartext = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';varobj = JSON.parse(text);obj.initDate = newDate(obj.initDate); document.getElementById("demo").innerHTML = obj.name "創建日期: " obj.initDate;

嘗試一下 »

我們可以啟用 JSON.parse 的第二個參數 reviver，一個轉換結果的函數，對象的每個成員調用此函數。

實例

vartext = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';varobj = JSON.parse(text, function(key, value){if(key == "initDate"){returnnewDate(value); }else{returnvalue;}}); document.getElementById("demo").innerHTML = obj.name "創建日期：" obj.initDate;

嘗試一下 »

解析函數

JSON 不允許包含函數，但你可以將函數作為字符串存儲，之後再將字符串轉換為函數。

實例

vartext = '{ "name":"Runoob", "alexa":"function {return 10000;}", "site":"www.runoob.com"}';varobj = JSON.parse(text);obj.alexa = eval("(" obj.alexa ")"); document.getElementById("demo").innerHTML = obj.name " Alexa 排名：" obj.alexa;

嘗試一下 »

不建議在 JSON 中使用函數。

瀏覽器支持

主流瀏覽器都支持 JSON.parse 函數：

Firefox 3.5

Internet Explorer 8

Chrome

Opera 10

Safari 4

,