JSON教程三

最新推荐文章于 2024-07-24 00:59:39 发布

原创最新推荐文章于 2024-07-24 00:59:39 发布 · 254 阅读

0 ·

CC 4.0 BY-SA版权

大前端专栏收录该内容

16 篇文章

订阅专栏

JSON 对象

一个简单的 JSON 对象语法：

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

JSON 对象使用在大括号{}中书写，对象可以包含多个 key/value（键/值）对。

其中：

key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
key 和 value 中使用冒号(:)分割。
每个 key/value 对使用逗号(,)分割。

创建简单的对象

JSON 对象可以使用 JavaScript 创建。我们来看看使用 JavaScript 创建 JSON 对象的各种方式：

创建一个空对象：

var JSONObj = {};

创建一个新对象：

var JSONObj = new Object();

创建一个 bookname 属性值为字符串，price属性值为数字的对象。可以通过使用 '.' 运算符访问属性。

var JSONObj = { "bookname ":"VB BLACK BOOK", "price":500 };

例子：

<html>
<head>
<title>在JavaScript中使用JSON创建对象（w3cschool.cn）</title>
<script language="javascript" >

    var JSONObj = { "name" : "编程狮（w3cschool.cn）", "time"  : 2020 };
    document.write("<h1>JSON和JavaScript的例子</h1>");
    document.write("<h3>网站的名字="+JSONObj.name+"</h3>");  
    document.write("<h3>时间="+JSONObj.time+"</h3>");  

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



JSON和JavaScript的例子
网站的名字=编程狮（w3cschool.cn）
时间=2020

访问对象值

对于键名为数字或者非正常变量字符时（如有空格），必须使用[ ]方式获取值

你可以使用点号.来访问对象的值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>w3cschool</title>
</head>
<body>

<p>你可以使用点号.来访问 JSON 对象的值：</p>

<p id="demo"></p>

<script>

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

</script>

</body>
</html>


你可以使用点号.来访问 JSON 对象的值：

w3cschool

你也可以使用中括号[]来访问对象的值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>w3cschool</title>
</head>
<body>

<p>你也可以使用中括号[]来访问 JOSN 对象的值：</p>

<p id="demo"></p>

<script>

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

</script>

</body>
</html>


你也可以使用中括号[]来访问 JOSN 对象的值：

w3cschool

循环对象

你可以使用 for-in 来循环对象的属性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>w3cschool</title>
</head>
<body>

<p>使用 for-in 来循环对象的属性:</p>

<p id="demo"></p>

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

</body>
</html>


使用 for-in 来循环对象的属性:

name
alexa
site

在 for-in 循环对象的属性时，使用中括号[]来访问属性的值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>w3cschool</title>
</head>
<body>

<p>在 for-in 循环对象的属性时，使用中括号[]来访问属性的值：</p>

<p id="demo"></p>

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

</body>
</html>


在 for-in 循环对象的属性时，使用中括号[]来访问属性的值：

w3cschool
8000
null

创建数组对象

下面的例子展示了在 JavaScript 中使用 JSON 创建数组对象

<html>
<head>
<title>在 JavaScript 中使用 JSON 创建数组对象(w3cschool.cn)</title>
<script language="javascript" >

document.writeln("<h2>JSON数组对象(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>

JSON数组对象(w3cschool.cn)

Name	Pascal Made Simple
Price	700

Name	Guide to Pascal
Price	400

Name	Scala for the Impatient
Price	1000

Name	Scala in Depth
Price	1300

嵌套 JSON 对象

JSON 对象中可以包含另外一个 JSON 对象：

可以使用点号.或者中括号[]来访问嵌套的 JSON 对象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>w3cschool</title>
</head>
<body>

<p>访问 JSON 内嵌对象。</p>

<p id="demo"></p>

<script>
myObj = {
	"name":"w3cschool",
	"alexa":8000,
	"sites": {
		"site1":"www.w3cschool.cn",
		"site2":"m.w3cschool.cn",
		"site3":"www.w3cschool.cn/json/"
	}
}
document.getElementById("demo").innerHTML += myObj.sites.site1 + "<br>";
// 或者
document.getElementById("demo").innerHTML += myObj.sites["site1"];
</script>

</body>
</html>


访问 JSON 内嵌对象。

www.w3cschool.cn
www.w3cschool.cn

修改值

你可以使用点号.来修改 JSON 对象的值，也可以使用中括号[]来修改 JSON 对象的值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>w3cschool</title>
</head>
<body>

<p>使用中括号[]来修改 JSON 对象的值。</p>

<p id="demo"></p>

<script>
var myObj, i, x = "";
myObj = {
    "name":"w3cschool",
    "alexa":8000,
    "sites": {
        "site1":"www.w3cschool.cn",
        "site2":"m.w3cschool.cn",
        "site3":"www.w3cschool.cn/json/"
    }
}

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

for (i in myObj.sites) {
    x += myObj.sites[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;

</script>

</body>
</html>


使用中括号[]来修改 JSON 对象的值。

www.google.com
m.w3cschool.cn
www.w3cschool.cn/json/

JSON 对象和字符串的区别

JSON 对象和 JSON 字符串的区别：

JSON 对象:

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

JSON 字符串:

json字符串，是指该字符串变量的值与json的格式相同，但是不是json对象，需要转换为json对象

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

JSON的两种结构

JSON结构共有2种：

对象结构；
数组结构；

对象结构

对象结构是使用大括号“{}”括起来的，大括号内是由0个或多个用英文逗号分隔的“关键字:值”对（key:value）构成的。

语法：

var jsonObj =
{
    "键名1":值1,
    "键名2":值2,
    ……
    "键名n":值n
}

说明：

jsonObj指的是json对象。对象结构是以“{”开始，到“}”结束。其中“键名”和“值”之间用英文冒号构成对，两个“键名:值”之间用英文逗号分隔。

注意，这里的键名是字符串，但是值可以是数值、字符串、对象、数组或逻辑true和false。

JSON数组结构

JSON数组结构是用中括号“[]”括起来，中括号内部由0个或多个以英文逗号“,”分隔的值列表组成。

语法：

var arr =
[
    {
        "键名1":值1,
        "键名2":值2
    },
    {
        "键名3":值3,
        "键名4":值4
    },
    ……
]

说明：

arr指的是json数组。数组结构是以“[”开始，到“]”结束，这一点跟JSON对象不同。在JSON数组中，每一对“{}”相当于一个JSON对象，大家看看像不像？而且语法都非常类似。

注意，这里的键名是字符串，但是值可以是数值、字符串、对象、数组或逻辑true和false。