目录

目标

内置对象

查文档

MDN

学习对象中的方法步骤

Math 对象

案例：封装数学对象

Math 概述

Math 绝对值和取整方法

绝对值

取整

随机数方法

案例1：随机点名

案例2：猜数字游戏

Date 对象

Date 概述

Date() 方法的使用

获取当前时间

Date() 构造函数的参数

日期格式化

getFullYear()

输出当前日期和星期

封装一个函数，返回当前时间的时分秒

Date 总的毫秒数（时间戳） 

获取日期的总的毫秒形式

案例：倒计时效果

Array 对象

检测是否为数组

添加删除数组元素 

添加数组元素

删除数组元素

案例：筛选数组

数组排序

数组索引方法

案例：数组去重

数组转换为字符串

String 对象

基本包装类型

字符串的不可变

根据字符返回位置

案例：返回字符位置

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

案例：返回字符位置

字符串操作方法（重点）

替换字符串

字符串转换数组

转换大写

转换小写

目标

• 能够说出什么是内置对象
• 能够根据文档查询指定 API 的使用方法
• 能够使用 Math 对象的常用方法
• 能够使用 Date 对象的常用方法
• 能够使用 Array 对象的常用方法
• 能够使用 String 对象的常用方法

内置对象

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

查文档

MDN

• 学习一个内置对象的使用，只要学会其常用成员的使用即可
• 可以通过查阅文档学习，通过 MDN / W3C 来查询
• Mozilla 开发者网络（MDN）提供了有关开发网络技术（Open Web）的信息
• 包括 HTML、CSS 和万维网及 HTML5 应用的 API
• MDN 网址：http://developer.mozilla.org/zh-CN

学习对象中的方法步骤

1. 输入 MDN 网址点击进入，在搜索框中输入要查阅对象的方法名
2. 查阅该方法的功能（例如：max()）
3. 查看该方法参数的意义和类型
4. 查看返回值的意义和类型
5. 通过 demo 进行测试

Math 对象

• 可以通过 MDN 查询 Math 对象常用的属性和方法

    <script>
        // Math 数学对象不是一个构造函数，因此不需要 new 来调用
        // 直接使用里面的属性和方法即可
        console.log(Math.PI); // 属性：圆周率
        console.log(Math.max(6, 16, 8, 10)); // 方法：返回零到多个数值中的最大值
        console.log(Math.min(18, 8, 28, 0)); // 方法：返回零到多个数值中的最小值
        console.log(pow(x, y)); // 返回 x 的 y 次幂
        console.log(Math.random()); // 返回一个 0 ~ 1 之间的伪随机数
        console.log(Math.round(x)); // 返回四舍五入后的整数
    </script>

案例：封装数学对象

利用对象封装数学对象，里面有 PI 值，最大值，最小值

    <script>
        var myMath = {
            PI: 3.141592653589793,
            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 = 0; i < arguments.length; i++) {
                    if (arguments[i] < min) {
                        min = arguments[i];
                    }
                }
                return min;
            }
        }
        console.log(myMath.PI);
        console.log(myMath.max(6, 3, 9, 5));
        console.log(myMath.min(6, 3, 9, 5));
    </script>

Math 概述

Math 对象不是构造函数，它具有数学常数和函数的属性和方法

和数学相关的运算（求绝对值、取整、最大值等）可以使用 Math 中的方法

Math 绝对值和取整方法

绝对值

    <script>
        // Math 绝对值方法
        console.log(Math.abs(5.3));
        console.log(Math.abs(-5.3));
        console.log(Math.abs('3.5')); // 隐式转换
        console.log(Math.abs('-3.5'));
        console.log(Math.abs('常山赵子龙')); // NaN
    </script>

取整

• 向下取整：Math.floor()，返回小于括号中数字的最大整数
• 向上整数：Math.ceil()，返回大于括号中数字的最小整数
• 四舍五入取整：当小数部分为 .5 时，无论该数的正负，遵循向上取整

    <script>
        // 向下取整，返回小于括号中数字的最大整数
        // floor 地板
        console.log(Math.floor(1.1)); // 1
        console.log(Math.floor(1.9)); // 1
        console.log(Math.floor(-1.1)); // -2
        console.log(Math.floor(-1.9)); // -2
        // 向上取整，返回大于括号中数字的最小整数
        // ceil 天花板
        console.log(Math.ceil(1.1)); // 2
        console.log(Math.ceil(1.9)); // 2
        console.log(Math.ceil(-1.1)); // -1
        console.log(Math.ceil(-1.9)); // -1
        // 四舍五入取整
        // 当小数部分为 .5 时，无论正负遵循向上取整
        console.log(Math.round(1.1)); // 1
        console.log(Math.round(1.5)); // 2
        console.log(Math.round(1.9)); // 2
        console.log(Math.round(-1.1)); // -1
        console.log(Math.round(-1.5)); // -1
        console.log(Math.round(-1.9)); // -2
    </script>

随机数方法

• Math.random()
• 返回一个 0 到 1 之间的伪随机数
• 返回的是一个浮点数
• 返回的随机小数的取值范围：大于等于 0，小于 1
• 不能提供像密码一样安全的随机数字
• 不能使用它来处理有关安全的事情
• 处理安全事件应该使用 Web Crypto API 来代替，和更精确的 window.crypto.getRandomValues() 方法

    <script>
        // Math.random() 产生一个大于等于 0 小于 1 的浮点数
        // 括号内没有参数
        console.log(Math.random());
        // 得到一个指定的两个数之间的随机整数
        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min)) + min;
        }
        var num1 = getRandomInt(9, 16);
        console.log(num1);
        // 得到一个指定的两个数之间的随机整数，包括这两个数
        function getRandomInclusive(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        var num2 = getRandomInclusive(1, 10);
        console.log(num2);
    </script>

案例1：随机点名

    <script>
        // 得到一个指定的两个数之间的随机整数，包括这两个数
        function getRandomInclusive(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        // 随机点名
        var arr = ['刘备', '诸葛亮', '关羽', '张飞', '赵云', '马超', '黄忠', '刘禅', '姜维'];
        console.log(arr[getRandomInclusive(0, arr.length - 1)]);
    </script>

案例2：猜数字游戏

    <script>
        // 猜数字游戏
        // 程序随机生成一个 1~10 之间的数字
        // 用户输入数字
        // 1.用户输入的数字大于随机数，提示您的数字猜大了，并重新输入
        // 2.用户输入的数字小于随机数，提示您的数字猜小了，并重新输入
        // 3.用户输入的数字与随机数相等，恭喜您猜对了，结束程序
        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        var num1 = getRandomInt(1, 10);
        while (true) { // 当心死循环
            var num2 = prompt('请您输入您的猜测：');
            if (num2 > num1) {
                alert('您的猜测较大！');
            } else if (num2 < num1) {
                alert('您的猜测较小');
            } else {
                alert('恭喜您，猜对了！');
                break; // 退出整个循环结束程序
            }
        }
    </script>

Date 对象

• Date 对象是一个构造函数，必须使用 new 来创建日期对象
• Date() 如果没有输入任何参数，则 Date 构造器会根据系统设置的当前时间来创建一个 Date 对象
• Date() 如果提供了至少两个参数，其余的参数均会默认设置为 1（如果没有提供 day 参数）或者 0

参数常用写法：

• 数字型：2021, 7, 16  （输出结果为 2021,8,16）
• 字符串型：'2021-07-16 22:51:20'

Date 概述

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

Date() 方法的使用

获取当前时间

    <script>
        // Date() 日期对象
        // 构造函数，必须使用 new 来创建日期对象
        // 使用 Date()
        // 如果没有输入任何参数，则 Date 构造器会根据系统设置的当前时间来创建一个 Date 对象
        var date = new Date();
        console.log(date);
    </script>

Date() 构造函数的参数

• 如果括号内有一个参数，且此参数为时间，就返回参数里面的时间
• 参数常用写法：数字型：2021, 7, 16；字符串型：'2021-07-16 22:51:20'

    <script>
        // Date() 日期对象
        // 构造函数，必须使用 new 来创建日期对象
        // 使用 Date()
        // 如果没有输入任何参数，则 Date 构造器会根据系统设置的当前时间来创建一个 Date 对象
        var date = new Date();
        console.log(date);
        // 如果提供了至少两个参数，其余的参数均会默认设置为 1（如果没有提供 day 参数）或者 0
        // 参数常用的写法：
        // 数字型：2021, 7, 16
        // 字符串型：'2021-07-16 22:51:20'
        var date1 = new Date(2021, 7, 16);
        console.log(date1); // Mon Aug 16 2021 00:00:00 GMT+0800 (中国标准时间)
        var date2 = new Date('2021-07-16 22:51:20');
        console.log(date2); // Fri Jul 16 2021 22:51:20 GMT+0800 (中国标准时间)
    </script>

日期格式化

通过以下方法可以得到日期的指定部分

getFullYear()

• 根据本地时间返回指定日期的年份
• 括号内没有参数

    <script>
        var date = new Date();
        console.log(date);
        console.log(date.getFullYear()); // 当前日期的年份
        console.log(date.getMonth() + 1); // 当前日期的月份，返回月份比当前月份小 1，因此需要加 1 才能输出正确月份
        console.log(date.getDate()); // 当前日期（几号）
        console.log(date.getDay()); // 当前星期，周六为 6，周日为 0
        console.log(date.getHours()); // 当前时间-小时
        console.log(date.getMinutes()); // 当前时间-分钟
        console.log(date.getSeconds()); // 当前时间-秒数
    </script>

输出当前日期和星期

    <script>
        var date = new Date();
        // 输出 2021年 7月 17日 星期六
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var days = arr[date.getDay()];
        var str = '今天是：' + year + '年' + month + '月' + dates + '日 ' + days;
        console.log(str);
    </script>

封装一个函数，返回当前时间的时分秒

    <script>
        var date = new Date();
        console.log(date.getHours());
        console.log(date.getMinutes());
        console.log(date.getSeconds());
        // 封装一个函数，返回当前时间的时分秒 08:08:08
        function getTime() {
            var time = new Date();
            var hours = time.getHours();
            hours = hours < 10 ? '0' + hours : hours;
            var minutes = time.getMinutes();
            minutes = minutes < 10 ? '0' + minutes : minutes;
            var seconds = time.getSeconds();
            seconds = seconds < 10 ? '0' + seconds : seconds;
            return hours + ':' + minutes + ':' + seconds;
        }
        console.log(getTime());
    </script>

Date 总的毫秒数（时间戳） 

获取日期的总的毫秒形式

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

    <script>
        // 获取总的毫秒数(时间戳) 当前时间距离1970年1月1号的毫秒数
        // 1.通过 valueOf() getTime() 获取
        var date1 = new Date();
        console.log(date1.valueOf());
        console.log(date1.getTime());
        // 2.简单的写法（最常用）
        var date2 = +new Date();
        console.log(date2);
        // 3.H5 新增的方法
        console.log(Date.now());
    </script>

案例：倒计时效果

核心算法：

• 输入的时间减去现在的时间就是剩余的时间，即倒计时
• 不是拿时分秒分别相减
• 用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数
• 将剩余时间总的毫秒数转换为 天、时、分、秒（时间戳转换为时分秒）

转换公式如下：

• date = parseInt（总秒数 / 60 / 60 / 24）；  // 计算天数
• hours = parseInt（总秒数 / 60 / 60 % 24）； // 计算小时
• minutes = parseInt（总秒数 / 60 % 60）； // 计算分钟
• seconds = parseInt（总秒数 % 60）； // 计算秒数 

    <script>
        // 倒计时
        function countDown(time) {
            var nowTime = +new Date(); // 返回当前时间的毫秒数
            var inputTime = +new Date(time); // 返回用户输入时间的毫秒数
            var times = (inputTime - nowTime) / 1000; // 剩余的秒数
            var date = parseInt(times / 60 / 60 / 24); // 天
            var date1 = date > 10 ? date : '0' + date;
            var hour = parseInt(times / 60 / 60 % 24); // 时
            var hour1 = date > 10 ? hour : '0' + hour;
            var minutes = parseInt(times / 60 % 60); // 分
            var minutes1 = minutes > 10 ? minutes : '0' + minutes;
            var seconds = parseInt(times % 60); // 秒
            var seconds1 = seconds > 10 ? seconds : '0' + seconds;
            return date1 + ':' + hour1 + ':' + minutes1 + ':' + seconds1;
        }
        console.log(countDown('2021-7-18 18:00:00'));
        var date = new Date();
        console.log(date);
    </script>

Array 对象

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

• 字面量方式
• new Array()

使用new Array() 创建数组时：

• 括号内没有参数，表示创建了一个空数组
• 括号内有一个参数 n，表示创建了一个长度为 n 的数组，里面含有 n 个 empty 元素
• 括号中有至少两个参数时，表示此数组中的元素为括号中的参数

    <script>
        // 创建数组的两种方式
        // 1.利用字面量创建数组
        var arr = [1, 2, 3, 4, 5];
        console.log(arr1[3]);
        // 2.利用 new Array() 创建数组
        var arr1 = new Array(); // 创建一个空的数组
        var arr2 = new Array(2); // 括号中的 2 表示创建了一个长度为 2 的数组，里面有两个 empty
        console.log(arr2);
        var arr3 = new Array(1, 2); // 等价于 [1,2],创建了一个含有 1 和 2 两个元素的数组
    </script>

检测是否为数组

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

• instanceof 运算符
• Array.isArray(参数)

两种方式的区别：

• 当检测 Array 实例时， Array.isArray() 优于 instanceof ，因为 Array.isArray() 能检测 iframes
• Array.isArray() 是 H5 新增的方法，IE9 以上才支持

    <script>
        // 检测是否为数组
        // 1.instanceof 运算符，可以用来检测某个变量是否为数组
        var arr = [];
        console.log(arr instanceof Array); // true
        var obj = {};
        console.log(obj instanceof Array); // false
        function reverse(arr) {
            if (arr instanceof Array) {
                var newArr = [];
                for (var i = arr.length - 1; i >= 0; i--) {
                    newArr[newArr.length] = arr[i];
                }
                return newArr;
            } else {
                return 'error！此参数必须是数组格式[1,2,3]';
            }
        }
        console.log(reverse([1, 2, 3, 4, 5]));
        console.log(reverse(1, 2, 3, 4, 5));

        // 2. Array.isArray(参数);
        console.log(Array.isArray(arr)); // true
        console.log(Array.isArray(obj)); // false
    </script>

添加删除数组元素 

添加数组元素

添加数组元素的方法：

• push()
• unshift()

push() 和 unshift()

• 在数组的末尾添加一个或多个数组元素，push：推
• 参数直接写要添加的数组元素
• 原数组会发生变化，同时数组长度增加
• log(arr.push(参数)) 或 log(arr.unshift(参数))，返回值为添加数组元素完毕后的数组长度

    <script>
        // 添加删除数组元素的方法
        // 1.push() 
        // 在数组末尾添加一个或多个元素，push 推
        var arr = [5, 6, 7, 8];

        // push() 可以给数组添加新的元素
        // 参数直接写要添加的数组元素
        // 原数组也会发生变化
        arr.push(9);
        console.log(arr);
        // push() 完毕后，返回的是添加完毕后新数组的长度
        console.log(arr.push(10)); // 6
        arr.push('赵', '钱');
        console.log(arr);

        // 2.unshift()
        // 在数组的开头添加一个或多个数组元素
        // unshift() 可以给数组添加新的元素
        // 参数直接写要添加的数组元素
        // 原数组也会发生变化
        arr.unshift(3, 4);
        console.log(arr);
        arr.unshift('周');
        console.log(arr);
        // unshift() 完毕后，返回的是添加完毕后新数组的长度
        console.log(arr.unshift('吴')); // 12
    </script>

删除数组元素

删除数组元素的方法：

• pop()
• shift()

pop() 和 shift()

• 删除数组的第一个元素
• 一次只能删除一个元素
• pop() 没有参数
• 删除元素后原数组发生变化，长度减 1
• log(arr.pop()) 或 log(arr.shift())，返回值为 删除的数组元素

    <script>
        // 删除数组元素
        // 1.pop() 
        // 删除数组的最后一个元素
        // 一次只能删除一个元素
        // pop() 没有参数
        // 删除元素后原数组发生变化，长度减 1
        arr.pop(); // 删除钱
        console.log(arr);
        // 返回值为删除的数组元素
        console.log(arr.pop()); // 赵
        console.log(arr);

        // 2.shift()
        // 删除数组的第一个元素
        // 一次只能删除一个元素
        // shift() 没有参数
        // 删除元素后原数组发生变化，长度减 1
        arr.shift(); // 删除吴
        console.log(arr);
        // 返回值为删除的数组元素
        console.log(arr.shift()); // 周
        console.log(arr);
    </script>

案例：筛选数组

    <script>
        // 利用 添加删除数组元素的方式 筛选数组
        var arr = [5, 23, 17, 83, 66];
        var newArr = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] > 50) {
                newArr.push(arr[i]);
            }
        }
        console.log(newArr);
    </script>

数组排序

使用 sort() 方法应注意：

• 使用 sort() 方法进行排序时，会对排序的数字从首位开始进行排序
• 因此对排序的数字中存在两位及以上数字时，需要对 sort() 方法进行操作添加
• 升序排序 return a - b；
• 降序排序 return b - a；

    <script>
        // 数组排序
        // 1.翻转数组
        var arr1 = [5, 4, 3, 2, 1];
        arr1.reverse();
        console.log(arr1);
        // 2.数组排序（冒泡排序）
        // sort 排序只针对每个数字的第一位
        var arr2 = [7, 4, 8, 3, 5, 6, 2, 9, 1, 0];
        arr2.sort();
        console.log(arr2);

        var arr3 = [2, 87, 15, 6, 21];
        arr3.sort();
        console.log(arr3);
        // 需要对 sort 进行重构

        arr3.sort(function(a, b) {
            return a - b; // 升序排列
            // 降序排列 return b-a;
        });
        console.log(arr3);
    </script>

数组索引方法

    <script>
        // 返回数组索引号的方法
        // 1.indexOf(数组元素)
        // 作用：返回该数组元素的索引号
        // 如果存在多个该数组元素只返回第一个满足条件的索引号
        // 如果数组中不存在该元素,返回 -1
        var arr = ['曹操', '荀彧', '贾诩', '郭嘉', '荀攸', '贾诩', '程昱', '贾诩'];
        console.log(arr.indexOf('贾诩')); // 2
        console.log(arr.indexOf('夏侯渊')); // -1
        // 2.lastIndexOf(数组元素)
        // 作用: 返回数组中最后一个与该数组元素匹配的索引号
        // 如果数组中不存在该数组元素,返回 -1
        console.log(arr.lastIndexOf('贾诩')); // 7
        console.log(arr.lastIndexOf('夏侯惇')); // -1
    </script>

案例：数组去重

思路：

• 目标：把旧数组里面不重复的元素选取出来放到新数组中，重复的元素只保留一个
• 核心算法：遍历旧数组，将旧数组中的元素与新数组中的元素相匹配
• 如果新数组中没有该元素，则将旧数组中的该元素添加到旧数组中
• 如果新数组中存在该元素，则将该元素舍弃。继续匹配下一元素
• 利用 indexOf(旧数组元素)，如果返回 -1，则该元素在新数组中不存在，添加；否则舍弃
• newArr.indexOf(arr[i] === -1)

    <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 = ['曹操', '荀彧', '贾诩', '郭嘉', '荀攸', '贾诩', '程昱', '贾诩'];
        var newArr1 = unique(arr1);
        console.log(newArr1);
    </script>

数组转换为字符串

    <script>
        // 数组转换为字符串
        // 1. toString() 将数组转换为字符串
        var arr = ['张辽', '于禁', '乐进', '张郃', '徐晃'];
        console.log(arr.toString());
        // 2. join(分隔符)
        // 常用的分隔符：',', '-', '&'
        console.log(arr.join()); // join() 内不写分隔符，默认为 ','
        console.log(arr.join('-'));
    </script>

concat()

• var newArr = old_arr.concat(value1, value2, ...)
• value 可以是某个数组，也可以是值
• 将返回连接产生的新数组 newArr

slice()

• array.slice(start, end)
• 包括 begin 不包括 end
• begin，end 为正，从数组索引号为 0 开始截取或结束截取；为负，从数组索引号为 array.length - 1 开始截取或结束截取
• 返回被截取元素组成的数组
• 不会影响原数组

splice()

• array.splice(startIndex, deleteCount, item1, item2, ...)
• 参数 start: 正数，从 0 开始，索引号为 0 的数组元素为 0；负数，从 -1 开始，数组末尾为 -1
• deleteCount() 被省略，或 值 大于 array.length - start，则 start 之后的元素都将被删除 
• 如果值为 0 或 负数，不移除元素；且至少添加一个元素
• item 值可选
• 添加进数组的元素，从 start 位置开始;若不指定,则只删除元素
• 返回值：由被删除的元素组成的一个数组

slice() 和 splice() 目的基本相同，重点是 splice()

    <script>
        // concat()
        // concat 语法
        // var newArr = old arr.concat(value1, value2, ...)
        // value 可以是某个数组，也可以是值
        // 将返回合并后产生的 newArr
        var arr1 = ['荀彧', '郭嘉', '荀攸', '程昱', '贾诩', '戏志才'];
        var arr2 = ['张辽', '于禁', '乐进', '张郃', '徐晃'];
        var arr = arr1.concat(arr2, '曹操');
        console.log(arr);

        // slice() 
        // 语法
        // array.slice(start, end);
        // 返回一个新的数组对象
        // 包括 begin 不包括 end
        // 原数组不会改变
        var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
        console.log(animals.slice(2)); // Array ["camel", "duck", "elephant"]
        console.log(animals.slice(2, 4)); // Array ["camel", "duck"]
        // 正序 0 ~ arr.length-1
        console.log(animals.slice(1, 5)); // Array ["bison", "camel", "duck", "elephant"]
        // 逆序，-1 ~ -arr.lengh
        console.log(animals.slice(-2)); // Array ["duck", "elephant"]
        console.log(animals.slice(2, -1)); // Array ["camel", "duck"]
        console.log(animals.slice(-5)); // ["ant", "bison", "camel", "duck", "elephant"]

        // splice()
        // 语法 array.splice(startIndex, deleteCount, item1, item2, ...)
        // 参数 start: 正数，从 0 开始，索引号为 0 的数组元素为 0；负数，从 -1 开始，数组末尾为 -1
        // deleteCount() 被省略，或 值 大于 array.length - start，则 start 之后的元素都将被删除 
        // 如果值为 0 或 负数，不移除元素；且至少添加一个元素
        // item1, item2, ... 可选
        // 添加进数组的元素，从 start 位置开始;若不指定,则只删除元素
        // 返回值: 由被删除的元素组成的一个数组
        const months = ['Jan', 'March', 'April', 'June'];
        months.splice(1, 0, 'Feb'); // 从索引号 1 开始删除 0 个数组元素，并插入 'Feb'
        console.log(months); // Array ["Jan", "Feb", "March", "April", "June"]
        months.splice(4, 1, 'May'); // 从索引号 4 开始删除 1 个数组元素，即删除索引号为 4 的数组元素;并插入 'May'
        console.log(months); // Array ["Jan", "Feb", "March", "April", "May"]
    </script>

String 对象

基本包装类型

为了方便操作基本数据类型，JavaScript 提供了三种特殊的引用类型：String、Number 和 Boolean

基本包装类型：把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法

    <script>
        var str = 'tomorrow';
        console.log(str.length);
        // 复杂数据类型和对象才有属性和方法
        // 基本包装类型: 将简单数据类型包装成为复杂数据类型
        // 包装过程
        // 1.将简单数据类型包装为复杂数据类型
        var temp = new String('tomorrow');
        // 2.把临时变量的值赋给 str 
        var str1 = temp;
        // 3.销毁临时变量
        temp = null;
    </script>

字符串的不可变

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

• 当给一个已经被赋值的字符串重新赋值时，原有的值并不会修改，引燃存在内存中
• 此时将重新在内存中开辟一个新的空间用于存放新的赋值
• 这被称为字符串的不可变
• 因为字符串的不可变，在大量拼接字符串时会存在效率问题

    <script>
        // 字符串的不可变性
        var str = 'tomorrow';
        console.log(str);
        // 当重新给字符串 str 赋值时,原有的值并不会修改,依然存在内存中
        // 此时将重新在内存中开辟一个新的空间用于存放新的赋值
        // 这被称为字符串的不可变
        str = 'today';
        console.log(str);

        // 因为字符串不可变,在大量拼接字符串时会存在效率问题
        var str = '';
        for (var i = 0; i< 100; i++) {
            str += i;
        }
        console.log(str); // 需要等待一点时间才能输出结果,因为需要不断地开辟新的空间
    </script>

根据字符返回位置

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

    <script>
        // 字符串对象 根据字符返回位置
        // str.indexOf('要查找的字符', [起始的位置](可选))
        var str = 'tomorrow';
        console.log(str.indexOf('o')); // 1
        console.log(str.indexOf('o', 2)); // 3
        console.log(str.lastIndexOf('o')); // 6
    </script>

案例：返回字符位置

查找字符串中某字符出现的所有位置及次数

    <script>
        var str = 'tomorrow';
        var index = str.indexOf('o');
        var num = 0;
        while (index !== -1) {
            console.log(index);
            num++;
            index = str.indexOf('o', index + 1);
        }
        console.log(num);
    </script>

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

    <script>
        // 根据位置返回字符
        // 1.charAt(index)
        var str = 'tomorrow'
        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(0)); // 116

        // 3.str[index]
        // 存在兼容性问题，H5 新增，IE8+ 支持 和 charAt() 等效
        console.log(str[0]);
    </script>

案例：返回字符位置

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

    <script>
        // 定义一个对象
        // 判断是否有该属性 对象名['属性名']
        var person = {
            name: '张三',
            age: 20,
            sex: '男',
            height: 168,
            weight: 120
        }
        if (person['height']) {
            console.log('person 具有该属性');
        } else {
            console.log('person 不具有该属性');
        }
        // 判断一个字符串中出现次数最多的字符，并统计其次数
        // 核心算法：利用 charAt() 遍历这个字符串
        // 把每个字符都存储给对象
        // 如果对象没有该属性，赋值为 1；如果有该属性，+ 1
        // 遍历对象，得到最大值和该字符
        var str = 'tomorrow';
        var obj = {};
        for (var i = 0; i < str.length; i++) {
            var chars = str.charAt(i);
            if (obj[chars]) {
                obj[chars]++;
            } else {
                obj[chars] = 1;
            }
        }
        console.log(obj);

        // 遍历对象
        var max = 0;
        var char_max = '';
        for (var key in obj) {
            // key 得到的是属性名
            // obj[key] 得到的是属性值
            if (obj[key] > max) {
                max = obj[key];
                char_max = key;
            }
        }
        console.log(char_max, max);
    </script>

字符串操作方法（重点）

concat()

• var newStr = old_str.concat(value1, value2, ...)
• value 可以是某个数组，也可以是值
• 将返回连接产生的新字符串

substr()

• var newStr = old_str.substr('截取起始索引号', '截取字符个数')
• 截取起始索引号为负数时，表示该索引号为截取字符的结束索引号（不包括该索引好的字符） 
• 截取其实索引号为正数时，表示从该索引号开始截取 '截取字符个数' 的字符

    <script>
        // 字符串操作方法
        // 1.拼接字符串
        // concat('字符串1, 字符串2, ...')
        var str = 'beautiful';
        var newStr1 = str.concat('_girl');
        console.log(str.concat(newStr1));

        // 2.截取字符串
        // substr('截取起始索引号','截取字符个数')
        var newStr2 = str.substr(-5, 5);
        console.log(newStr2); // tiful
        var newStr3 = str.substr(3, 5);
        console.log(newStr3); // utifu
    </script>

替换字符串

• replace('被替换的字符', '替换的字符')

    <script>
        // 替换字符串 
        // replace('被替换的字符', '替换的字符')
        // 只替换匹配到的第一个字符
        var str1 = '僧推月下门';
        console.log(str1);
        var newStr = str1.replace('推', '敲');
        console.log(newStr);

        // 将某一字符串中的某个字符全部替换
        var str2 = '黑化肥挥发会发黑';
        while (str2.indexOf('黑') !== -1) {
            str2 = str2.replace('黑', '灰');
        }
        console.log(str2);
    </script>

字符串转换数组

• split('分隔符')
• 方法中的分隔符必须与字符串中的分隔符相一致，且都为英文分隔符

    <script>
        // 字符串转换为数组
        // split('分隔符')
        // 分隔符必须与字符串中的分隔符相同，且都为英文分隔符
        var pername1 = '曹操, 曹昂, 曹丕, 曹植, 曹冲';
        var arr1 = pername1.split(',');
        console.log(arr1);
        var pername2 = '司马懿&司马师&司马昭&司马炎';
        var arr2 = pername2.split('&');
        console.log(arr2);
    </script>

转换大写

• toUpperCase()

    <script>
        // 将字符串中所有字符转换为大写字符
        // str.toUpperCase()
        // 将调用该方法的字符串转换为大写形式并返回
        // 如果调用的该方法的值不是字符串类型，将被强制转换
        var num = '666666';
        console.log(num.toUpperCase()); // 666666
        // 返回值：一个新的字符串，表示转换为大写的调用字符串
        // 字符串是不可变的，因此不会影响原字符串的值
        const sen = 'The quick brown fox jumps over the lazy dog.';
        console.log(sen.toUpperCase()); // THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    </script>

转换小写

• toLowerCase()

    <script>
        // 将调用该方法的字符串值转为小写形式，并返回
        // str.toLowerCase()
        // 返回值：一个新的字符串，表示转换为小写的调用字符串
        console.log('中文简体 zh-CN || zh-Hans'.toLowerCase()); // 中文简体 zh-cn || zh-hans
        console.log("ALPHABET".toLowerCase()); // alphabet
    </script>