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>

巴特西

ES6-新增方法

最新文章

热门文章