六、JavaScript 对象（1）——认识对象、常用对象

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...

此外，JavaScript 允许自定义对象。

1. 认识对象

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。

1.1 哪些内容是对象

1. 布尔型可以是一个对象

2. 数值型可以是一个对象

3. 字符串可以是一个对象

4. 日期也是一个对象

5. 数学和正则表达式也是对象

6. 数组是一个对象

7. 甚至函数也可以是对象

1.2 访问对象的属性

属性时与对象相关的值，访问对象的方法是 objectName.propertyName

var message = "Hello World!";
var x = message.length;     //这里就访问了一个字符串对象的属性

1.3 访问对象的方法

方法是在对象上执行的动作，访问对象的方法是objectName.methodName()

var message = "Hello World!";
var x = message.toUpperCase();  //这里是访问了一个字符串对象的方法

2. 创建 JavaScript 对象

通过 JavaScript，能够定义并创建自己的对象。创建对象有两种方法。

1. 使用 Object 定义并创建对象

2. 使用函数来定义对象，然后创建新的对象实例。

2.1 使用 Object 定义

2.1.1 构造函数定义

//1.以构造函数形式定义
var meinv = new Object();
​
//2.添加属性
meinv.name='苍';
meinv.sex='女';
meinv.age=35;
​
//3.添加方法
meinv.clean = function(){
    alert('我在帮你打扫卫生！');
}

2.1.2 使用花括号定义

//1.以花括号方式定义 
var shuaige = {
  name: '于谦',
  sex: '男',
  age: '50',
  
  smoke:function(){
        alert('正在抽烟');
  },
  drink:function(){
        alert('正在喝酒');
  },
};

2.2 使用对象构造器定义

//定义一个人物对象
function person(name,sex,age){
    this.name = name;
    this.sex = sex;
    this.age = age;
​
    this.changeName=changeName;
    function changeName(name)
    {
        this.name=name;
    }
}
​
//创建一个对象
var myFriend = new persion("张三","男","18");
​
//查看属性与使用方法
console.log(myFriend.name);
console.log(myFriend.changeName('李四'));

3. 常用对象

3.1 字符串对象

方法名	含义
length	字符串长度
charAt()	获取指定位置上的字符
indexOf()	获取指定字符活字符串首次出现的位置
lastIndexOf()	获取指定字符活字符串最后一次出现的位置
split()	按照指定字符活字符串将字符串拆分成数组

//定义一段字符串
var str1 = "get busy living, or get busy dying...";
var str2 = "要么忙着去生存，要么忙着去死亡";
​
//1.length：获取字符串长度
console.log(str1.length);   //37
console.log(str2.length);   //15
​
//2.charAt(): 获取指定位置上的字符【下标从0开始】
console.log(str1.charAt(4));    //b
​
//3.indexOf(): 获取指定字符或字符串首次出现的位置
console.log(str1.indexOf('u')); //5
​
//4.lastIndexOf(): 获取指定字符或字符串最后一次出现的位置
console.log(str2.lastIndexOf('忙着'));    //10
​
//5.split(): 按照指定字符或字符串来拆分字符串
var str3 = "张三##李四##王五##马六##赵七";
console.log(str3.split('##'));

3.2 数学对象

方法名	含义
Math.floor()	向下取整
Math.ceil()	向上取整
Math.round()	四舍五入
Math.max()	取最大值
Math.min()	取最小值
Math.abs()	求绝对值
Math.random()	随机一个0-1之间的数值

//数学对象常用方法
var num1 = 3.67;
var num2 = 3.14;
var num3 = 3.47;
​
//1.Math.floor()：向下取整
console.log(Math.floor(num1));  //3
​
//2.Math.ceil()：向上取整
console.log(Math.ceil(num2));   //4
​
//3.Math.round()：四舍五入
console.log(Math.round(num3));  //3
​
//4.Math.max()：从一组值中取出最大值
console.log(Math.max(3,1,5,3,8,10));    //10
​
//5.Math.min()：从一组值中取出最小值
console.log(Math.min(0.1,3,5,10,0.01)); //0.01
​
//6.Math.abs()：求绝对值
var num4 = -3.1583;
console.log(Math.abs(num4));    //3.1583
​
//7.Math.random()：随机数，随机一个指定范围的数字
console.log(Math.random());     //0.xxxxxxxxxx
​
console.log(rand(100,255));
​
//小案例：随机一个m与n之间的数
function rand(m, n){
  return Math.ceil(Math.random()*(n-m+1))+m-1;
}

3.3 日期对象

方法名	含义
getFullYear()	获取完整年份
getMonth()	获取月份 - 1
getDate()	获取日期
getDay()	获取星期（从0开始）
getHours()	获取小时
getMinutes()	获取分钟
getSecconds()	获取秒

//1. 数组定义
​
//① 使用 [] 定义
var movies = ['肖申克的救赎','阿甘正传','拯救大兵瑞恩','霸王别姬','控方证人'];
console.log(movies);
​
//② 使用 new Array() 定义
var fruit = new Array('苹果','香蕉','橘子','柚子');
console.log(fruit);
​
​
//2.数组常用属性：length，统计数组当中元素个数
console.log(fruit.length);
​
​
//3.数组元素的增、删、改、查
​
//① 往数组中追加一个元素
movies[5] = '怦然心动';
console.log(movies);
​
//② 删除数组中的一个元素
delete movies[3];
console.log(movies);    //empty：代表空的意思
​
//③ 修改数组中的一个元素
movies[0] = '刺激1995';
console.log(movies);
​
//④ 查找数组中的一个元素
console.log(movies[2]); //拯救大兵瑞恩
​
​
//4.遍历数组【将数组中的元素一一取出的过程叫做遍历】
​
//① 使用for循环遍历
for(var i=0; i<fruit.length; i++){
  console.log(fruit[i]);
}
​
//② 使用for...in...方式遍历【把数组的下标放到 i 中】
for(var i in fruit){
  document.write(i+'>>>>>'+fruit[i]+'<br/>');
}

3.4 数组对象

方法名	含义
push()	从数组尾部追加一个新的元素进去
pop()	从数组尾部删除一个元素
splice()	从指定位置，删除指定元素个数
sort()	数组排序
reverse()	数组进行翻转
join()	用特定的分隔符将数组连接成一个字符串
concat()	将多个数组合并成一个大数组

//定义一个数组
var stars = ['张国荣','张学友','梁朝伟','郭富城','黎明','陈百强','谭咏麟'];
​
//1.push：从数组尾部追加一个新的元素进去
stars.push('梅艳芳');
console.log(stars);
​
//2.pop：从数组尾部删除一个元素
stars.pop();
console.log(stars);
​
//3.splice：从指定位置，删除指定元素个数
stars.splice(4,2);
console.log(stars);
​
//4.sort：数组排序   
var arr = [10,100,38,20,448,1004];
arr.sort(function(a,b){
    if(a>b){
        return 1;
    }else if(a==b){
        return 0;
    }else if(a<b){
        return -1;
    }
});
console.log(arr);
​
//5.reverse：数组进行翻转
console.log(arr.reverse());
​
//6.join：用特定的分隔符将数组连接成一个字符串
console.log(stars.join('=='));
​
//7.concat：将多个数组合并成一个大数组
var China = ['天安门','颐和园','圆明园'];
var England = ['白金汉宫','泰晤士河','伦敦塔桥'];
var America = ['纽约','拉斯维加斯','洛杉矶'];
​
console.log(China.concat(England, America));

3.5 时间对象

方法名	含义
getFullYear()	获取完整年份
getMonth()	获取月份 - 1
getDay()	获取日
getHours()	获取小时
getMinutes()	获取分钟
getSeconds()	获取秒

//1.获取一个时间对象【可以获取系统时间】
var timer = new Date(); //Sat Nov 14 2020 17:11:19 GMT+0800 (中国标准时间)
​
//2.常用方法
//① getFullYear()：获取完整年份
console.log(timer.getFullYear());   //2020
​
//② getMonth()：获取月份 - 1
console.log(timer.getMonth());  //10
​
//③ getDay()：获取日
console.log(timer.getDay());    //6
​
//④ getHours()：获取小时
console.log(timer.getHours());  //17
​
//⑤ getMinutes()：获取分钟
console.log(timer.getMinutes());    //15
​
//⑥ getSeconds()：获取秒
console.log(timer.getSeconds());    //12

3.6 页面时钟

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title> JavaScript：页面时钟 </title>
        <style type="text/css">
            #time{
                width:300px;
                height:50px;
                border:1px solid #ccc;
                text-align:center;
                line-height: 50px;
                font-size:20px;
            }
        </style>
    </head>
    <body>
        <div id="time"></div>
​
        <script type="text/javascript">
            //完成页面时钟
​
            //1.获取追加时钟的标签
            var time =document.getElementById('time');
​
            //2.开启定时器
            setInterval(function(){
​
                //3.实例化日期对象
                var timer = new Date();
​
                //4.获取年月日时分秒
                var year = timer.getFullYear();
                var month = timer.getMonth();
                var day = timer.getDay();
                var hours = timer.getHours();
                var minutes = timer.getMinutes();
                var seconds = timer.getSeconds();
​
​
                //5.拼装时钟字符串
                var clock = year+'年'+month+'月'+day+'日 '+hours+'时'+minutes+'分'+seconds+'秒';
​
                //6.在网页上输出时钟
                time.innerHTML = clock;
​
            },1000);
        </script>
    </body>
</html>

3.7 倒计时小程序

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title> JavaScript：[扩展]倒计时 </title>
        <style type="text/css">
            #box{
                width:500px;
                height:200px;
                line-height:200px;
                margin-top:100px;
                border:1px solid #eee;
                font-size:100px;
            }
        </style>
    </head>
    <body>
        <center>
            <h2>倒计时小程序</h2>
​
            请输入倒数秒数：<input type="text" id="second" value="0" name="">
​
            <button id="start">开始倒计时</button>
​
            <div id="box"></div>
        </center>
​
        <script type="text/javascript">
​
            //获取节点
            var second = document.getElementById('second');
            var box = document.getElementById('box');
            var button = document.getElementById('start');
            
            //1.button按钮的单击事件
            button.onclick = function(){
​
                //2.获取用户输入的秒数
                var time = second.value;
​
                //3.判断用户输入的描述是否大于2
                if(time <= 2){
                    alert('请输入大于2的数字');
                }else{
​
                    //4.将second和button设置为不可操作
                    box.style.background = 'white';
                    box.style.color = 'black';
                    box.innerHTML = time;
                    second.setAttribute('disabled','disabled');
                    button.setAttribute('disabled','disabled');
​
                    //5.开启定时器
                    var dingshi = setInterval(function(){
​
                        //6.时间自减
                        time--;
​
                        //7.写入box盒子
                        box.innerHTML = time;
​
                        //8.判断是否数到了0
                        if(time<=0){
​
                            time.value = 0;
                            box.innerHTML = '时间到';
                            box.style.background = 'red';
                            box.style.color = 'white';
                            second.removeAttribute('disabled');
                            button.removeAttribute('disabled');
​
                            //9.清除定时器
                            clearInterval(dingshi);
                        }
                    },1000);
                }
            }
​
        </script>
    </body>
</html>