【JavaScript】(十一) 内置对象

🍊 内置对象

JavaScript 中的对象分为3种：自定义对象、内置对象、浏览器对象
前面两种对象是 JS 基础内容，属于 ECMAScript；第三个浏览器对象属于JS 独有的
内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）
内置对象最大的优点就是帮助我们快速开发
JavaScript 提供了多个内置对象：Math、 Date 、Array、String等

🍊 查文档

学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN / W3C来查询。
➢ Mozilla 开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及HTML5 应用的 API。
➢ MDN

🍊 Math对象

1、Math 概述

➢ Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。

Math.PI                       // 圆周率
Math.floor()                  // 向下取整
Math.ceil()                   // 向上取整
Math.round()                  // 四舍五入版 就近取整 注意 -3.5 结果是 -3 
Math.abs()                    // 绝对值
Math.max()/Math.min()         // 求最大和最小值
1
2
3
4
5
6

➢ 注意：上面的方法必须带括号

➢ 例子：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // Math数学对象 不是一个构造函数 ，所以我们不需要new 来调用 而是直接使用里面的属性和方法即可
        console.log(Math.PI);                   // 一个属性 圆周率
        console.log(Math.max(11,99,66));        // 99
        console.log(Math.max(-6,-8,-1));        //-1
        console.log(Math.max(12,45,'JJ'));      // 如果有任一参数不能被转换为数值，则结果为 NaN
        console.log(Math.max());                // 如果没有参数，则结果为 -Infinity
    script>
head>
<body>
   
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

结果展示：
内置对象例子
➢ 例子（封装一个自己的数学对象）：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // 利用对象封装自己的数学对象  里面有 PI 最大值和最小值
        var myMath = {
            PI:3.141592653,
            max:function(){
                var max = arguments[0];
                for(var i=1;i<=arguments.length;i++){
                    if(arguments[i]>max){
                        max = arguments[i];
                    }
                }
                return max;
            },
            min:function(){
                var min = arguments[0];
                for(var i=1;i<=arguments.length;i++){
                    if(arguments[i]<min){
                        min = arguments[i];
                    }
                }
                return min;
            }
        }
        console.log(myMath.PI);
        console.log(myMath.max(12,34,89,67,45));
        console.log(myMath.min(45,67,98,12,23));
    script>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

结果展示：
封装一个自己的数学对象

➢ 绝对值：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // 绝对值
        console.log(Math.abs(6));           // 6
        console.log(Math.abs(-6));          // 6
        console.log(Math.abs('-6'));        // 隐式转换 会把字符串型 -6 转换为数字型
        console.log(Math.abs('lala'));      // NaN
    script>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

结果展示：
绝对值
➢ 取整：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // 三个取整方法
        // (1) Math.floor()    向下取整  往最小了取值
        console.log(Math.floor(1.1));     // 1
        console.log(Math.floor(1.9));     // 1
        // (2) Math.ceil()   ceil  向上取整  往最大了取值
        console.log(Math.ceil(2.2));      // 3
        console.log(Math.ceil(2.9));      // 3
        // (3) Math.round()   四舍五入  其他数字都是四舍五入，但是 .5 特殊 它往大了取
        console.log(Math.round(5.3));     // 5
        console.log(Math.round(5.5));     // 6
        console.log(Math.round(-5.1));    // -5
        console.log(Math.round(-5.5));    // -5（-5.5往大的方向取，因为是负数，往大的方向取，就是-5）
    script>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

结果展示：

2、随机数方法 random()

➢ random() 方法可以随机返回一个小数，其取值范围是 [0，1)，左闭右开 0 <= x < 1

例子：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // 1. Math对象随机数方法   random() 返回一个随机的小数  0 =< x < 1  左闭右开
        // 2. 随机数方法里面不跟参数
        console.log(Math.random());
        // 3. 得到两个数之间的随机整数 并且 包含这2个整数
        // Math.floor(Math.random() * (max - min + 1)) + min;
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        console.log(getRandom(1, 10));
        // 4. 随机点名  
        var arr = ['桑稚', '段嘉许', '桑延', '霜降', '许盛', '邵湛'];
        // console.log(arr[0]);
        console.log(arr[getRandom(0, arr.length - 1)]);
    script>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

结果展示：
随机数

案例：猜数字游戏

程序随机生成一个 1~ 10 之间的数字，并让用户输入一个数字，
1、如果大于该数字，就提示，数字大了，继续猜；
2、如果小于该数字，就提示数字小了，继续猜；
3、如果等于该数字，就提示猜对了，结束程序。

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // 猜数字游戏
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        var numRandom = getRandom(1, 10);
        while (true) {          // 死循环
            var num = parseFloat(prompt('欢迎来到猜数字游戏，请输入一个1~10的数字:'));
            if (num > numRandom) {
                alert('你猜的数大了哦~');
            } else if (num < numRandom) {
                alert('你猜的数小了哦~');
            } else if (num = numRandom) {
                alert('恭喜你猜对啦~');
                break;           // 退出整个循环结束程序
            }
        }
    script>
head>

<body>
    
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

结果展示：
猜数字

➢ 猜数字进阶：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // 猜数字游戏进阶，10次机会
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        var numRandom = getRandom(1,50);
        for(var i=1;i<=10;i++){
            var num = prompt('欢迎来到猜数字游戏，请输入一个1~50的数：');
            var count = 10-i;
            if(num>numRandom){
                alert('您猜的数大了哦，还有'+count+'次机会');
            } else if(num<numRandom){
                alert('您猜的数小了哦，还有'+count+'次机会');
            } else if(num=numRandom){
                alert('恭喜您猜对啦~🎉🎉🎉');
                break;
            }
        }
    script>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

结果展示：
猜数字进阶

🍊 日期对象

1、Date 概述

Date 对象和 Math 对象不一样，它是一个构造函数，所以需要实例化后才能使用
Date 实例用来处理日期和时间

2、Date()方法的使用

（1）获取当前时间必须实例化

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // 获取当前时间
        var now = new Date();
        console.log(now);
    script>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

结果展示：
获取当前日期

（2）Date() 构造函数的参数

➢ 如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为‘2022-7-26’，可以写成new Date(‘2022-7-26’) 或者 new Date(‘2022/7/26’)

如果Date()没有参数，就返回当前时间
如果Date()里面有参数，就返回括号里面输入的时间

例子：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        var date1 = new Date();
        console.log('当前时间是：'+date1);
        var date2 = new Date('2022-12-12 10:10:10');
        console.log('输出指定时间：'+date2);
    script>
head>
<body>
   
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

结果展示：
日期对象

3、日期格式化

方法名	说明	代码
getFullYear()	获取当年	dObj.getFullYear()
getMonth()	获取当月（0 - 11）	dObj.getMonth()
getDate()	获取当天日期	dObj.getDate()
getDay()	获取星期几（周日0到周六6）	dObj.getDay()
getHours()	获取当前小时	dObj.getHours()
getMinutes()	获取当前分钟	dObj.getMinutes()
getSeconds()	获取当前秒钟	dObj.getSeconds()

案例1：输出当前日期

➢ 输出日期的格式为：2022年7月26日星期二

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // 格式化日期 年月日 
        var date = new Date();
        console.log(date.getFullYear());       // 获取当年  2022
        console.log(date.getMonth()+1);          // 月份 返回的月份小1个月  获取当前月份要+1 
        console.log(date.getDate());           // 获取当天日期几号 26
        console.log(date.getDay());            // 获取星期几  2  星期一返回的是 1 星期六返回的是 6 但是 星期日返回的是 0
        // 格式化输出日期  2022年7月26日 星期二
        var year = date.getFullYear();
        var month = date.getMonth()+1;
        var dateNow = date.getDate();
        var week = date.getDay();
        var weekArr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        console.log('当前日期是：'+year+'年'+month+'月'+dateNow+'日 '+weekArr[week]);
    script>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

结果展示：
格式化日期年月日

案例2：输出当前时间

➢ 写一个函数，格式化日期对象，成为 HH:mm:ss 的形式比如 09:10:11

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        var date = new Date();
        console.log(date.getHours());         // 返回当前 小时
        console.log(date.getMinutes());       // 返回当前 分钟
        console.log(date.getSeconds());       // 返回当前 秒
        // 要求封装一个函数返回当前的时分秒  格式化输出时间：09:10:11
        function getTime(){
            var time = new Date();
            var h = time.getHours();
            h = h < 10 ? '0' + h : h;       // 三元表达式，如果h小于10，就在h前加0，如果大于10就返回原来的值
            var m = time.getMinutes();
            m = m < 10 ? '0' + m : m;       // 三元表达式，如果m小于10，就在m前加0，如果大于10就返回原来的值
            var s = time.getSeconds();
            s = s < 10 ? '0' + s : s;       // 三元表达式，如果s小于10，就在s前加0，如果大于10就返回原来的值
            return h+':'+m+':'+s;
        }
        console.log('当前时间是：'+getTime());
    script>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

结果展示：
格式化输出时分秒

4、获取日期的总的毫秒形式

➢ Date 对象是基于1970年1月1日（世界标准时间）起的毫秒数，经常利用总的毫秒数来计算时间，因为它更精确。

例子：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // 获得Date总的毫秒数(时间戳)  不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒数
        // 1. 通过 valueOf()  getTime()
        var date1 = new Date();
        console.log(date1.valueOf()); // 现在时间距离1970.1.1 总的毫秒数
        console.log(date1.getTime());
        // 2. 简单的写法 (最常用的写法)
        var date2 = +new Date(); // +new Date()  返回的就是总的毫秒数
        console.log(date2);
        // 3. H5 新增的 获得总的毫秒数
        console.log(Date.now());
    script>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

结果展示：
获得Date总的毫秒数(时间戳)

案例：倒计时

➢ 案例分析：

1、核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒相减，比如 05 分减去25分，结果会是负数的。
2、用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
3、把剩余时间总的毫秒数转换为天、时、分、秒（时间戳转换为时分秒）转换公式如下：
d = parseInt(总秒数/ 60/60 /24); // 计算天数
h = parseInt(总秒数/ 60/60 %24) // 计算小时
m = parseInt(总秒数 /60 %60 ); // 计算分数
s = parseInt(总秒数%60); // 计算当前秒数

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // 倒计时
        function countDown(time) {
            var nowTime = +new Date();                   // 当前时间的毫秒数
            var inputTime = +new Date(time);             // 指定时间的毫秒数
            var times = (inputTime - nowTime) / 1000;      // 时间间隔
            var d = parseInt(times / 60 / 60 / 24);            // 计算天数
            d = d < 10 ? '0' + d : d;                       // 三元表达式，天数小于10就在天数前面加0
            var h = parseInt(times / 60 / 60 % 24)             // 计算小时
            h = h < 10 ? '0' + h : h;                     // 三元表达式，小时小于10就在小时前面加0
            var m = parseInt(times / 60 % 60);              // 计算分数
            m = m < 10 ? '0' + m : m;                    // 三元表达式，分钟小于10就在分钟前面加0
            var s = parseInt(times % 60);                  // 计算当前秒数
            s = s < 10 ? '0' + s : s;                    // 三元表达式，秒小于10就在秒前面加0
            return d + '天' + h + '时' + m + '分' + s + '秒'
        }
        var inputTimes = prompt('请输入倒计时结束时间，输入格式为：2022-7-26 18:00:00');
        alert('倒计时为：'+countDown(inputTimes));
    script>
head>

<body>
    
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

结果展示：
倒计时

🍊 数组对象

1、数组对象的创建

➢ 创建数组对象的两种方式

字面量方式
new Array()

2、检测是否为数组

instanceof 运算符，可以判断一个对象是否属于某种类型
Array.isArray() 用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

例子：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // 检测是否为数组的两种方法
        var arr1 = [];       // 数组
        var arr2 = {};       // 对象
        // 法一：instanceof   运算符 它可以用来检测是否为数组
        console.log(arr1 instanceof Array);      // 是数组 返回true
        console.log(arr2 instanceof Array);      // 不是数组 返回false
        // 法二：Array.isArray(参数);  H5新增的方法  ie9以上版本支持
        console.log(Array.isArray(arr1));        // 是数组 返回true
        console.log(Array.isArray(arr2));        // 不是数组 返回false
    script>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

结果展示：
检测数组

3、添加删除数组元素的方法

方法名	说明	返回值
push(参数1…)	末尾添加一个或多个元素，注意修改原数组	返回新的长度
pop()	删除数组最后一个元素，把数组长度减1，无参数，修改原数组	返回它删除的元素的值
unshift(参数1…)	向数组的开头添加一个元素或更多元素，注意修改原数组	并返回新的长度
shift()	删除数组的第一个元素，数组长度减1，无参数，修改原数组	并返回第一个元素的值

添加数组元素

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // 添加数组
        // push(参数)，在数组末尾添加
        var arr1 = [1,2,3];
        arr1.push(4);
        console.log(arr1);
        console.log(arr1.push('aa'));      // 在数组末尾添加元素，并返回数组长度
        console.log(arr1);

        // unshift(参数)，在数组开头添加元素
        arr1.unshift('haha');
        console.log(arr1);
        console.log(arr1.unshift('JJ'));      // 在数组开头添加元素，并返回数组长度
        console.log(arr1);
    script>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

结果展示：
添加数组元素

删除数组元素

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // 删除数组元素
        var arr1 = ['aa','BB',1,2,'CC','dd']
        // pop()  无参数，删除最后数组的最后一个元素
        arr1.pop();
        console.log(arr1);
        console.log(arr1.pop());        // 删除数组的最后一个元素，并返回所删除的元素
        console.log(arr1);

        // shift()  无参数，删除数组的第一个元素
        arr1.shift();
        console.log(arr1);
        console.log(arr1.shift());      // 删除数组的第一个元素，并返回所删除的元素
        console.log(arr1);
    script>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

结果展示：
删除数组元素

筛选数组

➢ 要求：删除数组 [11,22,33,44,55,66,77,88,99] 中大于60的数，并将小于60的数存放在新的数组中

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // 筛选数组 删除数组中大于60的数，并将小于60的数存放在新的数组中
        var arr = [11,22,33,44,55,66,77,88,99];
        var newArr = [];
        for(var i=0;i<=arr.length;i++){     // 遍历数组
            if(arr[i]<60){
                newArr.push(arr[i]);        // 将小于60的数追加到新数组中
            }
        }
        console.log(newArr);
    script>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

结果展示：
筛选数组

4、数组排序

方法名	说明	是否修改原数组
reverse()	颠倒数组中元素的顺序，无参数	该方法会改变原来的数组，返回新数组
sort()	对数组的元素进行排序	该方法会改变原来的数组，返回新数组

例子：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // 颠倒数组
        var arr1 = [1,2,3,4,5,6];
        arr1.reverse();
        console.log(arr1);

        // 数组升序
        var arr2 = [2,6,1,89,34,5,67];
        arr2.sort(function(a,b){
            return a-b;
        })
        console.log(arr2);
        // 数组降序
        arr2.sort(function(a,b){
            return b-a;
        })
        console.log(arr2);
    script>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

结果展示：
数组排序

5、数组索引方法

方法名	说明	返回值
indexOf()	数组中查找给定元素的第一个索引	如果存在返回索引号，如果不存在，则返回-1
lastIndexOf()	在数组中的最后一个索引	如果存在返回索引号，如果不存在，则返回-1

例子：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
         // 返回数组元素索引号方法  indexOf(数组元素)  作用就是返回该数组元素的索引号 从前面开始查找
        // 如果数组中有多个相同元素，只返回第一个满足条件的索引号 
        // 如果在该数组里面找不到元素，则返回的是 -1  
        var arr = ['aa','bb','cc','dd','ee'];
        console.log(arr.indexOf('bb')); 
        console.log(arr.indexOf('ff'));         // 数组中没有该元素，返回-1
         // 返回数组元素索引号方法  lastIndexOf(数组元素)  作用就是返回该数组元素的索引号 从后面开始查找
        console.log(arr.lastIndexOf('dd'));
        console.log(arr.lastIndexOf('gg'));     // 数组中没有该元素，返回-1
    script>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

结果展示：
输出数组索引方法

案例：数组去重

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        function unique(arr) {
            var newArr = [];
            for (var i = 0; i < arr.length; i++) {
            	// 查找旧数组中的元素在新数组中是否存在，若不存在就添加到新数组里
                if (newArr.indexOf(arr[i]) === -1) {
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }
        var arr1 = unique(['c','s','d','c','n','s','d'])
        console.log(arr1);
    script>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

结果展示：
数组去重

6、数组转换为字符串

方法名	说明	返回值
toString()	把数组转换成字符串，逗号分隔每一项	返回一个字符串
join(‘分隔符’)	方法用于把数组中的所有元素转换为一个字符串	返回一个字符串

例子：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // 数组转换为字符串
        // toString()
        var arr1 = [1,2,3,4,5];
        console.log(arr1.toString());     // 转换为字符串，以逗号为分隔符
        // join('分隔符')
        console.log(arr1.join());         // 转换为字符串，默认以逗号为分隔符
        console.log(arr1.join('-'));      // 转换为字符串，以-为分隔符
    script>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

结果展示：
数组转换为字符串

7、数组对象的其他方法

方法名	说明	是否修改原数组
concat()	连接两个或多个数组，不影响原数组	返回一个新的数组
slice()	数组截取slice(begin,end)	返回被截取项目的新数组
splice()	数组删除splice(第几个开始，要删除的个数)	返回被删除元素的新数组，注意，这个会影响原数组

例子：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // 1、数组的连接
        var arr1 = [1,2,3];
        var arr2 = ['a','b','c'];
        console.log(arr1.concat(arr2));           // [1,2,3,'a','b','c']
        console.log(arr2.concat(arr1));           // ['a','b','c',1,2,3]
        // 2、数组截取 slice(begin,end)  左闭右开
        var arr3 = [1,2,3,'a','b','c'];
        console.log(arr3.slice(1,5));             // [2,3,'a','b'] 被截取的元素以新数组的形式返回
        // 3、数组删除  splice(第几个开始，要删除的个数) 
        console.log(arr3.splice(2,3));            // [3,'a','b'] 被删除的元素以新数组的形式返回
    script>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

结果展示：
数组的连接截取删除

🍊 字符串对象

1、基本包装类型

➢ 为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型：String、Number 和 Boolean。
➢ 基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。

2、字符串的不可变

➢ 指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。

➢ 如下图所示，str = ‘aaa’，后 str = ‘bbb’，过程分析：

我们声明了一个变量 str，给 str 赋值为 ‘aaa’，即在内存中开辟了一个空间，存储 ‘aaa’，str 指向了 ‘aaa’ 的空间，现给 str 重新赋值为 ‘bbb’，会在内存中开辟一个新的空间，存储 ‘bbb’，str 指向了 ‘bbb’ 空间，可是 ‘aaa’ 并没有被修改，还是存在于内存中的，这就是所说的字符串不可变。

字符串不可变

3、根据字符返回位置

➢ 字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串。

方法名	说明
indexOf(‘要查找的字符’,‘开始的位置’)	返回指定内容在元字符串中的位置，如果找不到就返回-1，开始的位置是index索引号
lastIndexOf()	从后往前找，只找第一个匹配的，索引号还是从左往右的顺序

例子：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // 字符串对象  根据字符返回位置  str.indexOf('要查找的字符', [起始的位置])
        var str = '山有木兮木有枝 心悦君兮君不知';
        console.log(str.indexOf('兮'));
        console.log(str.indexOf('兮', 4));        // 从索引号是4的位置开始往后查找
        console.log(str.lastIndexOf('兮'));       // 从后往前找，返回第一个匹配的字符的位置
    script>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

结果展示：
根据字符返回位置

案例：返回字符位置

➢ 查找字符串 ‘abcsdnasdzxageahua’ 中所有 a 出现的位置以及次数

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // 查找字符串'abcsdnasdzxageahua'中所有a出现的位置以及次数
        // 先查找第一个a出现的位置
        // 然后 只要indexOf 返回的结果不是 -1 就继续往后查找
        // 因为indexOf 只能查找到第一个，所以后面的查找，一定是当前索引加1，从而继续查找
        var str = 'abcsdnasdzxageahua';
        var index = str.indexOf('a');
        var count = 0;
        while(index != -1){
            console.log(index);
            count++;
            index = str.indexOf('a',index+1);
        }
        console.log('a出现了'+count+'次');
    script>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

结果展示：
查找字符串中某字符出现的次数

4、根据位置返回字符

方法名	说明	使用
charAt(index)	返回指定位置的字符(index字符串的索引号)	str.charAt(0)
charCodeAt(index)	获取指定位置处的字符所对应的ASCII(index索引号)	str.charCodeAt(0)
str[index]	获取指定位置处的字符	HTML5，IE8+支持和charAt()等效

例子：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // 根据位置返回字符
        // 1. charAt(index) 根据位置返回字符
        var str = 'abcde';
        console.log(str.charAt(3));
        // 遍历所有的字符
        for(var i=0;i<str.length;i++){
            console.log(str.charAt(i));
        }
         // 2. charCodeAt(index)  返回相应索引号所对应的字符的ASCII码
        console.log(str.charCodeAt(3));
        // 3. str[index]   H5新增的
        console.log(str[3]);
    script>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

结果展示：
根据位置返回字符

案例：返回字符位置

判断一个字符串 ‘asdzfcfxvfszcfdsax’ 中出现次数最多的字符，并统计其次数。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        var str = 'asdzfcfxvfszcfdsax';
        var obj = {};
        for(var i=0;i<str.length;i++){
            var chars = str.charAt(i);     // chars 是字符串的每一个字符
            if(obj[chars]){                // obj[chars] 得到的是属性值
                obj[chars]++;
            } else{
                obj[chars]=1;
            }
        }
        console.log(obj);
        // 遍历对象
        var max = 0;
        var value1 = '';
        for(var k in obj){
            // k 得到是 属性名
            // o[k] 得到的是属性值
            if(obj[k]>max){
                max = obj[k];
                value1 = k;
            }
        }
        console.log('出现最多的字符是'+value1+'，出现了'+max+'次');
    script>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

结果展示：
统计出现最多的字符和次数

5、字符串操作方法

方法名	说明
concat(str1,str2,str3…)	concat()方法用于连接两个或多个字符串。拼接字符串，等效于+，+更常用
substr(start,length)	从start位置开始（索引号），length 取的个数
slice(start,end)	从start位置开始，截取到end位置，end取不到（它们俩都是索引号）
substring(start,end)	从start位置开始，截取到end位置，end取不到，基本和slice相同，但是不接受负值

例子：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // 字符串拼接
        var str1 = '123';
        // concat(str1,str2,str3...)
        console.log(str1.concat('abc'));     // 123abc
        // 字符串截取
        var str2 = '醉卧沙场君莫笑';
        // substr(索引号,所取字符的个数)
        console.log(str2.substr(4,3));
        // slice(开始字符的索引号，结束字符的索引号)  左闭右开
        console.log(str2.slice(0,1));
        // substring(开始字符的索引号，结束字符的索引号)   左闭右开
        console.log(str2.substring(4,5));
    script>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

结果展示：
字符串操作方法

replace()方法

➢ replace() 方法用于在字符串中用一些字符替换另一些字符。

例子：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // 替换字符 replace('被替换的字符', '替换为的字符')
        var str1 = '121abc';
        console.log(str1.replace('1','k'));      // 即使字符中有多个相同的字符，但只会替换从左往右遇到的第一个
        var str2 = 'asdzcdsascxdascdaf';
        while(str2.indexOf('s') !==-1){
            str2 = str2.replace('s','*');
        }
        console.log(str2);
    script>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

结果展示：
字符替换

split()方法

➢ split() 方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。

例子：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // 字符转换为数组 split('分隔符')
        var str1 = 'aa,bb,cc'
        console.log(str1.split(','));
        var str2 = '12*ab*34*cd';
        console.log(str2.split('*'));
    script>
head>
<body>
  
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

结果展示：
字符串转换为数组

大小写转换

toUpperCase() //转换大写
toLowerCase() //转换小写

例子：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // toUpperCase()     转换大写        
        // toLowerCase()     转换小写
        var str1 = 'abcde';
        console.log(str1.toUpperCase());
        var str2 = 'FGHIJ';
        console.log(str2.toLowerCase());
        var str3 = 'abcdEFGH';
        console.log(str3.toUpperCase());      // 将字符串中的小写字符转换为大写
        console.log(str3.toLowerCase());      // 将字符串中的大写字符转换为小写
    script>
head>
<body>
   
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

结果展示：
字符串大小写转换

相关阅读:
CCF CSP认证历年题目自练Day21
结构优于制度，软件开发中的康威定律
 热门项目披露：湖南民航置业有限公司70%股权转让
 人脸识别系统技术方案
 简述防抖与节流，必懂（含完整模拟实例）
2023养生健康品牌连锁加盟展/医养健康产业展/山东大健康展
 氟化钙光学窗口保护镜片光学元件红外测温窗口保护片
 基于Java的宠物医院管理系统设计与实现(源码+lw+部署文档+讲解等)
计算机考研操作系统题库
 mysql数据类型的一些坑
原文地址：https://blog.csdn.net/weixin_48650082/article/details/125978986

【JavaScript】(十一) 内置对象

目录

🍊 内置对象

🍊 查文档

🍊 Math对象

1、Math 概述

2、随机数方法 random()

案例：猜数字游戏

🍊 日期对象

1、Date 概述

2、Date()方法的使用

（1）获取当前时间必须实例化

（2）Date() 构造函数的参数

3、日期格式化

案例1：输出当前日期

案例2：输出当前时间

4、获取日期的总的毫秒形式

案例：倒计时

🍊 数组对象

1、数组对象的创建

2、检测是否为数组

3、添加删除数组元素的方法

添加数组元素

删除数组元素

筛选数组

4、数组排序

5、数组索引方法

案例： 数组去重

6、数组转换为字符串

7、数组对象的其他方法

🍊 字符串对象

1、基本包装类型

2、字符串的不可变

3、根据字符返回位置

案例：返回字符位置

4、根据位置返回字符

案例：返回字符位置

5、字符串操作方法

replace()方法

split()方法

大小写转换

案例：数组去重