ES2019的一些新语法

1,595 阅读3分钟

从ES5到ES6,然后到现在的ES2019,每一次迭代与更新都新增的一些新的属性和方法,让我们更加便捷地进行前端开发,当然这次也不例外,那么ES2019又带给我们什么新鲜玩意呢?一起来看看吧~

1. Object.entries()

可以用于将对象转化为数组

    let dog = {
        name:'小米',
        skin:'white',
        age:2
    }
    console.log(Object.entries(dog));// [['name','小米'],['skin','white'],['age',2]]

2. Object.fromEntries()

里面传一个数组作为参数,通常用于将数组转化为对象,通常可以作为Object.entries()的反操作,例如:

    let mobilePhone = {
        xiaomi:23,
        huawei:12,
        oppo:32,
        vivo:18,
        apple:10
    };
    
    
    let mobilePhoneArr = Object.entries(mobilePhone).filter(([brand,rate])=>{
        return rate > 15
    });
      // [['xiaomi',23],['oppo',32],['vivo',18]]
    
    let newFilterMobilePhone = Object.fromEntries(mobilePhoneArr);
    console.log(newFilterMobilePhone)
    // {xiaomi:23,oppo:32,vivo:18}
    

注意,如果属性名一样的情况下,那么后者会把前者给替换掉,例如:

    var mobileArr = [['xiaomi',23],['oppo',32],['vivo',18],['oppo',190]];
    console.log(Object.fromEntries(mobileArr))//{'xiaomi':23,'oppo':190,vivo:18};

3. Array.prototype.flat()

常用于将多维数组降维为一维数组,可以传参数,表示降维的深度,默认是1,如果传入的深度参数超过了降维为一维参数所需要的深度也没关系, 如果不知道深度的情况下,我们可以传一个Infinity作为深度参数,这样的话,不管你有多深,都会打成一维数组。举个栗子:

    let numberArr = [
        [12,34,[13,48]],
        [23,89],
        [43,39],
        [76,20]
    ];
    var numberFlat =  numberArr.flat(2);
    console.log(numberFlat); // [12,34,13,48,23..,]
    
    // 传入 Infinity "动态参数";
    console.log(numberArr.flat(Infinity))// 同上

使用flat 移除空项

    let arrIndex = [1,3,5,9,0,,12];
    console.log(arrIndex.flat())// [1,3,5,9,0,12];

4. Array.prototype.flatMap(callback)

用于展平嵌套数组,相当于先对数组进行map操作,然后进行flat操作,其深度为1,此函数用一个回调函数作为参数。回调函数用于指示数组应该怎样被展平。

    console.log(arr.flatMap((item)=>{
        return [item*2]
    })); // [24,108,20,128],相当于
    console.log(arr.map((item)=>{
        return [item*2]
    }).flat())// [24,108,20,128]

5. String.trimStart()和String.trimEnd()

去除字符串(前)后面的空格

    var str = ' Hello,ES2019! ';
    console.log(str.trimLeft().trimRight()); // Hello,ES2019!
    console.log(str.trimStart().trimEnd()); // Hello,ES2019!

6. 可选catch的绑定,可以不传catch参数

    // 以前
    try {
        ...
    } catch (error) {
        // 必须要传参数error
        ...
    }
    
    // 现在
    try {
        ...
    } catch {
        // 不用传参数 
        ...
    }

7. Function.toString()

以前返回的是去掉空白符符号的字符串,现在是基本上是原样返回

function getFunc(a,b) {
    return a + b;
}
console.log(getFunc.toString())// 字符串getFunc函数

8. 符号描述Symbol

当我们在 JS 中创建一个 Symbol时,可以指定一个在以后用于调试的描述。要得到这个描述,一般我们要再次创建Symbol,现在不用了,Symbol有一个新的只读属性description.

    let symbol = Symbol('aDescription');
    console.log(symbol.description)// aDescription 字符串

本人才疏学浅,如果文中有什么不妥之处,欢迎指正,谢谢~😄