(一) 字符串常用方法

1. length // 字符串的长度

  1. var st1 = 'asdfasdfasdf';
  2. console.log('st1',st1.length);

2. trim() // 去掉字符串前后的空格

  1. var str2 = ' aaaaaaaaa ';
  2. var newStr2 = str2.trim();
  3. console.log('str2', str2);
  4. console.log('newStr2', newStr2);

3. toLowerCase() // 转小写字母

4. toUpperCase() // 转大写字母

  1. var str3 = 'asdfASDFasdfs';
  2. var newStr3 = str3.toLowerCase();
  3. console.log('newStr3', newStr3);

5. charAt() // 返回某个下表对应的字符

  1. var str5 = 'abcde';
  2. var chat5 = str5.charAt(1);
  3. console.log('chat5', chat5);

6. indexOf() // 返回字符(字符串)在原字符串中的的位置

  1. var str6 = 'abcdef';
  2. var index6 = str6.indexOf('b');
  3. console.log('index6=', index6);

7. lastIndexOf() // 同上,但从后面开始检查

  1. var str7 = 'abcdebf';
  2. var index7 = str7.lastIndexOf('b');
  3. console.log('index7=', index7);

8. includes() // 检查字符串是否包含指定字符

  1. var str8 = '我是中国人';
  2. var boo8 = str8.includes('我');
  3. console.log('boo8', boo8); // true

9. split() // 字符串转数组,接收一个参数,作为转换的标志

  1. var str9 = '刘享高危,林玉生,刘顺顺';
  2. var arr9 = str9.split(',');
  3. console.log('arr9=', arr9);

10. substring() // 截取字符串,接收两个参数,开始的位置和结束的位置(不含), 有了slice,就很少substring

  1. var str10 = 'abcdefg';
  2. var newStr10 = str10.substring(1, 4);
  3. console.log('newStr10=', newStr10) // bcd

11. slice() // 截取字符串(极常用), 用法类似substring, 但可以是负数

  1. var str11 = 'abcdefg'; 
  2. var newStr11 = str11.slice(1, 4);
  3. console.log('newStr11=', newStr11) // bcd
  1.  var newStr11 = str11.slice(1, -1); // 参数可以是负数
  2. console.log('newStr11=', newStr11) // bcdef
  1. var newStr11 = str11.slice(-1); // 第二个参数不给,从参数的位置开始,一直截取到最后
  2. console.log('newStr11=', newStr11) // g
  1.  var phone = 13811112222;
  2. var phoneStr = phone + '';
  3. var newStr11 = phoneStr.slice(-4); // 从-4的位置开始截取到末尾
  4. console.log('newStr11=', newStr11);

12. substr() // 截取字符串, 接收两个参数,第一个参数是开始位置, 第二个参数是截取的字符个数

  1. var str12 = 'abcdef';
  2. var newStr12 = str12.substr(1, 3);
  3. console.log('newStr12', newStr12);

13. match() // 检查有没有包含某个值, 返回符合一个数组,存放符合条件的字符

  1.  var str13 = 'abcdeabcdabcd';
  2. var arr13 = str13.match('a');
  3. console.log('arr13', arr13);
  4. // 正则
  5. var arr13 = str13.match(/a/g);
  6. console.log('arr13', arr13);

14. replace() // 替换

  1.  var str14 = '张三,李四,王五,张三,陈六,张三';
  2. var newStr14 = str14.replace('张三', '张无忌');
  3. console.log('newStr14=', newStr14);

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

  1. // 15.替换全部,使用replaceAll或者正则
  2. var newStr14 = str14.replaceAll('张三', '张无忌');
  3. console.log('newStr14=', newStr14);
  5. var newStr14 = str14.replace(/张三/g, '张无忌');
  6. console.log('newStr14=', newStr14);

(二) 常用的数组方法

1. Array.isArray() 判断对象是否为数组。

  1. var arr1 = [12, 3, 4, 5];
  2. // var arr1 = new Array();
  3. console.log(typeof arr1); // object
  4. var boo1 = Array.isArray(arr1);
  5. console.log('boo1', boo1);

2. includes() 判断一个数组是否包含一个指定的值。 // 成员只能是基本数据类型

  1. var arr2 = ['a', 'b', 'c', 'd'];
  2. var boo2 = arr2.includes('a'); // 
  3. console.log('boo2', boo2);

3. join() 把数组的所有元素放入一个字符串。

  1. var arr3 = ['a', 'b', 'c', 'd'];
  2. var str3 = arr3.join('-'); // -是分隔符, 默认是逗号,也可以上是其他
  3. console.log('str3=', str3);

4. reverse() 反转数组的元素顺序。

  1. var arr4 = ['a', 'b', 'c', 'd'];
  2. var newArr4 = arr4.reverse();
  3. console.log('newArr4', newArr4);

5. slice() 选取数组的一部分，并返回一个新数组。 类似字符串的slice方法

  1. var arr5 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  2. var newArr5 = arr5.slice(2, 5);
  3. console.log('newArr5=', newArr5);

6. pop() 删除数组的最后一个元素并返回删除的元素。

  1. var arr6 = [1, 2, 3];
  2. arr6.pop();
  3. console.log('pop', arr6);

7. push() 向数组的末尾添加一个或更多元素，并返回新的长度。

  1. var arr7 = [1, 2, 3];
  2. arr7.push(4);
  3. console.log('push', arr7);

8. shift() 删除并返回数组的第一个元素。

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

10. map()。对原来成员改头换面,传入一个函数, 返回一个新的数组

  1. var arr10 = [{
  2.         name: 'zs',
  3.         age: 10
  4.     }, {
  5.         name: 'ls',
  6.         age: 20
  7.     }, {
  8.         name: 'ww',
  9.         age: 30
  10.     }];
  11.     var newArr10 = arr10.map(function(item, index) {
  12.         // 对名字进行处理
  13.         var name = item.name.toUpperCase();
  15.         return {
  16.             name: name,
  17.             age: item.age - 10
  18.         };
  19.     });
  20.     console.log('newArr10=', newArr10);

11. filter() 检测数值元素，并返回符合条件所有元素的数组。

  1. var arr11 = [{
  2.         name: 'zs',
  3.         age: 10
  4.     }, {
  5.         name: 'ls',
  6.         age: 20
  7.     }, {
  8.         name: 'ww',
  9.         age: 30
  10.     }];
  11.     var newArr11 = arr11.filter(function(item, index) {
  12.         return item.age >= 20;
  13.     });
  14.     console.log('newArr11=', newArr11);

12. forEach() 遍历数组。

  1. var arr12 = [{
  2.         name: 'zs',
  3.         age: 10
  4.     }, {
  5.         name: 'ls',
  6.         age: 20
  7.     }, {
  8.         name: 'ww',
  9.         age: 30
  10.     }];
  11.     arr12.forEach(function(item, index) {
  12.         console.log(index, item);
  13.     });
  14.     console.log(str);

for循环与forEach循环，对比

  1. // for循环
  2.     var filmList = [{
  3.         filmName: '电影1',
  4.         time: 120
  5.     }, {
  6.         filmName: '电影2',
  7.         time: 120
  8.     }, {
  9.         filmName: '电影3',
  10.         time: 120
  11.     }, {
  12.         filmName: '电影4',
  13.         time: 130
  14.     }]
  15.     var str = '';
  16.     for (var i = 0; i < filmList.length; i++) {
  17.         var item = filmList[i];
  18.         str += `
  19.         <li><span>${item.filmName}</span> <span>${item}</span></li> 
  20.         `;
  21.     }
  22.     // document.querySelector('#list').innerHTML = str;
  24.     // forEach循环
  25.     var str = '';
  26.     filmList.forEach(function(item, index) {
  27.             str += `
  28.         <li><span>${item.filmName}</span> <span>${item}</span></li> 
  29.         `;
  30.         })
  31.         // document.querySelector('#list').innerHTML = str;

13. find() 返回符合传入测试（函数）条件的数组元素。 // 只返回符合条件的第一个成员, 没有符合条件就返回 undefined

  1. var arr13 = [{
  2.         name: 'zs',
  3.         age: 10
  4.     }, {
  5.         name: 'ls',
  6.         age: 20
  7.     }, {
  8.         name: 'ww',
  9.         age: 30
  10.     }];
  11.     var newArr13 = arr13.find(function(item, index) {
  12.         // return item.name === 'zs';
  13.         return item.age > 10; // 只返回符合条件的第一个成员
  14.     });
  15.     console.log('newArr13=', newArr13);

14. findIndex() 返回符合传入测试（函数）条件的数组元素索引。

  1. var arr14 = [{
  2.         name: 'zs',
  3.         age: 10
  4.     }, {
  5.         name: 'ls',
  6.         age: 20
  7.     }, {
  8.         name: 'ww',
  9.         age: 30
  10.     }];
  11.     var index14 = arr14.findIndex(function(item, index) {
  12.         return item.age === 30;
  13.     });
  14.     console.log('index14=', index14);

15. indexOf() 搜索数组中的元素，并返回它所在的位置。

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

17. some() 检测数组元素中是否有元素符合指定条件。 // 用来判断数组是否包含符合条件的成员, 包含返回 true, 不包含返回 false

  1. var arr17 = [{
  2.         name: 'zs',
  3.         age: 10
  4.     }, {
  5.         name: 'ls',
  6.         age: 20
  7.     }, {
  8.         name: 'ww',
  9.         age: 30
  10.     }];
  11.     var boo17 = arr17.some(function(item, index) {
  12.         return item.age > 10;
  13.     })
  14.     console.log('boo17=', boo17);

18. splice() 从数组中添加或删除元素。

  1. var arr18 = [{
  2.         name: 'zs',
  3.         age: 10
  4.     }, {
  5.         name: 'ls',
  6.         age: 20
  7.     }, {
  8.         name: 'ww',
  9.         age: 30
  10.     }];
  11.     arr18.splice(1, 1); // 两个参数,第1个参数表示下标,第2个参数,表示删除的成员个数
  12.     console.log('arr18', arr18);
  1. var arr18 = [{
  2.         name: 'zs',
  3.         age: 10
  4.     }, {
  5.         name: 'ls',
  6.         age: 20
  7.     }, {
  8.         name: 'ww',
  9.         age: 30
  10.     }];
  12.     var item = {
  13.         name: '张欢',
  14.         age: 18
  15.     };
  16.     arr18.splice(1, 2, item); // 三个参数,第1个参数表示下标,第2个参数,表示删除的成员个数,第3个参数用来替代被删除的成员
  17.     console.log('arr18', arr18);

19. sort() 对数组的元素进行排序。

  1.  var arr19 = ['a', 'c', 'x', 'd'];
  2.     var newArr19 = arr19.sort();
  3.     console.log('newArr19=', newArr19); // 按字母的升序排列
  5.     var arr19 = [1, 2, 10, 20, 8];
  6.     var newArr19 = arr19.sort();
  7.     console.log('newArr19=', newArr19);

sort(),传入函数

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

sort(),成员是对象

  1.     // 成员是对象时也是如此
  2.     var arr19 = [{
  3.         name: 'zs',
  4.         age: 10
  5.     }, {
  6.         name: 'ls',
  7.         age: 20
  8.     }, {
  9.         name: 'ww',
  10.         age: 30
  11.     }, {
  12.         name: 'zh',
  13.         age: 18
  14.     }];
  15.     var newArr19 = arr19.sort(function(a, b) {
  16.         return b.age - a.age;
  17.     })
  18.     console.log('newArr19=', newArr19);

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

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

  1.  // 创建日期对象方式1
  2.     var date1 = new Date();
  3.     console.log('date1=', date1);
  4.     // 方式2, 参数可以是一个日期的字符串
  5.     var date2 = new Date('2020-06-24');
  6.     console.log('date2=', date2);
  8.     // 方式3, 返回1970到现在的毫秒数
  9.     var date3 = Date.now();
  10.     console.log('date3=', date3);
  12.     // 方式4, 参数可以是一个毫秒数
  13.     var date4 = new Date(1624497306713);
  14.     console.log('date4', date4);
  16.     var date4 = new Date(0);
  17.     console.log('date4', date4);

3.2 日期对象的常用方法

  1. // 创建日期对象方式1
  2.     var date1 = new Date();
  3.     console.log('date1=', date1);
  4.     // 方式2, 参数可以是一个日期的字符串
  5.     var date2 = new Date('2020-06-24');
  6.     console.log('date2=', date2);
  8.     // 方式3, 返回1970到现在的毫秒数
  9.     var date3 = Date.now();
  10.     console.log('date3=', date3);
  12.     // 方式4, 参数可以是一个毫秒数
  13.     var date4 = new Date(1624497306713);
  14.     console.log('date4', date4);
  16.     var date4 = new Date(0);
  17.     console.log('date4', date4);

1.获取年月日时分秒 (月份+1)

  1. // 把日期对象格式化成我们想要的格式
  1. // 1.获取年月日时分秒 (月份+1)
  2.     var date = new Date();
  3.     var y = date.getFullYear();
  4.     var m = date.getMonth() + 1;
  5.     var d = date.getDate();
  6.     var h = date.getHours();
  7.     var M = date.getMinutes();
  8.     var S = date.getSeconds();
  9.     console.log(y);
  10.     console.log(m);
  11.     console.log(d);
  12.     console.log(h);
  13.     console.log(M);
  14.     console.log(S);
  16.     // 对小于10的数,前面加0
  17.     m = m < 10 ? '0' + m : m;
  18.     d = d < 10 ? '0' + d : d;
  19.     h = h < 10 ? '0' + h : h;
  22.     // 格式化日期
  23.     var dateStr = `${y}年${m}月${d}日 ${h}:${M}:${S}`;
  24.     console.log('现在时间是:', dateStr);

2. 获取星期

  1. // 2.获取星期
  2.     var week = date.getDay();
  3.     console.log('week', week);

3. 获取毫秒数

  1. // 3.获取毫秒数, 和Date.now()一样
  2.     var ss = date.getTime();
  3.     console.log('ss', ss);

4. 日期比较

  1. // 4.日期比较
  2.     var date1 = new Date('2021-06-24');
  3.     var date2 = new Date('2021-06-23');
  4.     console.log('date2-date1', date2 - date1); // -86400000

5. moment.js 日期函数库
http://momentjs.cn/

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

(四) Math 对象

1. Math.round(x) // 四舍五入

  1. var num1 = Math.round(4.4);
  2. console.log('num1=', num1);
  3. var num1 = Math.round(4.5);
  4. console.log('num1=', num1);

2. Math.abs(x) // 求 x 的绝对值

  1. var num2 = Math.abs(-5);
  2. console.log('num2=', num2);

3. Math.floor(x) // 向下取整

  1. var num3 = Math.floor(3.3);
  2. console.log('num3=', num3);
  3. var num3 = Math.floor(3.8);
  4. console.log('num3=', num3);

4. Math.ceil(x) // 向上取整

  1. var num4 = Math.ceil(4.4);
  2. console.log('num4=', num4);
  3. var num4 = Math.ceil(4.8);
  4. console.log('num4=', num4);

5. Math.random() // 随机数,从0到1(不包含);

  1. var num5 = Math.random();
  2. console.log(num5);

6. sqrt(x) // 求 x 的平方根

  1. var num6 = Math.sqrt(1.44);
  2. console.log('num6', num6);

7. toFixed(x) 保留x位小数

  1. var num7 = 3.234234825;
  2. var newNum7 = num7.toFixed(2);
  3. console.log('newNum7', newNum7);

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

  1. var num8 = parseInt(23.23234);
  2. console.log('num8', num8);

9. 获取某个范围内的随机数, 比如5-10之间的随机数

  1. var num9 = Math.random() * (10 - 5) + 5;
  2. console.log('num9', num9);

10. 封装函数

  1. function getRandom(min, max) {
  2.         var num9 = Math.random() * (max - min) + min;
  3.         num9 = Math.floor(num9);
  4.         console.log('num9', num9);
  5.     }

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

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

作业:

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