字符串的新增方法

includes()

  1.       // 判断字符串中是否含有某些字符
  3.       // 1.基本用法
  4.       // console.log('abc'.includes('a'));
  5.       // console.log('abc'.includes('ab'));
  6.       // console.log('abc'.includes('bc'));
  7.       // console.log('abc'.includes('ac')); // false
  9.       // 2.第二个参数
  10.       // 表示开始搜索的位置，默认是 0
  11.       // console.log('abc'.includes('a'));
  12.       // console.log('abc'.includes('a', 0));
  13.       // console.log('abc'.includes('a', 1)); // false
  15.       // 3.应用
  16.       // https://www.imooc.com/course/list
  17.       // https://www.imooc.com/course/list?c=fe&sort=pop&name=value
  18.       let url = 'https://www.imooc.com/course/list?';
  19.       const addURLParam = (url, name, value) => {
  20.         url += url.includes('?') ? '&' : '?';
  22.         url += `${name}=${value}`;
  24.         return url;
  25.       };
  26.       url = addURLParam(url, 'c', 'fe');
  27.       console.log(url);
  28.       url = addURLParam(url, 'sort', 'pop');
  29.       console.log(url);

padStart() 和 padEnd()

  1.       // 补全字符串长度
  3.       // 1.基本用法
  4.       // console.log('x'.padStart(5, 'ab'));
  5.       // console.log('x'.padEnd(5, 'ab'));
  6.       // console.log('x'.padEnd(4, 'ab'));
  8.       // 2.注意事项
  9.       // 原字符串的长度，等于或大于最大长度，不会消减原字符串，字符串补全不生效，返回原字符串
  10.       // console.log('xxx'.padStart(2, 'ab'));
  11.       // console.log('xxx'.padEnd(2, 'ab'));
  13.       // 用来补全的字符串与原字符串长度之和超过了最大长度，截去超出位数的补全字符串，原字符串不动
  14.       // console.log('abc'.padStart(10, '0123456789'));
  15.       // console.log('abc'.padEnd(10, '0123456789'));
  17.       // 如果省略第二个参数，默认使用空格补全长度
  18.       // console.log('x'.padStart(4));
  19.       // console.log('x'.padEnd(4));
  21.       // 3.应用
  22.       // 显示日期格式
  23.       // 2020
  24.       // 10
  25.       // 10
  27.       // 2020-10-10
  28.       // 2020-01-01
  30.       // console.log('10'.padStart(2, 0));
  31.       // console.log('1'.padStart(2, 0));

trimStart() 和 trimEnd()

  1.       // 清除字符串的首或尾空格，中间的空格不会清除
  3.       // 1.基本用法
  4.       // const s = '  a b c  ';
  5.       // console.log(s);
  6.       // // console.log(s.trimStart());
  7.       // // console.log(s.trimLeft());
  8.       // // console.log(s.trimEnd());
  9.       // // console.log(s.trimRight());
  10.       // console.log(s.trim());
  12.       // 2.应用
  13.       const usernameInput = document.getElementById('username');
  14.       const btn = document.getElementById('btn');
  16.       btn.addEventListener(
  17.         'click',
  18.         () => {
  19.           console.log(usernameInput.value);
  21.           // 验证
  22.           console.log(usernameInput.value.trim());
  23.           if (usernameInput.value.trim() !== '') {
  24.             // 可以提交
  25.             console.log('可以提交');
  26.           } else {
  27.             // 不能提交
  28.             console.log('不能提交');
  29.           }
  31.           // 手动提交
  32.         },
  33.         false
  34.       );

数组的新增方法

includes()

  1.       // 1.基本用法
  2.       // 判断数组中是否含有某个成员
  3.       // console.log([1, 2, 3].includes('2')); // false
  4.       // console.log([1, 2, 3].includes(2));
  5.       // 第二个参数表示搜索的起始位置，默认值是 0
  6.       // console.log([1, 2, 3].includes(2, 2));
  7.       // 基本遵循严格相等（===）,但是对于 NaN 的判断与 === 不同，includes 认为 NaN === NaN
  8.       // console.log(NaN === NaN); 
  9.       // console.log([1, 2, NaN].includes(NaN));
  11.       // 2.应用
  12.       // 去重
  13.       // [1, 2, 1];
  15.       const arr = [];
  16.       for (const item of [1, 2, 1]) {
  17.         if (!arr.includes(item)) {
  18.           arr.push(item);
  19.         }
  20.       }
  21.       console.log(arr);

Array.from()

  1.       // 将其他数据类型转换成数组
  3.       // 1.基本用法
  4.       // console.log(Array.from('str'));
  6.       // 2.哪些可以通过 Array.from() 转换成数组
  7.       // 2.1.所有可遍历的
  8.       // 数组、字符串、Set、Map、NodeList、arguments
  9.       // console.log(Array.from(new Set([1, 2, 1])));
  10.       // console.log([...new Set([1, 2, 1])]);
  12.       // 2.2.拥有 length 属性的任意对象
  13.       // const obj = {
  14.       //   '0': 'a',
  15.       //   '1': 'b',
  16.       //   name: 'Alex',
  17.       //   length: 3
  18.       // };
  19.       // console.log(Array.from(obj));
  20.       // console.log([...obj]); // ×
  22.       // 3.第二个参数
  23.       // 作用类似于数组的 map 方法，用来对每个元素进行处理，将处理后的值放入返回的数组
  24.       // console.log(
  25.       //   [1, 2].map(value => {
  26.       //     return value * 2;
  27.       //   })
  28.       // );
  29.       // console.log(Array.from('12', value => value * 2));
  30.       // console.log(Array.from('12').map(value => value * 2));
  32.       // 4.第三个参数
  33.       Array.from(
  34.         '12',
  35.         value => {
  36.           console.log(this);
  37.         },
  38.         document
  39.       );
  40.       Array.from(
  41.         '12',
  42.         function () {
  43.           console.log(this);
  44.         },
  45.         document
  46.       );

find() 和 findIndex()

  1.     // find()：找到满足条件的一个立即返回
  2.     // findIndex()：找到满足条件的一个，立即返回其索引
  4.     // 1.基本用法
  5.     // console.log(
  6.     //   [1, 5, 10, 15].find((value, index, arr) => {
  7.     //     // console.log(value, index, arr);
  8.     //     console.log(this);
  9.     //     return value > 9;
  10.     //   }, document)
  11.     // );
  12.     // [1, 5, 10, 15].find(function (value, index, arr) {
  13.     //   // console.log(value, index, arr);
  14.     //   console.log(this);
  15.     //   return value > 9;
  16.     // }, document);
  17.     // console.log(
  18.     //   [1, 5, 10, 15].findIndex((value, index, arr) => {
  19.     //     // console.log(value, index, arr);
  20.     //     return value > 9;
  21.     //   }, document)
  22.     // );
  24.     // 2.应用
  25.     // const students = [
  26.     //   {
  27.     //     name: '张三',
  28.     //     sex: '男',
  29.     //     age: 16
  30.     //   },
  31.     //   {
  32.     //     name: '李四',
  33.     //     sex: '女',
  34.     //     age: 22
  35.     //   },
  36.     //   {
  37.     //     name: '王二麻子',
  38.     //     sex: '男',
  39.     //     age: 32
  40.     //   }
  41.     // ];
  42.     // console.log(students.find(value => value.sex === '女'));
  43.     // console.log(students.findIndex(value => value.sex === '女'));

对象的新增方法

Object.assign()

  1.       // 用来合并对象
  3.       // 1.基本用法
  4.       // Object.assign(目标对象, 源对象1,源对象2,...): 目标对象
  6.       // const apple = {
  7.       //   color: '红色',
  8.       //   shape: '圆形',
  9.       //   taste: '甜'
  10.       // };
  11.       // const pen = {
  12.       //   color: '黑色',
  13.       //   shape: '圆柱形',
  14.       //   use: '写字'
  15.       // };
  16.       // console.log(Object.assign(apple, pen));
  18.       // Object.assign 直接合并到了第一个参数中，返回的就是合并后的对象
  19.       // console.log(apple);
  20.       // console.log(Object.assign(apple, pen) === apple);
  22.       // 可以合并多个对象
  23.       // console.log(Object.assign({}, apple, pen));
  24.       // console.log(apple);
  25.       // console.log({ ...apple, ...pen });
  27.       // 2.注意事项
  28.       // 2.1.基本数据类型作为源对象
  29.       // 与对象的展开类似，先转换成对象，再合并
  30.       // console.log(Object.assign({}, undefined));
  31.       // console.log(Object.assign({}, null));
  32.       // console.log(Object.assign({}, 1));
  33.       // console.log(Object.assign({}, true));
  34.       // console.log(Object.assign({}, 'str'));
  36.       // 2.2.同名属性的替换
  37.       // 后面的直接覆盖前面的
  38.       // const apple = {
  39.       //   color: ['红色', '黄色'],
  40.       //   shape: '圆形',
  41.       //   taste: '甜'
  42.       // };
  43.       // const pen = {
  44.       //   color: ['黑色', '银色'],
  45.       //   shape: '圆柱形',
  46.       //   use: '写字'
  47.       // };
  48.       // console.log(Object.assign({}, apple, pen));
  50.       // 3.应用
  51.       // 合并默认参数和用户参数
  52.       const logUser = userOptions => {
  53.         const DEFAULTS = {
  54.           username: 'ZhangSan',
  55.           age: 0,
  56.           sex: 'male'
  57.         };
  59.         const options = Object.assign({}, DEFAULTS, userOptions);
  60.         // const options = Object.assign({}, DEFAULTS, undefined);
  61.         console.log(options);
  62.       };
  63.       logUser();
  64.       // logUser({});
  65.       // logUser({ username: 'Alex' });

Object.keys()、Object.values() 和 Object.entries()

  1.       // 1.基本用法
  2.       // const person = {
  3.       //   name: 'Alex',
  4.       //   age: 18
  5.       // };
  7.       // console.log(Object.keys(person));
  8.       // console.log(Object.values(person));
  9.       // console.log(Object.entries(person));
  11.       // 2.与数组类似方法的区别
  12.       // console.log([1, 2].keys());
  13.       // console.log([1, 2].values());
  14.       // console.log([1, 2].entries());
  15.       // console.log(person.keys);
  17.       // 数组的 keys()、values()、entries() 等方法是实例方法，返回的都是 Iterator
  18.       // 对象的 Object.keys()、Object.values()、Object.entries() 等方法是构造函数方法，返回的是数组
  20.       // 3.使用 for...of 循环遍历对象
  21.       const person = {
  22.         name: 'Alex',
  23.         age: 18
  24.       };
  25.       // for (const key of Object.keys(person)) {
  26.       //   console.log(key);
  27.       // }
  28.       // for (const value of Object.values(person)) {
  29.       //   console.log(value);
  30.       // }
  31.       // for (const entries of Object.entries(person)) {
  32.       //   console.log(entries);
  33.       // }
  34.       // for (const [key, value] of Object.entries(person)) {
  35.       //   console.log(key, value);
  36.       // }
  38.       // Object.keys()/values()/entires() 并不能保证顺序一定是你看到的样子，这一点和 for in 是一样的