JSON 對象

2023-04-17 10:49 更新

我們來看一個簡單的 JSON 對象：

{ "name":"w3cschool", "alexa":8000, "site":null }

JSON 對象使用在大括號(?{}?)中書寫，對象可以包含多個 key/value（鍵/值）對。

其中：

  • key 必須是字符串，value 可以是合法的 JSON 數(shù)據(jù)類型（字符串, 數(shù)字, 對象, 數(shù)組, 布爾值或 null）。
  • key 和 value 中使用冒號(:)分割。
  • 每個 key/value 對使用逗號(,)分割。

創(chuàng)建簡單的對象

JSON 對象可以使用 JavaScript 創(chuàng)建。我們來看看使用 JavaScript 創(chuàng)建 JSON 對象的各種方式：

  • 創(chuàng)建一個空對象：
var JSONObj = {};
  • 創(chuàng)建一個新對象：
var JSONObj = new Object();
  • 創(chuàng)建一個 bookname 屬性值為字符串，price屬性值為數(shù)字的對象。可以通過使用 '.' 運算符訪問屬性。
var JSONObj = { "bookname ":"VB BLACK BOOK", "price":500 };

這里有一個例子，展示了在 JavaScript 中使用 JSON 創(chuàng)建對象，可以將下面的代碼保存為 json_object_w3cschool.htm：

 注：.htm格式是早期的.html格式，此處內(nèi)容無誤。

<html>
<head>
<title>在JavaScript中使用JSON創(chuàng)建對象（w3cschool.cn）</title>
<script language="javascript" >

    var JSONObj = { "name" : "編程獅（w3cschool.cn）", "time"  : 2020 };
    document.write("<h1>JSON和JavaScript的例子</h1>");
    document.write("<h3>網(wǎng)站的名字="+JSONObj.name+"</h3>");  
    document.write("<h3>時間="+JSONObj.time+"</h3>");  

</script>
</head>
<body>
</body>
</html>

現(xiàn)在讓我們嘗試使用 IE 或者任何其他啟用了 JavaScript 的瀏覽器打開這個頁面，這會生成如下所示結(jié)果：


訪問對象值

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

實例

var myObj, x;
myObj = { "name":"w3cschool", "alexa":8000, "site":null };
x = myObj.name;

嘗試一下 ?

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

實例

var myObj, x;
myObj = { "name":"w3cschool", "alexa":8000, "site":null };
x = myObj["name"];

嘗試一下 ?

循環(huán)對象

你可以使用 for-in 來循環(huán)對象的屬性：

實例

var myObj = { "name":"w3cschool", "alexa":8000, "site":null };
for (x in myObj) {
    document.getElementById("demo").innerHTML += x + "
";
}

嘗試一下 ?

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

實例

var myObj = { "name":"w3cschool", "alexa":8000, "site":null };
for (x in myObj) {
    document.getElementById("demo").innerHTML += myObj[x] + "
";
}

嘗試一下 ?

創(chuàng)建數(shù)組對象

下面的例子展示了在 JavaScript 中使用 JSON 創(chuàng)建數(shù)組對象，可以將下面的代碼保存為 json_array_object_w3cschool.htm：

<html>
<head>
<title>在 JavaScript 中使用 JSON 創(chuàng)建數(shù)組對象(w3cschool.cn)</title>
<script language="javascript" >

document.writeln("<h2>JSON數(shù)組對象(w3cschool.cn)</h2>");

var books = {
    "Pascal" : [ 
        { "Name"  : "Pascal Made Simple", "price" : 700 },
        { "Name"  : "Guide to Pascal", "price" : 400 }
    ],                       
    "Scala"  : [
        { "Name"  : "Scala for the Impatient", "price" : 1000 }, 
        { "Name"  : "Scala in Depth", "price" : 1300 }
    ]    
}    

var i = 0
document.writeln("<table border='2'><tr>");
for(i=0;i<books.Pascal.length;i++)
{   
    document.writeln("<td>");
    document.writeln("<table border='1' width=100 >");
    document.writeln("<tr><td><b>Name</b></td><td width=50>"
    + books.Pascal[i].Name+"</td></tr>");
    document.writeln("<tr><td><b>Price</b></td><td width=50>"
    + books.Pascal[i].price +"</td></tr>");
    document.writeln("</table>");
    document.writeln("</td>");
}

for(i=0;i<books.Scala.length;i++)
{
    document.writeln("<td>");
    document.writeln("<table border='1' width=100 >");
    document.writeln("<tr><td><b>Name</b></td><td width=50>"
    + books.Scala[i].Name+"</td></tr>");
    document.writeln("<tr><td><b>Price</b></td><td width=50>"
    + books.Scala[i].price+"</td></tr>");
    document.writeln("</table>");
    document.writeln("</td>");
}
document.writeln("</tr></table>");
</script>
</head>
<body>
</body>
</html>

現(xiàn)在讓我們嘗試使用 IE 或者任意其他啟用了 JavaScript 的瀏覽器打開這個頁面，和會生成如下所示結(jié)果：


嵌套 JSON 對象

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

myObj = {
    "name":"w3cschool",
    "alexa":10000,
    "sites": {
        "site1":"m.hgci.cn",
        "site2":"m.w3cschool.cn",
        "site3":"c.w3cschool.cn"
    }
}

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

實例

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

嘗試一下 ?

修改值

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

實例

myObj.sites.site1 = "m.hgci.cn";

嘗試一下 ?

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

實例

myObj.sites["site1"] = "m.hgci.cn";

嘗試一下 ?

JSON 對象和字符串的區(qū)別

JSON 對象和 JSON 字符串的區(qū)別：

JSON 對象

var str2 = { "name": "asan", "sex": "man" };

JSON 字符串

var str1 = '{ "name": "deyuyi", "sex": "man" }';


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號