对象

端脑

于 2019-12-14 13:57:25 发布

阅读量116

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43776742/article/details/103538567

版权

前端专栏收录该内容

90 篇文章 2 订阅

订阅专栏

普通对象

符合JSON格式的对象

JSON数据读取

普通对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

    <script type="text/javascript">
        // 描述一个学生的信息
        var stuName = "zs";
        var stuAge = 18;
        var stuTel = "13900000000";
        var stuHeight = "180cm";
        // 用对象描述李四 对象是一个整体
        var lisi = {
            stuName: "lisi", // 属性 属性名:属性值
            stuAge: 20,
            stuHeight: "178cm",
            stuTel: "18866666666",
            // 行为 
            study: function() {
                alert("good good study day day up");
            },
            eat: function() {
                alert("吃货一枚!!!");
            }
        };
        // 对象 由无序的属性集合 {k:v,k:v,k:v,....} 

        // 对象的成员访问 对象.成员
        //alert(lisi.stuName);
        //alert(lisi.stuAge);
        //lisi.study(); // 假如study() 等价与 window.study()

        // 动态添加属性
        lisi.isSingal = false;
        //alert(lisi.isSingal);
        lisi.coding = function() {
            alert("js大神");
        }
        lisi.coding();



        /*
            基本数据类型不能添加属性
            如下例所示：
        */
        var num = 10;
        num.index = 123;
        alert(num.index); // undefined



        var obj = {
            name: "lucy"
        };
        var obj2 = obj; // 地址的复制
        obj2.name = "lily";
        alert(obj.name); // lily
    </script>
</body>

</html>

返回上层目录

符合JSON格式的对象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
	   // json 一种标准的数据交换格式 属性必须用双引号引起来
	   var lisi = {
           "stuName": "lisi", // 属性 属性名:属性值
           "stuAge": 20,
           "stuHeight": "178cm",
           "stuTel": "18866666666",
           // 行为 
           "study": function() {
           		alert("good good study day day up");
           },
           "eat": function() {
           	    alert("吃货一枚!!!");
           }
       };
       alert(lisi.stuAge);
       alert(lisi["stuAge"]);
       alert(lisi.stuHeight);
       lisi.study();

	   // for in循环
       /*
           对象["属性名"] === 对象.属性名
           对象[变量] 不能这样如对象.变量 假如这样写表示对象的有个属性名是这个变量名
       */
       for(var k in lisi) {
       	   // k代表属性 lisi[k] 代表属性k对应的属性值
       	   console.log(k+"——>"+lisi[k]);
       }
	</script>
</body>
</html>

返回上层目录

JSON数据读取

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <ul></ul>
    <script type="text/javascript">
        // 
        var json = {
            "url": ["1.png", "2.png", "3.png", "4.png"],
            "desc": ["图片一", "图片二", "图片三", "图片四"]
        };
        // 打印所有的数据
        for (var k in json) {
            for (var i = 0; i < json[k].length; i++) {
                console.log(json[k][i]);
            }
        }

        // 定义一种数据结构 存储四个用户信息 四个用户可以用数组存储 每个用户可以用json格式表示
        var users = [{
            "uname": "user1",
            "psw": "1111"
        }, {
            "uname": "user2",
            "psw": "2222"
        }, {
            "uname": "user3",
            "psw": "3333"
        }, {
            "uname": "user4",
            "psw": "4444"
        }];

        // 把这些用户显示在列表
        var oUl = document.querySelector("ul");
        for (var i = 0; i < users.length; i++) {
            // 一个用户对应一个li
            var oLi = document.createElement("li");
            oLi.innerHTML = "用户名:" + users[i].uname + ",密码是" + users[i].psw;
            oUl.appendChild(oLi);
        }
    </script>
</body>

</html>

返回上层目录

返回目录

端脑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
对象

对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script type="text/javascript...
复制链接

扫一扫