第一章：内置对象

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

第二章：Math对象

2.1 概述

  • Math对象不是构造函数，它具有数学常数和函数的属性和方法，和数学相关的运算（求绝对值、取整、最大值等）都可以使用Math中的成员。
  1. Math.PI         // 圆周率
  2. Math.floor()      // 向下取整
  3. Math.ceil()            // 向上取整
  4. Math.round()           // 四舍五入版 就近取整   注意 -3.5   结果是  -3 
  5. Math.abs()         // 绝对值
  6. Math.max()/Math.min()     // 求最大和最小值 \

2.2 应用示例

  • 示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Math对象求最大值</title>
  9.     <script>
  10.         /* Math对象不是一个构造函数，所以我们不需要new来调用，而是直接使用里面的属性和方法即可。 */
  11.         console.log(Math.PI); //圆周率  3.141592653589793
  12.         console.log(Math.max(1, -100, 2, 3, 50)); //最大值  50
  13.         console.log(Math.max(-1, -99));//最大值  -1
  14.         console.log(Math.max(-1, 99, '老师'));//NaN
  15.         console.log(Math.max());//-Infinity
  16.     </script>
  17. </head>
  19. <body>
  21. </body>
  23. </html>
  • 示例：
<!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>封装自己的数学对象</title>
    <script>
        /* 利用对象封装自己的数学对象，里面有PI、最大值和最小值。*/
        var myMath = {
            PI: Math.PI,
            max: function () {
                var max = arguments[0];
                for (var i = 0; i < arguments.length; i++) {
                    if (max <= arguments[i]) {
                        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(1, 2, 3, 4, 5, 6));
        console.log(myMath.min(1, 2, 3, 4, 5, 6));

    </script>
</head>

<body>

</body>

</html>
  • 示例：
<!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>Math绝对值和三个取整方法</title>
    <script>
        //绝对值方法
        console.log(Math.abs(1)); //1
        console.log(Math.abs(-1)); //1
        console.log(Math.abs('-1')) //1 隐式转换

        //三个取整方法
        //1. Math.floor() 向下取整，往最小了取值
        console.log(Math.floor(1.1));//1
        console.log(Math.floor(1.9));//1
        //2. Math.ceil() 向上取整，往最大了取值
        console.log(Math.ceil(1.1));//2
        console.log(Math.ceil(1.9));//2
        //3. Math.round() 四舍五入
        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
    </script>
</head>

<body>

</body>

</html>

2.3 随机数方法random()

  • random()方法可以返回一个小数，其取值范围为[0,1)。
  • 得到一个两数之间的随机整数，包含两个数在内：
function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min; 
}
  • 示例：
<!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>随机数方法random()</title>
    <script>
        /*
           Math.random(); 返回一个随机的小数, [0,1)
        */
        var num = Math.random();

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

        console.log(getRandom(1, 10));
    </script>
</head>

<body>

</body>

</html>
  • 示例：
<!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>猜数字游戏</title>
    <script>
        /*
        * 程序随机生成一个 1~ 10 之间的数字，并让用户输入一个数字，
        *  1. 如果大于该数字，就提示，数字大了，继续猜；
        *  2. 如果小于该数字，就提示数字小了，继续猜；
        *  3. 如果等于该数字，就提示猜对了， 结束程序。
        */

        var random = Math.floor(Math.random() * (10 - 1 + 1)) + 1;
        do {
            var num = prompt('请输入一个1~10之间的数字：');
            if (random == num) {
                alert('猜对了， 结束程序');
                break;
            }
            if (random < num) {
                alert('数字大了，继续猜');
            }
            if (random > num) {
                alert('数字小了，继续猜');
            }
        }while (true);


    </script>
</head>

<body>

</body>

</html>

第三章：日期对象

3.1 概述

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

3.2 Date()方法的使用

  • 获取当前时间必须实例化。
var now = new Date();
console.log(now);
  • Date()构造函数的参数：
    • 如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为‘2019-5-1’，可以写成new Date(‘2019-5-1’)或者new Date(2019/5/1)。

3.3 日期格式化

  • 如果我们想要2020-11-11 11:11:11格式的日期，就需要手动得到这样的格式。 | 方法名 | 说明 | 代码 | | —- | —- | —- | | getFullYear() | 获取当前的年份 | obj.getFullYear() | | getMonth() | 获取当前月（0~11） | obj.getMonth() | | getDate() | 获取当天日期 | obj.getDate() | | getDay() | 获取星期几（周日0，周六6） | obj.getDay() | | getHours() | 获取当前小时 | obj.getHours() | | getMinutes() | 获取当前分钟 | obj.getMinutes() | | getSeconds() | 获取当前秒 | obj.getSeconds() |

3.4 获取日期的总的毫秒数

  • 获取Date总的毫秒数，不是当前时间的毫秒数，而是距离1970年1月1日过了多少毫秒数。
  • 通过valueOf()或getTime()方法。
var date = new Date();
console.log(date.valueOf());

var date = new Date();
console.log(date.getTime());
  • 通过+new Date()返回总的毫秒数。
var date1 = +new Date(); //+new Date() 返回总的毫秒数
console.log(date1);
  • HTML5中提供的方法，有兼容性问题。
var date3 = Date.now();
console.log(date3);

3.5 应用示例

  • 示例：
<!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>Date日期对象</title>
    <script>
        //Date() 日期对象，是一个构造函数，必须使用new来调用，创建日期对象
        //1. 使用Date，如果没有参数，返回当前系统的当前时间。
        console.log(new Date());
        //2. 参数常用的写法 数字型 2020,11,1 或者是字符串 '2020-11-01 11:11:11'
        console.log(new Date(2020, 10, 1)); //返回的是11月，而不是10月。Month的范围是0~11。
        console.log(new Date('2020-10-01 11:11:11'));
    </script>
</head>

<body>

</body>

</html>
  • 示例：
<!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>格式化日期年月日</title>
    <script>
        var date = new Date();
        console.log('年：' + date.getFullYear());
        console.log('月：' + (date.getMonth() + 1)); //范围是0~11
        console.log('日：' + date.getDate());
        console.log('时：' + date.getHours());
        console.log('分：' + date.getMinutes());
        console.log('秒：' + date.getSeconds());
    </script>
</head>

<body>

</body>

</html>
  • 示例：
<!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>获取日期的总的毫秒数</title>
    <script>
        // 获取Date总的毫秒数，不是当前时间的毫秒数，而是距离1970年1月1号过了多少毫秒。
        // 1. 通过valueOf() getTime()
        var date = new Date();
        console.log(date.valueOf());
        console.log(date.getTime());
        // 2. 简答的写法
        var date1 = +new Date(); //+new Date() 返回总的毫秒数
        console.log(date1);
        // 3. HTML5中提供的方法，有兼容性问题
        var date3 = Date.now();
        console.log(date3);
    </script>
</head>

<body>

</body>

</html>
  • 示例：
<!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>倒计时</title>
    <script>
        /*
        * 核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒相减，比如:05分减去25分，结果会是负数的。
        * 用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
        * 把剩余时间总的毫秒数转换为天、时、分、秒（时间戳转换为时分秒）。
        */
        /*
        * 转换公式如下：
        * d = parseInt(总秒数 / 60 / 60 / 24);    //  计算天数
        * h = parseInt(总秒数 / 60 / 60 % 24)   //   计算小时
        * m = parseInt(总秒数 / 60 % 60 );     //   计算分数
        * s = parseInt(总秒数 % 60);               //   计算当前秒数
        */
        function countDown(time) {
            var nowTime = +new Date(); //返回的是当前总的毫秒数
            var inputTime = +new Date(time); //返回的是用户输入时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; //剩余时间总的秒数
            var d = parseInt(times / 60 / 60 / 24); //计算天数
            var h = parseInt(times / 60 / 60 % 24); //计算小时
            var m = parseInt(times / 60 % 60);//计算分数
            var s = parseInt(times % 60); //计算当前秒数
            return d + '天' + h + '时' + m + '分' + s + '秒';
        }

        // 将来的时间
        var future = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 1);
        console.log(countDown(future));
    </script>
</head>

<body>

</body>

</html>

第四章：数组对象

4.1 数组对象的创建

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

    • 字面量方式。
    • new Array()。

  • 示例： 

<!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>数组创建的两种方式</title>
    <script>
        /*
        * 创建数组对象的两种方式：
        *   - 字面量方式。
        *   - new Array();
        */
        var arr1 = ['1', '2', '3'];
        console.log(arr1);
        var arr2 = new Array();
        arr2[0] = '0';
        arr2[1] = '1';
        arr2[2] = '2';
        arr2[3] = '3';
        console.log(arr2);

    </script>
</head>

<body>

</body>

</html>

4.2 判断是否为数组

  • instanceof运算符，可以判断一个对象是否属于某种类型。
  • Array.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>判断是否为数组</title>
    <script>
        var arr = ['1', '2', '3'];
        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
    </script>
</head>

<body>

</body>

</html>

4.3 添加删除数组元素的方法

方法名 说明 返回值
push(参数1,参数2,…) 末尾添加一个或多个元素，注意修改原数组 并返回新的长度
pop() 删除数组最后一个元素，将数组长度减1，无参数，修改原数组 返回它删除的元素的值
unshift(参数1,参数2,…) 向数组的开头添加一个或更多元素，注意修改原数组 并返回新的长度
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>添加数组元素</title>
    <script>
        /*
        * push(参数1,参数2,...) 在数组的末尾，添加一个或多个数组元素。
        *
        * - push是可以给数组追加新的元素的。
        * - push()参数直接写，数组元素即可。
        * - push()方法的返回值是新数组的长度。
        * - push完毕之后，原数组发生变化。
        */
        var arr = [1, 2, 3];
        arr.push(4, 5, 6);
        console.log(arr); //[1, 2, 3, 4, 5, 6]

        /*
        * unshift(参数1,参数2,...) 在数组的开头，添加一个或多个数组元素。
        *
        * - unshift是可以给数组前面添加新的元素的。
        * - unshift()参数直接写，数组元素即可。
        * - unshift()方法的返回值是新数组的长度。
        * - unshift完毕之后，原数组发生变化。
        */
        arr = [1, 2, 3];
        arr.unshift(4,5,6);
        console.log(arr); //[4, 5, 6, 1, 2, 3]
    </script>
</head>

<body>

</body>

</html>
  • 示例：
<!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>删除数组元素</title>
    <script>
        /**
         * pop() 可以删除数组的最后一个元素
         *
         * - pop()可以删除数组的最后一个元素，记住一次只能删除一个元素。
         * - pop()中没有参数
         * - pop()返回的是被删除的元素
         */
        var arr = [1, 2, 3];
        arr.pop();
        console.log(arr); //[1, 2]

        /*
         * shift() 可以删除数组的第一个元素
         *
         * - shift()可以删除数组的最后一个元素，记住一次只能删除一个元素。
         * - shift()中没有参数
         * - shift()返回的是被删除的元素
         */
        arr = [1, 2, 3];
        arr.shift();
        console.log(arr); //[2, 3]
    </script>
</head>

<body>

</body>

</html>
  • 示例：
<!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>筛选数组</title>
    <script>
        /*有一个包含工资的数组[1500, 1200, 2000, 2100, 1800]，要求把数组中工资超过2000的删除，剩余的放到新数组里面*/
        var arr = [1500, 1200, 2000, 2100, 1800];
        var arr2 = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] < 2000) {
                arr2.push(arr[i]);
            }
        }
        console.log(arr2);
    </script>
</head>

<body>

</body>

</html>

4.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>数组排序</title>
    <script>
        /*
        * 数组排序
        * ①翻转数组。
        * ②数组排序。
        */
        var arr = [1, 2, 3, 4, 5, 6];
        console.log(arr.reverse()); //[6, 5, 4, 3, 2, 1]

        arr = [1, 5, -1, 50, 1000, 6];
        arr = arr.sort(function (a, b) {
            return a - b;
        });
        console.log(arr);//[-1, 1, 5, 6, 50, 1000]
    </script>
</head>

<body>

</body>

</html>

4.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>获取数组元素索引</title>
    <script>
        //返回数组元素索引号 indexOf(数组元素)：返回该数组元素的索引号，从前面开始查找
        //只返回第一个满足条件的索引号；如果没有找到，则返回-1
        var arr = [1, 2, 3, 4, 2];
        console.log(arr.indexOf(2)); //1
        //返回数组元素索引号 lastIndexOf(数组元素)：返回该数组元素的索引号，从后面开始查找
        console.log(arr.lastIndexOf(2)); //4
    </script>
</head>

<body>

</body>

</html>
  • 示例：
<!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>数组去重</title>
    <script>
        /* 有一个数组['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b']，要求去除数组中重复的元素。 */
        /* 我们遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过，我们就添加，否则不添加。 */
        /* 我们怎么知道该元素没有存在？  利用 新数组.indexOf(数组元素)  如果返回时 -1 就说明 新数组里面没有改元素。 */
        var arr = ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'];
        var newArr = [];
        for (var i = 0; i < arr.length; i++) {
            if (-1 == newArr.indexOf(arr[i])) {
                newArr.push(arr[i]);
            }
        }
        console.log(newArr); //["c", "a", "z", "x", "b"]
    </script>
</head>

<body>

</body>

</html>

4.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>数组转换为字符串</title>
    <script>
        var arr = [1, 3, 4, 2, -5, 100];
        console.log(arr.toString()); //1,3,4,2,-5,100
        console.log(arr.join('|')); //1|3|4|2|-5|100
    </script>
</head>

<body>

</body>

</html>

第五章：字符串对象

5.1 基本包装类型

  • 为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型：String、Number和Boolean。
  • 基本包装类型就是将简单类型包装成复杂类型，这样基本数据类型就有了属性和方法。
// 下面代码有什么问题？
var str = 'andy';
console.log(str.length);
  • 按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但是上面的代码却可以执行，这是因为JS会把基本数据类型包装成复杂数据类型，其执行过程如下：
// 1. 生成临时变量，把简单类型包装为复杂数据类型
var temp = new String('andy');
// 2. 赋值给我们声明的字符变量
str = temp;
// 3. 销毁临时变量
temp = null;

5.2 字符串不可变

  • 字符串不可变指的是里面的值不可变，虽然看上去可以改变内容，但是其实是地址变了，内存中新开辟了一个内存空间。
var str = 'abc';
str = 'hello';
// 当重新给 str 赋值的时候，常量'abc'不会被修改，依然在内存中
// 重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
// 由于字符串的不可变，在大量拼接字符串的时候会有效率问题
var str = '';
for (var i = 0; i < 100000; i++) {
    str += i;
}
console.log(str); // 这个结果需要花费大量时间来显示，因为需要不断的开辟新的空间
  • 示例：
<!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>字符串不可变</title>
    <script>
        var str = 'abc';
        str = 'hello';
        // 当重新给 str 赋值的时候，常量'abc'不会被修改，依然在内存中
        // 重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
        // 由于字符串的不可变，在大量拼接字符串的时候会有效率问题
        var str = '';
        for (var i = 0; i < 100000; i++) {
            str += i;
        }
        console.log(str); // 这个结果需要花费大量时间来显示，因为需要不断的开辟新的空间
    </script>
</head>

<body>

</body>

</html>

5.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>返回字符位置</title>
    <script>
        /* 查找字符串"abcoefoxyozzopp"中所有o出现的位置 */
        /*
        * 先查找第一个o出现的位置
        * 只要indexOf 返回的结果不是 -1 就继续往后查找
        * 因为indexOf 只能查找到第一个，所以后面的查找，利用第二个参数，当前索引加1，从而继续查找
        */
        var str = 'abcoefoxyozzopp';
        var index = str.indexOf('o');
        while (index != -1) {
            console.log(index);
            index = str.indexOf('o', ++index);
        }

    </script>
</head>

<body>

</body>

</html>

5.4 根据位置返回字符

方法名 说明 使用
charAt(index) 返回指定位置的字符(index字符串的索引号) str.charAt(0)
charCodeAt(index) 返回指定位置的字符的ASCII码（index字符串的索引号） str.charCodeAt(0)
str[index] 获取指定位置处的字符 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>返回字符位置2</title>
    <script>
        /* 判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数。 */
        /* 核心算法：利用 charAt(） 遍历这个字符串
        * 把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就 +1
        * 遍历对象，得到最大值和该字符
        */
        var str = 'abcoefoxyozzopp';
        var obj = {};  //原理：obj.a = 1
        for (var x = 0; x < str.length; x++) {
            //如果不存在该属性
            if (!obj[str.charAt(x)]) {
                obj[str.charAt(x)] = 1;
            } else {
                obj[str.charAt(x)]++;
            }
        }
        var max = 0;
        var ch = '';
        for (var k in obj) {
            if (max < obj[k]) {
                max = obj[k];
                ch = k;
            }
        }
        console.log(max);
        console.log(ch);

    </script>
</head>

<body>

</body>

</html>

5.5 字符串操作方法

方法名 说明
concat(str1,str2,…) 用于连接多个两个或多个字符串。等同于+。
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>拼接以及截取字符串</title>
    <script>
        var str1 = 'hello';
        var str2 = 'world';
        console.log(str1.concat(str2)); //helloworld
        console.log(str1.substr(1,2));//el
        console.log(str1.slice(1,2));//e
        console.log(str1.substring(1,2));//e
    </script>
</head>

<body>

</body>

</html>

5.6 替换字符串

  • 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>替换字符串</title>
    <script>
        var str = '中国万岁，我爱中国，中国人民万岁。';
        str = str.replace('中国人民万岁', '中华人民共和国万岁');
        console.log(str);
    </script>
</head>

<body>

</body>

</html>

5.7 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>字符串切割</title>
    <script>
        var str = '你,好,啊,中,国';
        var arr = str.split(',');
        console.log(Array.isArray(arr)); // true
        console.log(arr instanceof Array); //true
    </script>
</head>

<body>

</body>

</html>