• :在线测试工具暂时不可用,小伙伴们可以使用本地编辑器来代替,绿叶全新版本正在快马加鞭开发中,比心~

1.2 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数据。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取学习资源以及配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:519225291(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部