es6

50 阅读4分钟

14.1 includes()

    // 判断字符串中是否包含某些字符
    // 1. 基本用法 (组合形式进行判断)
    console.log('abc'.includes('a'));
    console.log('abc'.includes('ab'));
    console.log('abc'.includes('bc'));
    console.log('abc'.includes('ac')); // false

    // 2. 第二个参数
    // 表示开始搜索的位置,默认是0
    console.log('abc'.includes('a'));
    console.log('abc'.includes('a',0));
    console.log('abc'.includes('a',1)); // false

    // 3. 应用
    // 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
    };
    url = addURLParam(url,'c','fe'); // 给url添加c fe并赋值到url
    console.log(url);
    url = addURLParam(url,'sort','pop');
    console.log(url);

14.2 padStart()和padEnd()

    // 补全字符串长度
    // 基本用法
    console.log('x'.padStart(5,'ab')) // ababx
    console.log('x'.padEnd(5,'ab')); // xabab

    // 注意事项
    // 1. 原字符串的长度,等于或大于最大长度,不会消减原字符串,字符串补全不生效,返回原字符串
    console.log('xxx'.padStart(2,'ab')); // xxx
    
    // 2. 用来补全的字符串与原字符串长度之和超过了最大长度,截去超出位数的补全字符串,原字符串不动
    console.log('abc'.padStart(10,'0123456789'));
    console.log('abc'.padEnd(10,'0123456789'));
    
    // 3. 如果省略第二个参数,默认使用空格补全长度
    console.log('x'.padStart(4));
    console.log('x'.padEnd(4));

    // 应用
    // 显示日期格式(缺位补0)
    console.log('10'.padStart(2,0)); // 10
    console.log('1'.padStart(2,0)); // 01

14.3 trimStart()和trimEnd()

    <input type="text" id="username">
    <input type="submit" value="提交" id="btn">
    
    // 清除字符串的首或尾空格,中间的空格不会清除
    // 基本用法
    const s = ' a b c ';
    console.log(s);
    console.log(s.trimStart());
    console.log(s.trimEnd());
    console.log(s.trim()); // 首尾空格一起去除

    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()!==""){
            // 可以提交
            console.log('可以提交');
        }else{
            // 不能提交
            console.log('不能提交');
        }

        // 手动提交

    })

15.1 includes()

    // 判断数组中是否含有某个成员
    console.log([1,2,3].includes('2')); // false
    console.log([1,2,3].includes(2));
    // 第二个参数表示搜索的起始位置,默认值是0
    console.log([1,2,3].includes(2,2));
    // 基本遵循严格相等(===),但是对于NaN的判断与===不同,includes认为NaN===NaN
    console.log(NaN === NaN);
    console.log([1,2,NaN].includes(NaN));

    // 应用(去重)
    const arr = [];
    for(const item of [1,2,1]){
        if(!arr.includes(item)){ // 用includes判断item在不在数组里
            arr.push(item);
        }
    }
    console.log(arr);

15.2 Array.from()

    // 将其他数据类型转换成数组
    // 1. 基本用法
    console.log(Array.from('str'));

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

    // 拥有length属性的任意对象
    const obj = {
        '0':'a', // 只有数字会转化
        '1':'b',
        '2':'c',
        name:'alex', // 不会转化,用undefined填充
        length:3
    }
    console.log(Array.from(obj));
    // 第二个参数
    // 作用类似于数组的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));
    // 第三个参数
    Array.from(
        '12',
        value => {
            console.log(this);
        },
        document
    );
    Array.from(
        '1,2',
        function(){
            console.log(this);
        },
        document
    )

15.3 find()和findIndex()

    // find():找到满足条件的一个立即返回
    // findindex():找到满足条件的一个,立即返回其索引
    // 基本用法 value:遍历到的每一个值,index:索引值,arr数组本身
    // this指向是window,如修改this指向,需要把箭头函数改成普通函数
    console.log(
        [1, 5, 10, 15].find((value, index, arr) => {
            return value > 9
        })
    );
    console.log(
        [1, 5, 10, 15].findIndex((value, index, arr) => {
            return value > 9
        })
    );
    
    const students = [
        {
            name:'张三',
            sex:'男',
            age:16
        },
        {
            name:'李四',
            sex:'女',
            age:22
        },
        {
            name:'王二麻子',
            sex:'男',
            age:32
        }
    ]
    console.log(students.find((value=>value.sex==='女')));
    console.log(students.findIndex((value=>value.sex==='女')));

16.1 Object.assign()

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

    // 合并对象
    const apple = {
        color:'红色',
        shape:'圆形',
        taste:'甜'
    };
    const pen = {
        color:'黑色',
        shape:'圆柱形',
        use:'写字'
    }
    console.log(Object.assign(apple,pen));
    Object.assign直接合并到了第一个参数中,返回的就是合并后的对象
    console.log(Object.assign({},apple,pen)); // {}新对象
    console.log(apple);

    // 注意事项
    // 基本数据类型作为源对象
    // 与对象的展开类似,先转换成对象,在合并
    // console.log(Object.assign({},undefined));

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

    // 应用
    // 合并默认参数和用户参数
    const logUser=userOptions => {
        const DEFAULTS = {
            username:'ZhangSan',
            age:0,
            sex:'male'
        }
        const options = Object.assign({},DEFAULTS,userOptions); // 前面是默认参数,后面是用户参数
        console.log(options);
    }
    logUser({username:'alex'})

16.2 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)); // 构造函数方法,返回数组

    // 与数组类似方法的区别
    console.log([1,2].keys()); // 实例方法,返回数组的遍历对象
    console.log([1,2].values());
    console.log([1,2].entries());

    // 数组的keys()、values()、entries()等方法是实例对象,返回的都是iterator
    // 对象的Object.keys()、Object.values()、Object.entries()等方法是构造函数方法,返回的是数组
    // 使用for...of循环遍历对象
    const persons = {
        name:'alex',
        age:18
    }
    for(const key of Object.keys(person)){
        console.log(key);
    }
    for(const values of Object.values(person)){
        console.log(values);
    }
    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()/entries()并不能保证顺序一定是你看到的样子,这一点和for in是一样的