【JavaScript】内置对象（Math / 日期 Date / 数组 Array / 字符串 String / 堆栈 数据类型）

学习视频以及笔记参考来源：

JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibili

---

一、概述

• JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象。
• 前面两种对象是JS 基础 内容，属于 ECMAScript； 第三个浏览器对象属于我们JS 独有的， 我们JS API 讲解。
•  内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）。
• JavaScript 提供了多个内置对象： Math 、 Date 、 Array 、 String 等。
• 查阅文档： MDN: https://developer.mozilla.org/zh-CN/

二、Math

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

1、数学相关运算（绝对值 / 取整 / 最大值等）

Math.PI // 圆周率 
Math.floor() // 向下取整 
Math.ceil() // 向上取整 
Math.round() // 四舍五入
Math.abs() // 绝对值 
Math.max()/Math.min() // 求最大和最小值

    <script>
        // 1. Math.PI  --  圆周率
        console.log(Math.PI);

        // 2. Math.max()  --  取最大值
        console.log(Math.max(2, 5, 6, 8));  // 8
        console.log(Math.max(2, '字符串'));  // NaN
        console.log(Math.max());  // -Infinity

        // 3. 三个取整方法
        // (1) Math.floor()  --  [ 向下取整：往最小值取]
        console.log(Math.floor(-1.1));  // -2
        console.log(Math.floor(1.9));  // 1
        // (2) Math.ceil()  --  [ 向上取整：往最大值取 ]
        console.log(Math.ceil(1.1));  // 2
        console.log(Math.ceil(-1.9)); // -1
        // (3) Math.round()  --  [ 四舍五入：其他数字都是四舍五入, .5 特殊是往大了取 ]
        console.log(Math.round(1.2)); // 1
        console.log(Math.round(1.5)); // 2
        console.log(Math.round(-1.1)); // -1
        console.log(Math.round(-1.5)); // -1
        console.log(Math.round(-1.9)); // -2
    </script>

2、随机数方法 random()

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

// 得到一个两数之间的随机整数，包括两个数在内
function getRandom(min, max) { 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
}

3、案例：猜数字游戏

要求：① 先随机生成一个数。② 让用户来猜数，并给出猜大猜小的提示。③ 只有10次机会。

    <script>
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        var temp1 = 1, temp2 = 50;
        var count = 1;
        // console.log(getRandom(1, 10));
        var num = getRandom(temp1, temp2);
        alert('猜数字游戏开始啦~您只有10次机会哦！')
        do {
            var guess = prompt('第' + count + '次机会：' + '输入' + temp1 + '~' + temp2 + '之间的一个数字');
            if (guess > num) {
                alert('您的数字猜大了。')
                temp2 = guess;
            } else if (guess < num) {
                alert('您的数字猜小了。')
                temp1 = guess;
            } else {
                alert('恭喜您猜对了！')
                break;
            }
            count++;
        } while (count <= 10)
    </script>

三、Date 日期对象

• Date 实例用来处理日期和时间。
• Date 对象是一个构造函数 ，所以我们需要实例化后才能使用。

1、Date() 方法的使用 

• 获取当前时间必须实例化（因为Date是一个构造函数）。

var now = new Date();  // 实例化
console.log(now);  // 调用

var time1 = new Date();  // Date() 不写参数，就返回当前时间
var times = new Date('2022-05-09');  // Date() 写参数，就返回输入的时间
// 日期格式字符串：new Date('2019-5-1') 或者 new Date('2019/5/1')

2、日期格式化

2.1 案例：格式化当前日期

  输出：2019年8月8日 星期四        

    <script>
        function getDate() {
            var times = new Date();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
            console.log(times.getFullYear() + '年' + (times.getMonth() + 1) + '月' + times.getDate() + '日 ' + arr[times.getDay()]);
        }
        getDate();
    </script>

2.2 案例：格式化当前时间

  输出：HH : mm : ss   00 : 10 : 45

    <script>
        function getDate() {
            var times = new Date();
            var hour = times.getHours() < 10 ? '0' + times.getHours() : times.getHours();
            var minute = times.getMinutes() < 10 ? '0' + times.getMinutes() : times.getMinutes();
            var second = times.getSeconds() < 10 ? '0' + times.getSeconds() : times.getSeconds();
            console.log(hour + ':' + minute + ':' + second);
        }
        getDate();
    </script>

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

• Date 对象是基于1970年1月1日（世界标准时间）起的毫秒数。

// 实例化Date对象 
var now = new Date(); 

// 1. 用于获取对象的原始值 
console.log(date.valueOf()) 
console.log(date.getTime()) 

// 2. 简单写可以这么做 
var now = + new Date(); 

// 3. HTML5中提供的方法，有兼容性问题 
var now = Date.now();

    // 倒计时效果
    <script>
        function getMs() {
            var now = +new Date();
            var date = new Date('2022-05-09 18:00:00');
            var sum_s = (date - now) / 1000;  // 进行毫秒与秒之间的进制转换，求出秒数
            d = parseInt(sum_s / 60 / 60 / 24);  // 计算天数
            d = d < 10 ? '0' + d : d;  // 不足10前面加'0'
            h = parseInt(sum_s / 60 / 60 % 24);  // 计算小时
            h = h < 10 ? '0' + h : h;
            m = parseInt(sum_s / 60 % 60);  // 计算分钟
            m = m < 10 ? '0' + m : m;
            s = parseInt(sum_s % 60);  // 计算当前秒数
            s = s < 10 ? '0' + s : s;
            console.log(d + '天' + h + '时' + m + '分' + s + '秒');
        }
        getMs();
    </script>

四、Array 数组对象

1、创建数组对象的两种方式

    <script>
        // 创建数组的两种方式
        // 1. 利用数组字面量
        var arr1 = [1, 2, 3];

        // 2. 利用new Array()
        var arr2 = new Array();  // 创建一个新的数组
        var arr3 = new Array(2);  // 这个 2 表示数组的长度为2，里面有2个空的数组元素
        var arr3 = new Array(2, 3);  // 等价于[2, 3]
    </script>

2、检测是否为数组

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

var arr = [1, 23]; 
var obj = {}; 
console.log(arr instanceof Array); // true 
console.log(obj instanceof Array); // false 
console.log(Array.isArray(arr)); // true 
console.log(Array.isArray(obj)); // false

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

    <script>
        // 1. push( 参数1,... ) 方法：在末尾添加元素
        var arr1 = [1, 2, 3, 4, 5];
        arr1.push(6);
        console.log(arr1);  // [1, 2, 3, 4, 5, 6]
        console.log(arr1.push(1));  // 7 push(...)方法返回的是数组的长度
        console.log(arr1); // [1, 2, 3, 4, 5, 6, 1]

        // 2. unshift( 参数1,... ) 方法：在开头添加元素
        var arr2 = [1, 2, 3];
        arr2.unshift(6);
        console.log(arr2);  // [6, 1, 2, 3]
        console.log(arr2.unshift(2)); // 5 unshift(...)返回的是数组的长度
        console.log(arr2); // [2, 6, 1, 2, 3]

        // 3. pop() 方法：删除数组最后一个元素
        var arr3 = [1, 2, 3, 4];
        arr3.pop();
        console.log(arr3); // [1, 2, 3]
        console.log(arr3.pop()); // 3 返回值是删除的元素

        // 4. shift() 方法：删除数组的第一个元素
        var arr4 = ['red', 'pink', 'blue'];
        arr4.shift();
        console.log(arr4);  // ["pink", "blue"]
        console.log(arr4.shift());  // pink 返回值是删除的元素
    </script>

4、数组排序

    <script>
        // 1. reverse() 翻转数组，返回新数组
        var arr1 = [1, 2, 3, 4, 5];
        console.log(arr1.reverse());  // [5, 4, 3, 2, 1]

        // 2. sort() 排序，返回新数组（但要注意，需要内置函数来实现特定的排序）
        var arr2 = [1, 14, 12, 2, 45, 24];
        // console.log(arr2.sort()); // [1, 12, 14, 2, 24, 45] 并没有实现排序，原因是按照第一位来排序。
        arr2.sort(function (a, b) {
            return b - a; // 降序 [45, 24, 14, 12, 2, 1]
            // return a - b; // 升序 
        });
        console.log(arr2);
    </script>

5、数组索引方法

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

6、数组转换为字符串

    <script>
        var arr = ['red', 'blue', 'pink'];
        console.log(arr);  // ["red", "blue", "pink"]
        console.log(arr.toString());  // red,blue,pink
        console.log(arr.join('-')); // red-blue-pink 如果不给参数就默认逗号分隔
    </script>

五、String 字符串对象

1、基本包装类型

 2、字符串的不变形

 3、根据字符返回位置

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

4、根据位置返回字符 （重点）

4.1 语法

    <script>
        var str = 'abcoefoxyozzopp';
        console.log(str.charAt(3));  // o
        console.log(str.charCodeAt(3)); // 111 - o对应的ASCII码
        console.log(str[3]); // o
    </script>

4.2 案例：判断字符串中出现次数最多的字符，并统计其次数。

    <script>
        var str = 'abcoefoxyozzopp';
        var count = {};

        for (var i = 0; i < str.length; i++) {
            var chars = str.charAt(i);
            if (count[chars]) {
                count[chars]++;
            } else {
                count[chars] = 1;
            }
        }
        console.log(count);
        var max = 0;
        for (var k in count) {
            if (count[k] > max) {
                max = count[k];
                var ch = k;
            }
        }
        console.log('出现次数最多的字符是：' + ch + ', 出现的次数为：' + max);
    </script>

5、字符串操作方法（重点）

replace()方法 ：

        replace() 方法用于在字符串中用一些字符替换另一些字符。其使用格式如下：

replace(被替换的字符串， 要替换为的字符串)；

split()方法：

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

var str = 'a,b,c,d'; 
console.log(str.split(',')); // 返回的是一个数组 [a, b, c, d]

6、字符串作业

    <script>
        var str = 'abaasdffggghhjjkkgfddsssss3444343';
        // 1. 字符串的长度
        console.log(str.length);  // 33

        // 2. 取出指定位置的字符
        console.log(str.charAt(3));  // a

        // 3. 查找指定字符是否存在
        console.log(str.indexOf('i')); // -1

        // 4. 替换指定的字符
        console.log(str.replace('a', '*')); // *baasdffggghhjjkkgfddsssss3444343

        // 5. 截取指定位置的字符串
        console.log(str.substr(0, 5)); // abaas

        // 6. 找出以上字符串中出现次数最多的字符和出现的次数
        var count = {};
        for (var i = 0; i < str.length; i++) {
            var chars = str.charAt(i);
            if (count[chars]) {
                count[chars]++;
            } else {
                count[chars] = 1;
            }
        }
        console.log(count);
        var max = 0;
        var ch = '';
        for (var k in count) {
            if (count[k] > max) {
                max = count[k];
                ch = k;
            }
        }
        console.log('出现次数最多的字符是：' + ch + ', 出现的次数为：' + max);

        // 7. 给字符两头添加 @
        var str2 = '';
        var temp = '';
        for (var i = 0; i < str.length; i++) {
            temp = '@' + str.charAt(i) + '@';
            str2 = str2.concat(temp);
            // str2 += temp;
        }
        console.log(str2);
    </script>

六、简单数据类型与复杂数据类型

1、简单类型与复杂类型

• 值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型。string ，number，boolean，undefined，null。
• 引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型。通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

2、堆和栈

• 栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈； 简单数据类型存放到栈里面。
• 堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。 复杂数据类型存放到堆里面。
• JavaScript中没有堆栈的概念，通过堆栈的方式，可以让大家更容易理解代码的一些执行方式，便于将来学习其他语言。

3、简单类型的数据分配

• 值类型（简单数据类型）： string ，number，boolean，undefined，null。
• 值类型变量的数据直接存放在变量（栈空间）中。

4、复杂类型的数据分配 

• 引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等。
• 引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中。

5、简单类型传参

        函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。

6、复杂类型传参

        函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。