JSON結構共有2種:
JSON,簡單來說就是JavaScript中的對象或數組,所以這兩種結構就是對象和數組。通過這兩種結構就可以表示各種復雜的結構。
這一節我們先來認識一下JSON對象結構。
對象結構是使用大括號“{}”括起來的,大括號內是由0個或多個用英文逗號分隔的“關鍵字:值”對(key:value)構成的。
語法:
var jsonObj = { "鍵名1":值1, "鍵名2":值2, …… "鍵名n":值n }
說明:
jsonObj指的是json對象。對象結構是以“{”開始,到“}”結束。其中“鍵名”和“值”之間用英文冒號構成對,兩個“鍵名:值”之間用英文逗號分隔。
注意,這裡的鍵名是字符串,但是值可以是數值、字符串、對象、數組或邏輯true和false。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> var obj = { "name":"helicopter", "age":23, //JSON對象內部也有一個JSON對象 hobby: { "first":"swimming", "second":"singing", "third":"dancing" } } //讀取JSON數據 document.write("名字是:"+obj.name+"
"); document.write("第一項愛好是:"+obj.hobby.first); </script> </head> <body> </body> </html>
在浏覽器預覽效果如下:
對於JSON對象結構,讀取JSON非常簡單,獲取JSON中的數據共有2種方式。
語法:
jsonObj.key jsonObj["key"]
說明:
jsonObj指的是JSON對象,key指的是鍵名。讀取JSON數據使用的是“.”操作符,這個跟JavaScript對象讀取屬性值是差不多的。
實際例子請看上面舉例。
對於JSON對象結構,要往JSON中增加一條數據,也是使用“.”操作符。
語法:
jsonObj.key = 值; jsonObj["key"] = 值;
說明:
jsonObj指的是JSON對象,key指的是鍵名。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> var obj = { "name":"helicopter", "age":23, //JSON對象內部也有一個JSON對象 hobby: { "first":"swimming", "second":"singing", "third":"dancing" } } obj.gender = "男"; //或者obj["gender"]="男"; document.write("性別是:"+obj.gender); </script> </head> <body> </body> </html>
在浏覽器預覽效果如下:
對於JSON對象結構,要修改JSON中的數據,也是使用“.”操作符。
語法:
jsonObj.key = 新值;
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> var obj = { "name":"helicopter", "age":23, "gender":"男", //JSON對象內部也有一個JSON對象 hobby: { "first":"swimming", "second":"singing", "third":"dancing" } } obj.name = "小傑"; //或者obj["name"]="小傑"; document.write("姓名是:"+obj.name); </script> </head> <body> </body> </html>
在浏覽器預覽效果如下:
對於JSON對象結構,我們使用delete關鍵字來刪除JSON中的數據。
語法:
delete jsonObj.key;
說明:
刪除JSON中數據非常簡單,只需要使用delete關鍵字即可。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> var obj = { "name":"helicopter", "age":23, "gender":"男", //JSON對象內部也有一個JSON對象 hobby: { "first":"swimming", "second":"singing", "third":"dancing" } } delete obj.age; if(obj.age==null) { alert("JSON中的年齡項已經被刪除!"); } </script> </head> <body> </body> </html>
在浏覽器預覽效果如下:
對於JSON對象結構,可以使用for…in…循環來遍歷JSON對象中的數據。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> var obj = { "name":"helicopter", "age":23, "gender":"男", } for(var c in obj) { if(c=="name") { document.write("姓名是:"+obj[c]); } } </script> </head> <body> </body> </html>
在浏覽器預覽效果如下:
分析:
由於變量c是字符串,因此不能使用obj.c來獲取JSON數據,而必須使用obj[c]來獲取JSON數據。