DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JSON基礎 >> 1.2 JSON對象結構
1.2 JSON對象結構
編輯:JSON基礎     

JSON結構共有2種:

  • (1)對象結構;
  • (2)數組結構;

JSON,簡單來說就是JavaScript中的對象或數組,所以這兩種結構就是對象和數組。通過這兩種結構就可以表示各種復雜的結構。

這一節我們先來認識一下JSON對象結構。

一、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>

在浏覽器預覽效果如下:

1、從JSON中讀數據

對於JSON對象結構,讀取JSON非常簡單,獲取JSON中的數據共有2種方式。

語法:

 
jsonObj.key
jsonObj["key"]

說明:

jsonObj指的是JSON對象,key指的是鍵名。讀取JSON數據使用的是“.”操作符,這個跟JavaScript對象讀取屬性值是差不多的。

實際例子請看上面舉例。

2、向JSON寫數據

對於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>

在浏覽器預覽效果如下:

3、修改JSON中的數據

對於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>

在浏覽器預覽效果如下:

4、刪除JSON中的數據

對於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>

在浏覽器預覽效果如下:

5、遍歷JSON對象

對於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數據。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved