JS高级之一文读懂ES6新增的方法(包含实际应用场景)

1.字符串的新增方法

includes()、padStart()、padEnd()、trimStart()、trimEnd()

• includes()方法：实例的方法-->判断字符串中是否包含某些字符 ①：基本用法 console.log('abc'.includes('a')); //true console.log('abc'.includes('ab')); //true console.log('abc'.includes('bc')); //true console.log('abc'.includes('ac')); //false ②：第二个参数：表示开始搜索的位置，默认为0 console.log('abc'.includes('a', 0)); //true console.log('abc'.includes('a', 1)); //false ③：应用场景：原来的网址可以传到函数中，再经过处理变成新的网址 let url = 'www.imooc.com/course/list'; const addURLParam = (url, name, value) => { url += url.includes('?') ? '&' : '?'; url += ${name}=${value}; return url; }; url = addURLParam(url, 'c', 'fe'); console.log(url); url = addURLParam(url, 'sort', 'pop'); console.log(url);
• padStart()、padEnd():实例方法--->补全字符串长度

   基本用法
        console.log('x'.padStart(2, 'a')); //ax
        console.log('x'.padStart(5, 'a')); //aaaax
        console.log('x'.padEnd(2, 'a')); //xa
        console.log('x'.padEnd(5, 'a')); //xaaaa
        console.log('xyyyyy'.padEnd(5, 'a')); //xyyyyy
        console.log('x'.padEnd(10, '0123456789')); //x012345678
   应用场景：显示日期格式
        console.log('10'.padStart(2, 0)); //10
        console.log('1'.padStart(2, 0)); //01

• trimStart()、trimEnd()-->实例方法：清除字符串的首尾空格

        console.log('  ccc'.trimStart()); // ccc
        console.log('cc  '.trimEnd()); // cc
        //应用：表单提交

2.数组的新增方法

• includes()、Array.from()、find()、findIndex()

//includes-->数组中是否含有某个成员
        const arr = [1, 2, 3]
        console.log(arr.includes(2)); //true
        console.log(arr.includes('2')); //false
//应用：数组去重
        const arrs = [];
        for (const item of[1, 2, 3, 43, 42, 1, 2]) {
            if (!arrs.includes(item)) {
                arrs.push(item);
            }
        }
        console.log(arrs); //Array(5) [ 1, 2, 3, 43, 42 ]

• Array.from()-->构造函数的方法：把某些类型值变成数组

       console.log(Array.from('strrrr')); //Array(6) [ "s", "t", "r", "r", "r", "r" ]
        //所有可遍历的皆可转换为数组
        //数组，字符串，Set,Map,NodeList,arguments
        console.log(Array.from(new Set([1, 2, 3, 4, 1, 2, 3, 4]))); //Array(4) [ 1, 2, 3, 4 ]
        console.log([...new Set([1, 23, 23, 1, 3, 2, 3])]); //Array(4) [ 1, 23, 3, 2 ]
        //find()：找到满足条件的立即返回
        const findo = [2, 2, 4, 2, 1, 3, 5, 6].find((value, index, arr) => {
            console.log(value, index, arr);
            return value > 3
        });
        console.log(findo); //4
        //findIndex()：找到满足条件的 ，立即返回索引

3.对象的新增方法

    // Object.assign()、Object.keys()、Object.values()、Object.entries()
    // Object.assign() -->合并对象,但是直接合并到了第一个参数中，返回的就是合并后的对象
    const pear = {
        color: 'green',
        age: 22
    }
    const bear = {
            gander: '男'
        }
        // console.log(Object.assign([],pear, bear));
    console.log({...pear,
        ...bear
    }); //Object { color: "green", age: 22, gander: "男" }
    //Object.keys()、Object.values()、Object.entries()
    const person33 = {
        name: 'aaaa',
        age: 33,
        gender: 'nan'
    };
    console.log(Object.keys(person33)); //Array(3) [ "name", "age", "gender" ]
    console.log(Object.values(person33)); //Array(3) [ "aaaa", 33, "nan" ]
    console.log(Object.entries(person33)); //  Array(3) [ (2) […], (2) […], (2) […] ]