js:引用数据类型(访问、添加、修改对象属性、遍历对象)

JavaScript也具有对象,用于将属性和函数放在一起,虽然他是面向对象的语言,但是不具备类和接口。

1、对象的定义

(1)字面量方式

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Java Script</title>
        <script type="text/javascript">
        </script>
    </head>

    <body bgcolor="aquamarine">
        <script>
            var Person = {
                name: "Li",//属性
                age: 12,
                per: function() {//函数
                    alert("你好");
                }
            }
            console.log(Person.name);
            console.log(Person.age);
            Person.per();
        </script>

    </body>

</html>

(2)var 变量名=new Object()方式

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Java Script</title>
        <script type="text/javascript">
        </script>
    </head>

    <body bgcolor="aquamarine">
        <script>
            var Person = new Object();
                Person.name="Li";
                Person.age=12;
                Person.per= function() {
                    alert("你好");
                }
            
            console.log(Person.name);
            console.log(Person.age);
            Person.per();
        </script>

    </body>

</html>

(3)构造函数方式创建对象

构造函数是一种特殊的函数,主要用来初始化对象,可以把一些公共的属性和方法抽取出来,然后封装到函数内

   <script>
            function User(username,password){
                this.username=username;
                this.password=password;
                this.hobby=function(hobby){
                    console.log(hobby);
                }
            }
            var u1= new User('zhai','123456');
            u1.hobby("rap");
            var u2= new User('zhang','666666');
            u2.hobby("篮球");
            console.log(u1);
            console.log(typeof u1);
            console.log(u2);
            
   </script>

2、对象属性的访问

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Java Script</title>
        <script type="text/javascript">
        </script>
    </head>

    <body bgcolor="aquamarine">
        <script>
            var Person = new Object();
                Person.name="Li";
                Person.age=12;
                Person.per= function() {
                    alert("你好");
                }
            
            console.log(Person["name"]);
            console.log(Person.age);
        
        </script>

    </body>

</html>

一共有两中访问方法:

(1)直接加点访问

(2)采用方括号访问,此方法对于属性名不规则的情况依旧适用。

3、对象的基本操作

(1)添加

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Java Script</title>
        <script type="text/javascript">
        </script>
    </head>

    <body bgcolor="aquamarine">
        <script>
            var Person = new Object();
                Person.name="Li";
                Person.age=12;
                Person.per= function() {
                    alert("你好");
                }
            
            Person.sex="";
            
            console.log(Person.sex);
        
        </script>

    </body>

</html>

(2)修改

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Java Script</title>
        <script type="text/javascript">
        </script>
    </head>

    <body bgcolor="aquamarine">
        <script>
            var Person = new Object();
                Person.name="Li";
                Person.age=12;
                Person.per= function() {
                    alert("你好");
                }
            
            Person.name="zhai";
            
            console.log(Person.name);
        
        </script>

    </body>

</html>

4、遍历对象

(1)for... in

输出属性名:

     <script>
            var Person = new Object();
                Person.name="Li";
                Person.age=12;
                Person.per= function() {
                    alert("你好");
                }
            
            Person.name="zhai";
            
            for(var a in Person){
                console.log(a);
            }
        
        </script>

 输出属性值:

  <script>
            var Person = new Object();
                Person.name="Li";
                Person.age=12;
                Person.per= function() {
                    alert("你好");
                }
            
            Person.name="zhai";
            
            for(var a in Person){
                console.log(Person[a]);
            }
        
        </script>

原文地址:https://www.cnblogs.com/zhai1997/p/11430125.html