ES新增方法

字符串新增方法

• 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
    // include()第2个参数默认从0开始检索
    console.log('abc'.includes('a',0));//true
    console.log('abc'.includes('a',1));//false
    // 应用
    // https://www.imooc.com/course/list
    // https://www.imooc.com/course/list?c=fe&sort=pop&name=value
    let url='https://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(5,'ab'));
    console.log('x'.padEnd(5,'ab'));
    console.log('x'.padEnd(4,'ab'));
    // 注意事项
    // 原字符串的长度，等于或大于最大长度，不会削减原字符串
    // 字符串补全不生效，返回原字符串
    console.log('xxx'.padStart(2,'ab'));
    console.log('xxx'.padEnd(2,'ab'));
    // 用来补全的字符串与原字符串长度之和超过了最大长度
    // 截去超出位数的补全字符串，原字符串不动
    console.log('abc'.padStart(10,'0123456789'));
    // 如果省略第二个参数，默认使用空格补全长度
    console.log('x'.padStart(4));
    console.log('x'.padEnd(4));
    // 应用
    // 显示日期格式 2020-10-10
    console.log('10'.padStart(2,'0'));
    console.log('1'.padStart(2,'0'));

 

数组的新增方法

• includes() 判断数组中是否含有某个成员
• Array.from() 将其他数据类型转换成数组
• find()和findIndex() 找到满足条件的一个立即返回值/索引

// includes()
    // 判断数组中是否含有某个成员
    console.log([1,2,3].includes(2));
    // 第2个参数表示检索的位置
    console.log([1,2,3].includes(2,1));
    console.log([1,2,3].includes('2'));
    // 基本遵循严格相等（===），但是对于NaN的判断与===不同
    console.log([1,2,NaN].includes(NaN));
    // 应用
    // 去重
    const arr=[];
    for (const item of [1,2,1]) {
        if (!arr.includes(item)){
            arr.push(item);
        }
    }
    console.log(arr);

// 哪些可以通过Array.from()转换成数组
    // (1)所有可遍历的
    console.log(Array.from(new Set([1, 2, 1])));
    console.log([...new Set([1, 2, 3])]);
    // (2)拥有length属性的任意对象
    // 它只会把带有数字的键名转换为数组
    const obj = {
        '0': 'a',
        '1': 'b',
        'name': 'Alex',
        length: 3
    };
    console.log(Array.from(obj));

    // (3)第二个参数
    // 作用类似于数组的map方法，（遍历）用来对每个元素进行处理
    // 将处理后的值放入返回的数组
    console.log([1, 2].map(value => {
        return value * 2;
    }));
    console.log(Array.from('12', value => value * 2));
    console.log(Array.from('12').map(value => value * 2));
    // 第三个参数
    // 箭头函数不能修改this
    Array.from(
        '12',
        value=>{
            console.log(this);
        },
        document
    );
// 一般函数修改this
    Array.from(
        '12',
        function (){
            console.log(this);
        },
        document
    );

    // 1.基本用法
    console.log([1, 5, 10, 15].find((value, key, arr) => {
        //console.log(value,key,arr);
        return value > 9
    }));
    console.log([1, 5, 10, 15].findIndex((value, key, arr) => {
        //console.log(value,key,arr);
        return value > 9
    }));
    // 2.第2个参数
    console.log([1, 5, 10, 15].find((value, key, arr) => {
        //console.log(value,key,arr);
        console.log(this);
        return value > 9;
    }, document));
    // 改为一般函数才可以该this
    console.log([1, 5, 10, 15].find(function (value, key, arr) {
        //console.log(value,key,arr);
        console.log(this);
        return value > 9
    }, document));

    // 应用
    const students = [
        {
            name: '张三',
            sex: '男',
            age: 18
        },
        {
            name: '李四',
            sex: '女',
            age: 20
        },
        {
            name: '赵六',
            sex: '男',
            age: 22
        }
    ];
    console.log(students.find((value) => value.sex === '女'));
    console.log(students.findIndex((value) => value.sex === '女'));

对象的新增方法

• Object.assign(目标对象，源对象1，源对象2，...)方法：直接合并到第一个参数中，返回的就是合并后的对象

const apple={
        color:'red',
        shape:'圆形',
        taste:'甜'
    };
    const pen={
        color: '黑色',
        shape: '圆柱形',
        use:'写字'
    };
    // 把pen对象合并到apple对象中，apple对象发生改变
    //console.log(Object.assign(apple,pen));
    //console.log(apple);
    // 同一个引用
    //console.log(Object.assign(apple,pen)===apple);//true
    // 展开运算符 生成新对象
    //console.log({...apple,...pen});
    //console.log({...apple});
    //console.log({...apple}===apple);//false

    // 应用:一般开头第一个参数设置为空对象，这样中间对象就不会发生变化
    console.log(Object.assign({},apple,pen));
    console.log(apple);

注意事项：

• 基本数据类型作为源对象，与对象的展开类似，先转换成对象，再合并
• 同名属性的替换，后面直接覆盖前面的，不管属性值什么数据类型

const apple={
        color:['red','green'],
        shape:'圆形',
        taste:'甜'
    };
    const pen={
        color: ['黑色','银色'],
        shape: '圆柱形',
        use:'写字'
    };
    // 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.同名属性的替换
    // 后面直接覆盖前面的
    console.log(Object.assign({},apple,pen));

// 应用
    // 合并默认参数和用户参数
    const logUser=userOptions=>{
        const DEFAULT={
            username:'张三',
            age:18,
            sex:'男'
        };
        const options=Object.assign({},DEFAULT,userOptions);
        console.log(options);
    }
    logUser();
    // 解释一下：相当于传入undefined
    // const options=Object.assign({},DEFAULT,undefined);
    // 因为Object.assign()方法先把源对象undefined转换成对象{}再合并
    logUser({});
    console.log({username:'胡胡'});

 

• Object.keys()、Object.values()和Object.entries()方法 返回结果是数组

const person = {
        name: 'Alex',
        age: 18
    };
    // 对象构造函数的方法 得到结果是一个数组
    console.log(Object.keys(person));
    console.log(Object.values(person));
    console.log(Object.entries(person));
    // 与数组类似的区别 得到的是数组可遍历对象Iterator
    // 实例方法
    console.log([1.2].keys());
    console.log([1.2].values());
    console.log([1.2].entries());

应用

// 使用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);
    }