zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    bzoj1208 宠物收养所treap/splay/set
    Angular 下的 function
    argunlar 1.0.1 【数据绑定】
    argunlar 1.0.0 【hello,world】
    JavaScript编写风格指南 (三)
    JavaScript编写风格指南 (二)
    JavaScript编写风格指南 (一)
    AngularJS开发指南:表达式
    HTML5 移动开发(移动设备检测及对HTML5的支持)
    HTML5 移动开发(CSS3设计移动页面样式)
  • 原文地址:https://www.cnblogs.com/zhai1997/p/11430125.html
Copyright © 2011-2022 走看看