个人封装常用方法工具包：
文章已收录:
每日一题，刷出强大:
前言
- ES2019-2022新特性均再nodeJs，浏览器版本支持环境下演示；如实际操作中报错，请考虑兼容性，推荐使用bebal
- 文章列举的特性并不是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)
