ES6-新增方法

一。字符串的新增方法

1.includes方法（实例的方法）：

应用：

代码优化：

（1）先使用includes方法判断是url中否包含？

（2）如果包含？, 再判断url最后一位字符是不是?或&符号，是的话就拼接空字符串，不是的话就拼接&符号

（3）如果不包含？, 就拼接一个？

（4）可以通过url.substr(url.length-1,1)获取字符串最后一个字符

        //将网址加上后面的键值
        // （1）先使用includes方法判断是url中否包含？

        // （2）如果包含？, 再判断url最后一位字符是不是?或&符号，是的话就拼接空字符串，不是的话就拼接&符号

        // （3）如果不包含？, 就拼接一个？

        // （4）可以通过url.substr(url.length-1,1)获取字符串最后一个字符
        // https://www.imooc.com/course/list
        // https://www.imooc.com/course/list?c=fe&sort=pop
        let url = 'https://www.imooc.com/course/list?';
        const set_url_param = (url, name, value) => {
            if (url.includes('?')) {
                url += (url.substr(url.length - 1) === '?' || url.substr(url.length - 1) === '&') ? '' : '&';
            } else {
                url += '?';
            }
            url += `${name}=${value}`;
            return url;
        }
        url = set_url_param(url, 'c', 'fe');
        url = set_url_param(url, 'sort', 'pop');
        console.log(url);//https://www.imooc.com/course/list?c=fe&sort=pop

2.padEnd()、padStart()方法  （实例方法）

3.清除字符串的空格 trimStart()  trimLeft() （实例方法）

  <input type="text" id="username" />
  <input type="submit" value="提交" id="btn" />

  <script>
    // 清除字符串的首或尾空格，中间的空格不会清除

    // 1.基本用法
    // const s = '  a b c  ';
    // console.log(s);
    // // console.log(s.trimStart());//首
    // // console.log(s.trimLeft());//首
    // // console.log(s.trimEnd());//尾
    // // console.log(s.trimRight());//尾
    // console.log(s.trim());//首尾

    // 2.应用
    const usernameInput = document.getElementById('username');
    const btn = document.getElementById('btn');

    btn.addEventListener(
      'click',
      () => {
        console.log(usernameInput.value);

        // 验证
        console.log(usernameInput.value.trim());
        if (usernameInput.value.trim() !== '') {//如果输入的都是空格，usernameInput.value.trim()会去除所有空格，留下'';
          // 可以提交
          console.log('可以提交');
        } else {
          // 不能提交
          console.log('不能提交');
        }

        // 手动提交
      },
      false
    );
 

4.replaceAll方法（实例方法）

 二。数组新增方法

1.includes方法（实例方法）

2.Array.from()  (构造器方法)

    // 将其他数据类型转换成数组

    // 1.基本用法
    // console.log(Array.from('str'));

    // 2.哪些可以通过 Array.from() 转换成数组
    // 2.1.所有可遍历的
    // 数组、字符串、Set、Map、NodeList、arguments
    // console.log(Array.from(new Set([1, 2, 1])));
    // console.log([...new Set([1, 2, 1])]);

    // 2.2.拥有 length 属性的任意对象
    // const obj = {
    //   '0': 'a',
    //   '1': 'b',
    //   name: 'Alex',
    //   length: 3
    // };
    // console.log(Array.from(obj));
    // console.log([...obj]); // ×

    // 3.第二个参数（回调函数：回调函数会被from方法内部调用，调用次数就是遍历的次数）
    // 作用类似于数组的 map 方法，用来对转化成数组后的每个元素进行处理，将处理后的值放入返回的数组
    // console.log(
    //   [1, 2].map(value => {
    //     return value * 2;
    //   })
    // );//[2,4]
    // console.log(Array.from('12', value => value * 2));//[2,4]，value依次代表1 2（第二个参数的功能相当于：[1,2].map(value=>{return value*2})）
    // console.log(Array.from('12').map(value => value * 2));

    // 4.第三个参数,指定回调函数的this指向
    Array.from(
      '12',
      value => {
        console.log(this);
      },
      document
    );
    Array.from(
      '12',
      function () {
        console.log(this);//输出两次document，因为数组有两个成员，这个回调函数会被调用两次（遍历）
      },
      document
    );

这个对象的length属性必须是数字代表转换后数组的length长度，因为对象里面没有成员，所以自动补了个键值对'0':undefined

'1':b键值对会被忽略

键名是非数字型字符串对应的值不会被转换到数组里；

 总结：把键名是数字型字符串对应的值放入数组；

补充：ES5数组的map方法：

current依次代表1 2 3；回调函数会被map方法内部调用，调用次数就是遍历的次数

3. find()  、 findIndex()方法 （实例方法）

①第一个参数：回调函数

和forEach方法很类似。回调函数会被调用多次（次数等于数组成员个数），回调函数里第一个参数是值，第二个参数是索引，第三个参数是数组本身

没有写条件时，会遍历所有成员

return是find方法内部调用回调函数终止的条件，即当传参value===10时，回调函数执行，碰到return value>9，满足条件，就不再接着调用回调函数了，且把满足条件的这个值作为数组调用find方法的返回值

②第二个参数：指定回调函数里面的this

        // 1. 使用find()方法，找到数据data中，age为20的数据，并将其打印到控制台

        // 2. 使用findIndex()方法，为name为“李四”的数据，添加一个hobby属性，属性值为“游泳”
        let data = [
            {
                age: 12,
                name: "张三"
            },
            {
                age: 20,
                name: "李四"
            }
        ];
        console.log(data.find(function (value) {
            return value.age === 20;
        }));
        let index = data.findIndex(function (value) {
            return value.name === '李四';
        });
        data[index].hobby = '游泳';
        console.log(data);

三。对象的新增方法

1. Object.assign()

最终发生变化的只有第一个参数

基本数据类型作为源对象：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Object.assign()</title>
  </head>
  <body>
    <script>
      // 用来合并对象

      // 1.基本用法
      // Object.assign(目标对象, 源对象1,源对象2,...): 目标对象

      // const apple = {
      //   color: '红色',
      //   shape: '圆形',
      //   taste: '甜'
      // };
      // const pen = {
      //   color: '黑色',
      //   shape: '圆柱形',
      //   use: '写字'
      // };
      // console.log(Object.assign(apple, pen));

      // Object.assign 直接合并到了第一个参数中，返回的就是合并后的对象
      // console.log(apple);
      // console.log(Object.assign(apple, pen) === apple);

      // 可以合并多个对象
      // console.log(Object.assign({}, apple, pen));
      // console.log(apple);
      // console.log({ ...apple, ...pen });

      // 2.注意事项
      // 2.1.基本数据类型作为源对象
      // 与对象的展开类似，先转换成对象，再合并
      // console.log(Object.assign({}, undefined));
      // console.log(Object.assign({}, null));
      // console.log(Object.assign({}, 1));
      // console.log(Object.assign({}, true));
      // console.log(Object.assign({}, 'str'));

      // 2.2.同名属性的替换
      // 后面的直接覆盖前面的
      // const apple = {
      //   color: ['红色', '黄色'],
      //   shape: '圆形',
      //   taste: '甜'
      // };
      // const pen = {
      //   color: ['黑色', '银色'],
      //   shape: '圆柱形',
      //   use: '写字'
      // };
      // console.log(Object.assign({}, apple, pen));

      // 3.应用
      // 合并默认参数和用户参数
      const logUser = userOptions => {
        const DEFAULTS = {
          username: 'ZhangSan',
          age: 0,
          sex: 'male'
        };

        const options = Object.assign({}, DEFAULTS, userOptions);
        // const options = Object.assign({}, DEFAULTS, undefined);
        console.log(options);
      };
      logUser();
      // logUser({});
      // logUser({ username: 'Alex' });
    </script>
  </body>
</html>

2.Object.keys()、Object.values() 和 Object.entries()  （和for-of遍历数组类似）

Object.keys()/values()/entires() 并不能保证顺序一定是你看到的样子，这一点和 for in 是一样的

如果对遍历顺序有严格要求的话，可以使用前面的给一般对象添加可遍历对象生成方法；

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Object.keys()、Object.values() 和 Object.entries()</title>
  </head>
  <body>
    <script>
      // 1.基本用法
      // const person = {
      //   name: 'Alex',
      //   age: 18
      // };

      // console.log(Object.keys(person));
      // console.log(Object.values(person));
      // console.log(Object.entries(person));

      // 2.与数组类似方法的区别
      // console.log([1, 2].keys());
      // console.log([1, 2].values());
      // console.log([1, 2].entries());
      // console.log(person.keys);

      // 数组的 keys()、values()、entries() 等方法是实例方法，返回的都是 Iterator
      // 对象的 Object.keys()、Object.values()、Object.entries() 等方法是构造函数方法，返回的是数组

      // 3.使用 for...of 循环遍历对象
      const person = {
        name: 'Alex',
        age: 18
      };
      // for (const key of Object.keys(person)) {
      //   console.log(key);
      // }
      // for (const value of Object.values(person)) {
      //   console.log(value);
      // }
      // for (const entries of Object.entries(person)) {
      //   console.log(entries);
      // }
      // for (const [key, value] of Object.entries(person)) {
      //   console.log(key, value);
      // }

      // Object.keys()/values()/entires() 并不能保证顺序一定是你看到的样子，这一点和 for in 是一样的
    </script>
  </body>
</html>

        <div id="list">
        </div>
        <script>
        var htmlStr = '';
        var classfies = {
            "前端": ["Vue", "Angular", "React"],
            "后端": ["Php", "Java", "Python"]
        };
        const list = document.getElementById('list');

        const a = Object.entries(classfies);
        console.log(a);
        for (const [key, value] of a) {
            htmlStr += `<dl><dt>${key}</dt><dd>${value[0]}</dd><dd>${value[1]}</dd><dd>${value[2]}</dd></dl>`
        };
        list.innerHTML = htmlStr;
        </script>