JavaScript - 内置对象

---

一、什么是内置对象

内置对象就是指JS语言自带的一些对象, 这些对象供开发者使用.

常用的内置对象有 : Math, Date, Array, String等.

二、Math对象

Math对象 不是一个构造函数, 所以我们不需要new 来调用, 而是直接使用里面的属性和方法.

属性

• Math.PI : 圆周率

方法

• Math.max() : 返回一组数中的最大值。

• Math.abs() : 绝对值.

<script>
    console.log(Math.abs('-1'));  // 1 , 隐式转换, 会把字符串型-1转换为数字型.
</script>

• Math.floor() : 向下取整.
• Math.ceil() : 向上取整.
• Math.round() : 四舍五入.

<script>
    console.log(Math.abs('-1'));  // 1 , 隐式转换, 会把字符串型-1转换为数字型.
    console.log(Math.floor(2.3));  //  2 , 向下取整.
    console.log(Math.ceil(2.3));  // 3, 向上取整.
    console.log(Math.round(4.5));  // 5, 四舍五入
</script>

• Math.random() : 返回一个浮点数, 伪随机数在范围从0到小于1，也就是说，从0（包括0）往上，但是不包括1（排除1）

// 得到两个数之间的随机整数
function ra(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

三、猜数字游戏

<script>
    function cai() {
        var num = ra(1, 10);
        var num1 = prompt('请输入一个数字');
        while (num1 != num) {
            num1 > num ? num1 = prompt('数字大了,请输入一个数字') : num1 = prompt('数字小了,请输入一个数字');
            // if (num1 > num) {
            //     alert('数字大了');
            //     num1 = prompt('请输入一个数字');
            // } else if (num1 < num) {
            //     alert('数字小了');
            //     num1 = prompt('请输入一个数字');
            // }
        }
        alert('正确')
    }
    function ra(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    cai();
</script>

四、Date(日期)对象

Date日期对象是一个构造函数, 必须使用new来调用.

使用Date对象

如果里面没有跟参数, 则会返回当前时间.

var date = new Date();

参数常用的写法

• 数字型

<script>
    var date = new Date(2021, 4, 08);
    console.log(date);  // Sat May 08 2021 00:00:00 GMT+0800 (中国标准时间)
</script>

• 字符串型

<script>
    var date = new Date('2018-10-26 20:9:8');
    // console.log(date);
    console.log(date);  // Fri Oct 26 2018 20:09:08 GMT+0800 (中国标准时间)
</script>

格式化日期年月日

获取总的毫秒数 (时间戳)

通过 valueOf() 获取

<script>
    var date = new Date();
    console.log(date.valueOf());  // 1623849364529
</script>

通过getTime()获取

<script>
    var date = new Date();
    console.log(date.getTime());  // 1623849421422
</script>

简单写法

<script>
    var date = +new Date();
    console.log(date);  // 1623849560198
</script>

通过Date.now()获取

<script>
   console.log(Date.now());  // 1623849677674
</script>

倒计时案例

<script>
    function daojishi(date) {
        var nowTime = +new Date();  // 当前毫秒数
        var inputTime = +new Date(date);  // 用户输入毫秒数
        var dat = (inputTime - nowTime) / 1000;  // 剩余时间的秒数
        var d = parseInt(dat / 60 / 60 / 24);  // 获取天数
        var h = parseInt(dat / 60 / 60 % 24);  // 获取小时
        var m = parseInt(dat / 60 % 60);  // 获取分钟
        var s = parseInt(dat % 60);  // 获取秒数
        console.log('还有' + d + '天' + h + '时' + m + '分' + s + '秒');
    }
    var dat1 = new Date('2021-6-17 0:0:0');
    daojishi(dat1.valueOf());
</script>

五、数组对象

创建数组对象的两种方式

1. 利用字面量创建数组

var arr = [1, 2, 3];

2. 利用new Array()

var arr = new Array(2);  // 这个2表示数组的长度为2, 里面有2个空的数组元素
var arr = new Array(2, 3); // 等价于 [2, 3], 这样写表示里面有2个数组元素 2和3

检测是否为数组的两种方式

1. instanceof 运算符检测是否为数组

<script>
    var arr = [];
    console.log(arr instanceof Array);  // true
</script>

2. Array.isArray() H5新增的方法

var arr = []
console.log(Array.isArray(arr))

添加删除数组元素的方法

• push(参数1...) : 末尾添加一个或多个元素, 注意修改原数组. 返回新的长度

<script>
    var arr = [1, 2, 3]
    arr.push('red')
    console.log(arr);  // [1, 2, 3, "red"]
</script>

• pop() : 删除数组最后一个元素, 把数组长度减1. 返回删除的元素值

<script>
    var arr = [1, 2, 3];
    console.log(arr.pop());  // 3
    console.log(arr);  // [1, 2]
</script>

• unshift(参数1...) : 向数组的开头添加一个或更多元素, 修改原数组. 并返回新的长度.

<script>
    var arr = [1, 2, 3];
    arr.unshift(0);
    console.log(arr);  // [0, 1, 2, 3]
</script>

• shift() : 删除数组的第一个元素. 返回第一个元素的值.

<script>
    console.log(arr.shift());  // 1
    console.log(arr);  // [2, 3]
</script>

案例 : 筛选数组

<script>
    var arr = [1500, 1200, 3300, 3320]
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] > 2000) {
            newArr.push(arr[i])
        }
    }
    console.log(newArr);
</script>

六、数组排序

• reverse() : 颠倒数组中元素的顺序, 无参数. 该方法会改变原来的数组, 返回新数组.
• sort() : 对数组的元素进行排序. 只针对个位数.

<script>
    var arr = [1, 2, 1, 3, 45, 3, 2]
    console.log(arr.reverse());  // [2, 3, 45, 3, 1, 2, 1]
    console.log(arr.sort());  // [1, 1, 2, 2, 3, 3, 45]
</script>

sort() 排序是根据ASCII 表排序的. 解决方法是

<script>
    var arr = [1, 22, 12, 53, 45, 3, 2]
    arr.sort(function (a, b) {
        return a - b;  // 升序的顺序排列
    });
    console.log(arr);
</script>

七、数组索引方法

• indexOf() : 数组中查找给定元素的第一个索引. 如果存在返回索引号, 不存在返回 -1.
• lastIndexOf() : 在数组中的最后一个索引. 如果存在返回索引号, 如果不存在返回 -1.

案例 : 数组去重

思路 : 遍历旧数组, 拿旧数组的元素去查询新数组, 如果该元素在新数组里面不存在则添加, 否则不添加.

<script>
    var arr = ['c', 'a', 'z', 'a', 'x', 'a', 'x'];
    var newArr = [];
    for (var i = 0; i <= arr.length; i++) {
        if (newArr.indexOf(arr[i]) == -1) {
            newArr.push(arr[i])
        }
    }
    console.log(newArr);
</script>

八、数组转换为字符串

• toString() : 把数组转换成字符串, 逗号分隔每一项.

<script>
    var arr = [1, 2, 3, 4, 5]
    console.log(arr.toString());  // 1,2,3,4,5
</script>

• join('分隔符') : 方法用于把数组中的所有元素转换为一个字符串.

<script>
    var arr = [1, 2, 3, 4, 5]
    console.log(arr.join('|'));  // 1|2|3|4|5
</script>

九、其他方法

• concat() : 连接两个或多个数组, 不影响原数组.
• slice() : 数组截取slice(begin, end), 返回被截取项目的新数组
• splice() : 数组删除splice(第几个开始, 要删除个数), 返回被删除项目的新数组.

<script>
    var arr = [1, 2, 3, 4, 5, 6];
    // 从索引1开始, 删除3个元素
    console.log(arr.splice(1, 3));  // [2, 3, 4]
    console.log(arr);  // [1, 5, 6]
</script>

<script>
    var arr = [1, 2, 3, 4, 5, 6];
    // 从第 2 位开始删除 0 个元素，插入“drum”
    console.log(arr.splice(2, 0, 'drum'));
    console.log(arr);  // [1, 2, "drum", 3, 4, 5, 6]
</script>