ES2019-2022实用新特性

个人封装常用方法工具包：

https://github.com/lihai-boop/tool

文章已收录:

https://github.com/lihai-boop/Blog

每日一题，刷出强大:

https://github.com/lihai-boop/Blog/issues

前言

1. ES2019-2022新特性均再nodeJs，浏览器版本支持环境下演示；如实际操作中报错，请考虑兼容性，推荐使用bebal
2. 文章列举的特性并不是ES2019-2022全部特性，只摘录其中个人认为较实用的

ES2019

try...catch(e)...简化

try...catch(e)...其中e变成可选，不需要再额外处理

try {
    throw new Error(1);
} catch {
    console.log('报错了!');
}

Symbol([description]) 可获取描述

增加获取descruption描述的属性descruption

let sb = Symbol('symbol');
console.log(sb.description);//symbol

Object.fromEntries(iterable)

Object.fromEntries(iterable)将键值对列表转换成一个对象，iterable可为Array,Map以及其它可迭代对象

const myMap = new Map([['key1', 'value1'], ['key2', 'value2']]);
console.log(Object.fromEntries(myMap));//{ key1: 'value1', key2: 'value2' }

let oneArr = [['key1', 'value1'], ['key2', 'value2']];
console.log(Object.fromEntries(oneArr));//{ key1: 'value1', key2: 'value2' }

Object.entries()与object.fromEntries()相反

let obj = { key1: 'value1', key2: 'value2' }
console.log(Object.entries(obj));//[[ 'key1', 'value1' ], [ 'key2', 'value2' ]]

Array.flat(num)

Array.flat(num)多维数组拍平，num表示拍平几维数组，传入infinity无论多少维都会被拍平,num默认为1

let arr = [['key1', 'value1'], ['key2', 'value2']];
console.log(arr.flat(),arr);//[ 'key1', 'value1', 'key2', 'value2' ] [[ 'key1', 'value1' ], [ 'key2', 'value2' ]]

let arr = [['key1', 'value1'], ['key2', 'value2', ['key3', 'value3']]];
console.log(arr.flat());[ 'key1', 'value1', 'key2', 'value2', [ 'key3', 'value3' ] ]
console.log(arr.flat(2));//[ 'key1', 'value1', 'key2', 'value2', 'key3', 'value3' ]

let arr = [['key1', 'value1'], ['key2', 'value2', ['key3', 'value3']]];
console.log(arr.flat(Infinity));//[ 'key1', 'value1', 'key2', 'value2', 'key3', 'value3' ]

Array.flatMap()

Array.flatMap() 等价于Array.map(val=>[val*2]).flat()

let arr = [1,2,3];
console.log(arr.flatMap(val => val * 2));//[ 2, 4, 6 ]
//当数组结构层次为1时，flatMap与map方法一致
console.log(arr.map(val=>val*2));//[ 2, 4, 6 ]

let arr = [1,2,3];
let arr = [1, 2, 3];
console.log(arr.map(val => [val * 2]));//[ [ 2 ], [ 4 ], [ 6 ] ]
//flatMap 
console.log(arr.flatMap(val => [val * 2]));//[ 2, 4, 6 ]

String.trimStart()与String.trimEnd()

trimLeft，trimRight分别是trimStart,trimEnd的别名，作用为删除字符串开头或结尾的空格

let str1 = ' 2',
    str2 = '2 '
console.log(str1.trimStart());//"2"
console.log(str1.trimLeft());//"2"

console.log(str2.trimEnd());//"2"
console.log(str2.trimRight());//"2"

ES2020

统一全局环境命名globalThis

浏览器全局环境是window,nodeJs全局环境是global; ES2020增加globalThis,统一nodeJS与浏览器全局对象

浏览器环境

window === globalThis;//true

nodeJs环境

global === globalThis;//true

可选链操作符?.

我愿称之为最强

globalThis.a ? globalThis.a() : null;

判断a函数是否存在，存在则执行；

不了解决?.前,实际开发用三元运算，知道后?.一把梭

globalThis.a?.();

let obj = {
    name:'js',
    age:25,
    sex:'male'
}
let sex = obj?.sex;//相当于 let sex = obj?obj.sex:undefined;

动态import引入

该特性出来前,使用import加载文件，必须声明在文件最上层；对执行过程中无法通过判断来是否加载import引入的模块，做不到按需加载。

//报错!
if(a){
 import './...';  
}

动态引入 ,动态引入会返回一个promise

if(a){
    import('./..').then(res=>{
        //...
    })
}

当然可能使用await,**新特性中await**可以在单独使用，不一定要嵌套在async下

if(a){
   await import('./..');
}

BigInt允许超出安全数字范围Math.pow(2,53) - 1

const previousMaxSafe = BigInt(Number.MAX_SAFE_INTEGER);//9007199254740991n
const maxPlusOne = previousMaxSafe + 1n;//9007199254740992n

空值合并运算符??

当左侧为null或undefined时，返回右侧值

let value = globalThis.value ?? 1;
console.log(value);//1

let value = 0 ?? 1;
console.log(value);//0

ES2021

数字支持_分隔

let value = 1_000_000;
console.log(value);//1000000

逻辑空赋值??=,||=,&&=

当左侧为null或undefined时对其赋值，||=,&&=同理

let a;
a??=1; // 当a为null或undefined时，a被赋值为1
console.log(a);//1

String.prototype.replaceAll()替换全部

'1 2 3 1'.replace('1','2');//"2 2 3 1"
'1 2 3 1'.replaceAll('1','2')//"2 2 3 2"

Promise.any()

Promise.any()浏览器暂未全部支持，已列案(TC39 第四阶段草案)

Promise.any()接收一个Promise可迭代对象，只要其中的一个 promise 成功，就返回那个已经成功的 promise

const promise1 = new Promise((resolve,reject)=>{
    reject(1);
})
const promise2 = new Promise((resolve,reject)=>{
    reject(2);
})
const promise3 = new Promise((resolve,reject)=>{
    reject(3);
})

Promise.any([promise1,promise2,promise3]).then(res=>{
    console.log('有promise已成功!');
})

ES2022(待扩展补充)

class增加定义私有类字段

定义私有方法,私有字段，使用#作为前缀

class Person{
    //私有方法
    #getAge(){
     return this.age;
	}
}

最后

期待各位同学指点补充！

觉得文章有用的同学点赞一波!

参考

解读ES2020（ES11）新特性 - 简书 (jianshu.com)

类元素 - JavaScript | MDN (mozilla.org)

[译]ECMAScript 2021: 最终功能集确定｜技术点评 (juejin.cn)