JavaScript对象

发布时间 2023-12-21 10:05:45作者: 和哗

JavaScript对象

JavaScript对象是客观存在的实体,比如:人,小狗,小猫

对象的属性

对象的属性是指在对象内部的变量,用于描述对象特性的一组数据,比如人有身高体重

获取或设置对象的某属性值的语法:

对象名.属性名

举个例子:

//获取"用户"对象的属性
let  name  = 用户.用户名
let  password = 用户.用户密码

//设置 "用户" 对象的属性
用户.用户名 = "user";
用户.用户密码 = "123456";

另外,还可以使用数组的方式获取或设置对象的属性值,其语法格式:

对象名["属性名"]

对象方法

对象的方法是指在对象内部的函数|方法,用于实现某些功能。

调用方法格式:

对象名.方法名(参数列表)

创建对象

在JavaScript创建对象有三种方式

①直接创建对象

②通过Object对象创建对象

③通过自定义构造函数创建对象

直接创建对象

格式:

let  对象名  =  {
      属性名1 :  属性值1,
      属性名2 : 属性值2,
      。。。。。。。。
      属性名n :  属性值n,
      方法1  :  function(){
            方法体
      },
      。。。。。。。。
     方法n  :function(){
            方法体
     }
}

举个例子:

let  user = {
     name : "张三",
     age  : "男"
     eat  :  function(){
          document.write("姓名:"+ user.name + "<br />");
          document.write("年龄:"+ user.age);
    }
}

通过Object对象创建对象

语法:

function  对象名(参数1,参数2,.....,参数n){
         this.属性名1 = 参数1;
         this.属性名2 = 参数2;  
         。。。。。。
         this.属性名n = 参数n;
         this.方法1  = function(){
                  方法体
         };
         。。。。。。
        this.方法n  = function(){
                  方法体
         }
}

实例化对象格式:

调用构造函数实例化对象,必须使用new关键字。

let  新对象名  = new  对象名(实例参数1,实例参数2,......,实例参数n);

举个例子:

 1 function User(name, age){ //定义构造函数 User 
 2     this.name = name; //初始化对象的 name 属性
 3     this.age = age; //初始化对象的 age 属性
 4     this.show = function(){ //应用表达式定义对象的 show()方法
 5      document.write("姓名:"+this.name+"<br />");//输出 name 属性
 6         document.write("年龄:"+this.age+"<br />");//输出 age 属性
 7      } 
 8 } 
 9 var user1 = new User("张三", 20); //创建对象 user1 
10 var user2 = new User("李四", 25); //创建对象 user2 
11 user1.show(); //调用 show()方法
12 user2.show();

通过自定义构造函数创建对象

Object对象是JavaScript内部的对象,它提供创建对象的简单方式。

语法:

let  对象名  =  new   Object([value])
注意:
对象名必选项,表示创建的对象名称value可选项,可以是任意一种基本数据类型(如Number类型、Boolean类型或String类型)

举个例子:

使用Object对象创建一个对象user,并设置对象的属性和方法,然后调用方法。

//创建一个空的对象 user
let  user = new  Object();
//设置对象的name 属性
user.name = "张三";
//设置对象的age属性
user.age = 20;
//定义对象的方法
user.show = function(){
      //输出name属性
      document.write("姓名:"+user.name+"<br/>");
      //输出age年龄
      document.write("年龄:"+user.age);
}
user.show();

效果展示:

对象的访问

for .... in 语句

用于对某个对象所有属性进行循环操作,将该对象的所有属性名依次赋值给一个变量,而且无需知道对象属性的个数。

格式:

for(let  变量  in  对象){
         循环体
}

其中,变量用于存储某个对象所有属性名对象用于指定要遍历属性对象

格外补充一点:

当使用for ... in语句遍历对象的属性输出属性值是,一定使用数组的方式对象名["属性名"])进行输出

而不能使用"对象名.属性名"的方式进行输出。

String对象

 JavaScript自定义的String对象,里面提供大量方法,对字符串进行操作

 举个例子:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script>
 7             let str = '    This is a string     ';
 8             //length:获取字符串的长度
 9             console.log(str.length); //输出结果 25
10              
11             //replace(oldStr,newStr):将字符串中oldStr换成newStr(只换一次)
12             console.log(str.replace('a', 'an')); //输出结果 This is an string
13             
14             //replaceAll(oldStr,newStr):将字符串中oldStr换成newStr(全换)
15             console.log(str.replaceAll('s', 'x')); //输出结果   Thix ix a xtring
16             
17             //index(str):找到第一次出现str时的索引位置
18             console.log(str.indexOf('t'));//输出结果15
19             
20             //lastIndexOf(str):找到最后一次出现str时的索引位置
21             console.log(str.lastIndexOf('r'));//输出结果16
22             
23             //substring(begin,end):截取字符串从begin索引位置开始到end索引位置结束
24             console.log(str.substring(0, 10)); //输出结果  This i
25             
26              //substring(begin):截取字符串从begin索引位置开始全部截取
27             console.log(str.substring(5)); //输出结果  his  is a string
28             
29             //substr(begin,many):截取字符串从begin索引位置开始,一共截取many个元素
30             console.log(str.substr(2, 8)); // is a string
31             
32             //substr(begin):截取字符串从begin索引位置开始全部截取
33             console.log(str.substr(8));//输出结果  his is a string
34             
35             //toLowerCase():将字符串全部变小写
36             console.log(str.toLowerCase());//输出结果   this  is a  string
37             
38             //toUpperCase():将字符串全部变大写
39             console.log(str.toUpperCase()); //输出结果     THIS IS  A  STRING
40             
41             //split(a):以'a'为分隔符分割字符串,返回数组其中'a'必须在字符串中存在
42             console.log(str.split('s')); //输出结果["    Thi"," i"," a ","tring     "]
43             
44             //split(a,limit):以'a'为分隔符分割字符串,数组的元素个数为limit个,返回数组其中'a'必须在字符串中存在
45             console.log(str.split('s', 2)); //输出结果["    Thi"," i"]
46             //trim():去除字符串前后空格
47             console.log(str.trim()); //输出结果This is a string
48         </script>
49     </head>
50     <body>
51     </body>
52 </html>

效果展示:

 Date对象

Date 对象即日期对象,在日常开发中,涉及日期和时间的处理都可以通过该对象的方法实现,下面时Date 对象常用方法

 举个例子:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script>
 7             let date = new Date();
 8             //Date.now():返回自 1970-01-01 00:00到当前的时间的毫秒数(静态方法)
 9             console.log(Date.now());
10             //getTime():返回自 1970-01-01 00:00到当前的时间的毫秒数
11             console.log(date.getTime());
12             //getFullYear():获取4位数字形式的当前年份
13             console.log(date.getFullYear());
14             //getMonth():获取当前月份,范围0~11:0表示1月,1表示2月
15             console.log(date.getMonth());
16             //getDate():获取当前天范围1~31
17             console.log(date.getDate());
18             //getDay():获取当前星期几,范围0~6:0表示周日,1表示周一
19             console.log(date.getDay());
20             //getHours():获取当前小时数(24小时制,返回0~23)
21             console.log(date.getHours());
22             //getMinutes():获取当前分钟数,范围0~59
23             console.log(date.getMinutes());
24             //getSeconds():获取当前秒数,范围0~59
25             console.log(date.getSeconds());
26             //getMilliseconds():获取当前毫秒数,范围0~999
27             console.log(date.getMilliseconds());
28         </script>
29     </head>
30     <body>
31     </body>
32 </html>

效果展示: