[TOC]

(一) 字符串常用方法

  1. length // 字符串的长度
  2. trim() // 去掉字符串前后的空格
  3. toLowerCase() // 转小写字母
  4. toUpperCase() // 转大写字母
  5. charAt() // 返回字符的位置, 若没有,返回-1
  6. indexOf() // 返回检测字符串的位置
  7. lastIndexOf() // 同上,但从后面开始检查
  8. includes() // 检查字符串是否包含指定字符
  9. split() // 字符串转数组,接收一个参数,作为转换的标志
  10. substring() // 截取字符串,接收两个参数,开始的位置和结束的位置
  11. slice() // 截取字符串, 用法类似substring, 但可以复数
  12. substr() // 截取字符串, 接收两个参数,第一个参数是开始位置, 第二个参数是截取的字符个数
  13. match() // 检查有没有包含某个值, 返回符合一个数组,存放符合条件的字符
  14. replace() // 替换

  15. 替换全部,使用replaceAll或者正则 ```javascript 

    
<a name="54a61f56"></a>
## (二) 常用的数组方法

1. pop() 删除数组的最后一个元素并返回删除的元素。
1. push() 向数组的末尾添加一个或更多元素，并返回新的长度。
1. shift() 删除并返回数组的第一个元素。
1. unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
1. map()。对原来成员改头换面
1. filter() 检测数值元素，并返回符合条件所有元素的数组。
1. forEach() 遍历数组。
1. isArray() 判断对象是否为数组。
1. find() 返回符合传入测试（函数）条件的数组元素。 // 只返回符合条件的第一个成员, 没有符合条件就返回 undefined
1. findIndex() 返回符合传入测试（函数）条件的数组元素索引。
1. indexOf() 搜索数组中的元素，并返回它所在的位置。
1. lastIndexOf() 搜索数组中的元素，并返回它最后出现的位置。
1. some() 检测数组元素中是否有元素符合指定条件。 // 用来判断数组是否包含符合条件的成员, 包含返回 true, 不包含返回 false
1. includes() 判断一个数组是否包含一个指定的值。 // 成员只能是基本数据类型
1. join() 把数组的所有元素放入一个字符串。
1. slice() 选取数组的一部分，并返回一个新数组。
1. splice() 从数组中添加或删除元素。
1. sort() 对数组的元素进行排序。
1. reverse() 反转数组的元素顺序。
```javascript
<script>
    // 1. Array.isArray() 判断对象是否为数组。
    var arr1 = [12, 3, 4, 5];
    // var arr1 = new Array();
    console.log(typeof arr1); // object
    var boo1 = Array.isArray(arr1);
    console.log('boo1', boo1);

    // 2. includes() 判断一个数组是否包含一个指定的值。 // 成员只能是基本数据类型
    var arr2 = ['a', 'b', 'c', 'd'];
    var boo2 = arr2.includes('a'); // 
    console.log('boo2', boo2);

    // 3. join() 把数组的所有元素放入一个字符串。
    var arr3 = ['a', 'b', 'c', 'd'];
    var str3 = arr3.join('-'); // -是分隔符, 默认是逗号,也可以上是其他
    console.log('str3=', str3);

    // 4. reverse() 反转数组的元素顺序。
    var arr4 = ['a', 'b', 'c', 'd'];
    var newArr4 = arr4.reverse();
    console.log('newArr4', newArr4);

    // 5. slice() 选取数组的一部分，并返回一个新数组。类似字符串的slice方法
    var arr5 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    var newArr5 = arr5.slice(2, 5);
    console.log('newArr5=', newArr5);

    // 6. pop() 删除数组的最后一个元素并返回删除的元素。
    var arr6 = [1, 2, 3];
    arr6.pop();
    console.log('pop', arr6);
    // 7. push() 向数组的末尾添加一个或更多元素，并返回新的长度。
    var arr7 = [1, 2, 3];
    arr7.push(4);
    console.log('push', arr7);

    // 8. shift() 删除并返回数组的第一个元素。
    // 9. unshift() 向数组的开头添加一个或更多元素，并返回新的长度。

    // 10. map()。对原来成员改头换面,传入一个函数, 返回一个新的数组
    var arr10 = [{
        name: 'zs',
        age: 10
    }, {
        name: 'ls',
        age: 20
    }, {
        name: 'ww',
        age: 30
    }];
    var newArr10 = arr10.map(function(item, index) {
        // 对名字进行处理
        var name = item.name.toUpperCase();

        return {
            name: name,
            age: item.age - 10
        };
    });
    console.log('newArr10=', newArr10);

    console.log('----------11. filter()----------------')

    // 11. filter() 检测数组元素，并返回符合条件所有元素的数组。
    var arr11 = [{
        name: 'zs',
        age: 10
    }, {
        name: 'ls',
        age: 20
    }, {
        name: 'ww',
        age: 30
    }];
    var newArr11 = arr11.filter(function(item, index) {
        return item.age >= 20;
    });
    console.log('newArr11=', newArr11);

    console.log('----------12. forEach() ----------------')
        // 12. forEach() 遍历数组。
    var arr12 = [{
        name: 'zs',
        age: 10
    }, {
        name: 'ls',
        age: 20
    }, {
        name: 'ww',
        age: 30
    }];
    arr12.forEach(function(item, index) {
        console.log(index, item);
    });
    console.log(str);

    // for循环
    var filmList = [{
        filmName: '电影1',
        time: 120
    }, {
        filmName: '电影2',
        time: 120
    }, {
        filmName: '电影3',
        time: 120
    }, {
        filmName: '电影4',
        time: 130
    }]
    var str = '';
    for (var i = 0; i < filmList.length; i++) {
        var item = filmList[i];
        str += `
        <li><span>${item.filmName}</span> <span>${item}</span></li> 
        `;
    }
    // document.querySelector('#list').innerHTML = str;

    // forEach循环
    var str = '';
    filmList.forEach(function(item, index) {
            str += `
        <li><span>${item.filmName}</span> <span>${item}</span></li> 
        `;
        })
        // document.querySelector('#list').innerHTML = str;


    console.log('----------13. find() ----------------')
        // 13. find() 返回符合条件的数组元素。 // 只返回符合条件的第一个成员, 没有符合条件就返回 undefined
    var arr13 = [{
        name: 'zs',
        age: 10
    }, {
        name: 'ls',
        age: 20
    }, {
        name: 'ww',
        age: 30
    }];
    var newArr13 = arr13.find(function(item, index) {
        // return item.name === 'zs';
        return item.age > 10; // 只返回符合条件的第一个成员
    });
    console.log('newArr13=', newArr13);

    console.log('----------14. findIndex() ----------------')
        // 14. findIndex() 返回符合传入测试（函数）条件的数组元素索引。
    var arr14 = [{
        name: 'zs',
        age: 10
    }, {
        name: 'ls',
        age: 20
    }, {
        name: 'ww',
        age: 30
    }];
    var index14 = arr14.findIndex(function(item, index) {
        return item.age === 30;
    });
    console.log('index14=', index14);

    // 15. indexOf() 搜索数组中的元素，并返回它所在的位置。
    // 16. lastIndexOf() 搜索数组中的元素，并返回它最后出现的位置。

    console.log('----------17. some()  ----------------')
        // 17. some() 检测数组元素中是否有元素符合指定条件。 // 用来判断数组是否包含符合条件的成员, 包含返回 true, 不包含返回 false
    var arr17 = [{
        name: 'zs',
        age: 10
    }, {
        name: 'ls',
        age: 20
    }, {
        name: 'ww',
        age: 30
    }];
    var boo17 = arr17.some(function(item, index) {
        return item.age > 10;
    })
    console.log('boo17=', boo17);

    console.log('----------18. splice() ----------------')
        // 18. splice() 从数组中添加或删除元素。参数可以是2个或者3个
    var arr18 = [{
        name: 'zs',
        age: 10
    }, {
        name: 'ls',
        age: 20
    }, {
        name: 'ww',
        age: 30
    }];
    arr18.splice(1, 1); // 两个参数,第1个参数表示下标,第2个参数,表示删除的成员个数
    console.log('arr18', arr18);

    var arr18 = [{
        name: 'zs',
        age: 10
    }, {
        name: 'ls',
        age: 20
    }, {
        name: 'ww',
        age: 30
    }];

    var item = {
        name: '张欢',
        age: 18
    };
    arr18.splice(1, 2, item); // 三个参数,第1个参数表示下标,第2个参数,表示删除的成员个数,第3个参数用来替代被删除的成员
    console.log('arr18', arr18);

    console.log('---------- 19. sort() ----------------')
        // 19. sort() 对数组的元素进行排序。
    var arr19 = ['a', 'c', 'x', 'd'];
    var newArr19 = arr19.sort();
    console.log('newArr19=', newArr19); // 按字母的升序排列

    var arr19 = [1, 2, 10, 20, 8];
    var newArr19 = arr19.sort();
    console.log('newArr19=', newArr19);

    // 传入一个函数参数,a-b升序排列,b-a降序排序
    console.log('---------- 19. sort(),传入函数 ----------------')
    var newArr19 = arr19.sort(function(a, b) {
        return b - a;
    });
    console.log('newArr19=', newArr19);

    console.log('---------- 19. sort(),成员是对象 ----------------')
        // 成员是对象时也是如此
    var arr19 = [{
        name: 'zs',
        age: 10
    }, {
        name: 'ls',
        age: 20
    }, {
        name: 'ww',
        age: 30
    }, {
        name: 'zh',
        age: 18
    }];
    var newArr19 = arr19.sort(function(a, b) {
        return b.age - a.age;
    })
    console.log('newArr19=', newArr19);
</script>

    (三) 日期对象常用方法和插件

    3.1 创建日期对象的几种方式

    3.2 日期对象的常用方法
    1. 获取年月日时分秒 (月份+1)
    2. 获取星期
    3. 获取毫秒数
    4. 日期比较
    5. moment.js 日期函数库
      http://momentjs.cn/

    6. 一个cdn网站: https://www.bootcdn.cn/

      <script>
 // 创建日期对象方式1
 var date1 = new Date();
 console.log('date1=', date1);
 // 方式2, 参数可以是一个日期的字符串
 var date2 = new Date('2020-06-24');
 console.log('date2=', date2);

 // 方式3, 返回1970到现在的毫秒数
 var date3 = Date.now();
 console.log('date3=', date3);

 // 方式4, 参数可以是一个毫秒数
 var date4 = new Date(1624497306713);
 console.log('date4', date4);

 var date4 = new Date(0);
 console.log('date4', date4);
</script>

      ```javascript 

      ```javascript
<!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>Document</title>
    <script src="https://momentjs.bootcss.com/downloads/moment.js"></script>
</head>

<body>


    <script>
        var str = moment().format('YYYY-MM-DD hh:mm:ss');
        console.log(str);
    </script>
</body>

</html>

      (四) Math 对象

      1. Math.round(x) // 四舍五入
      2. Math.abs(x) // 求 x 的绝对值
      3. Math.floor(x) // 向下取整
      4. Math.ceil(x) // 向上取整
      5. Math.random() // 随机数
      6. sqrt(x) // 求 x 的平方根
      7. toFixed(x) 保留x位小数
      8. parseInt 把小数变整数

      9. 获取某个范围内的随机数

        <script>
 // 1.Math.round(x) // 四舍五入  
 var num1 = Math.round(4.4);
 console.log('num1=', num1);
 var num1 = Math.round(4.5);
 console.log('num1=', num1);

 // 2.Math.abs(x) // 求 x 的绝对值
 var num2 = Math.abs(-5);
 console.log('num2=', num2);

 // 3.Math.floor(x) // 向下取整
 var num3 = Math.floor(3.3);
 console.log('num3=', num3);
 var num3 = Math.floor(3.8);
 console.log('num3=', num3);

 // 4.Math.ceil(x) // 向上取整
 var num4 = Math.ceil(4.4);
 console.log('num4=', num4);
 var num4 = Math.ceil(4.8);
 console.log('num4=', num4);

 // 5.Math.random() // 随机数,从0到1(不包含);
 var num5 = Math.random();
 console.log(num5);

 // 6.Math.sqrt(x) // 求 x 的平方根
 var num6 = Math.sqrt(1.44);
 console.log('num6', num6);

 // 7.toFixed(x) 保留x位小数
 var num7 = 3.234234825;
 var newNum7 = num7.toFixed(2);
 console.log('newNum7', newNum7);
 // 8. parseInt 把小数变整数
 var num8 = parseInt(23.23234);
 console.log('num8', num8);

 // 9.获取某个范围内的随机数, 比如5-10之间的随机数
 var num9 = Math.random() * (10 - 5) + 5;
 console.log('num9', num9);

 // 封装函数
 function getRandom(min, max) {
     var num9 = Math.random() * (max - min) + min;
     num9 = Math.floor(num9);
     console.log('num9', num9);
 }
</script>

      (五) 浏览器内置对象 window(一般叫 BOM 对象)

      1. window
        1. window.open
      2. location对象
        1. location.href 获取浏览器地址
        2. location.href = ‘http://www.baidu.com‘ // 跳转到百度
        3. location.href = ‘http://www.baidu.com?username=huruqing‘
      3. history对象
      4. setTimeout 延迟
      5. setInterval 定时器
      6. navigation: user-agent

      作业:

      1. 登录倒计时
      2. 城市列表过滤