2023-03-07
前端
00

目录

ES2019
try...catch(e)...简化
Symbol([description]) 可获取描述
Object.fromEntries(iterable)
Array.flat(num)
Array.flatMap()
String.trimStart()与String.trimEnd()
ES2020
统一全局环境命名globalThis
可选链操作符?.
动态import引入
BigInt允许超出安全数字范围Math.pow(2,53) - 1
空值合并运算符??
ES2021
数字支持_分隔
逻辑空赋值??=,||=,&&=
String.prototype.replaceAll()替换全部
Promise.any()
ES2022(待扩展补充)
class增加定义私有类字段
最后
参考

image.png

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

ES2019

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

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

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

Symbol([description]) 可获取描述

增加获取descruption描述的属性descruption

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

Object.fromEntries(iterable)

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

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

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

js
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

js
let arr = [['key1', 'value1'], ['key2', 'value2']]; console.log(arr.flat(),arr);//[ 'key1', 'value1', 'key2', 'value2' ] [[ 'key1', 'value1' ], [ 'key2', 'value2' ]]
js
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' ]
js
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()

js
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 ]
js
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的别名,作用为删除字符串开头或结尾的空格

js
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与浏览器全局对象

浏览器环境

js
window === globalThis;//true

nodeJs环境

js
global === globalThis;//true

可选链操作符?.

我愿称之为最强

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

判断a函数是否存在,存在则执行;

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

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

动态import引入

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

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

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

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

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

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

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

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

空值合并运算符??

当左侧为nullundefined时,返回右侧值

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

ES2021

数字支持_分隔

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

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

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

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

String.prototype.replaceAll()替换全部

js
'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

js
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增加定义私有类字段

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

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

最后

期待各位同学指点补充!

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

参考

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

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

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

本文作者:凌览

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!