【ES2020-ES2022】ES11-ES13很实用新特性

本文总结了几个新版本发布后，直呼666的新功能。解救冗余代码。

ES2022

顶层 await

不用必须在 await 外边包 async function 了！！！

以前 await asyncFunction(); 放在script中直接执行，或者在自启动函数中执行，会报错
but现在！ 可以直接调用执行了

在ES Module中，可以直接顶层使用await，并通过try catch 收集报错。
好处：1.代码更简练，不用多写一层function。2.在父级调用该子模块时，会根据await执行同步命令，暂停父级执行。

注：1.顶层 await 只在 ES 模块中生效， 不支持普通脚本和 CommonJS 模块。
2.必须要显式声明模块之间的依赖关系，才会在调用时暂停父级命令。若父级调用的两个子模块之间没有依赖关系，所以只会暂停父级执行，而不会暂停另一子模块的执行。

private & static

更像服务端语法，更规范了。

#开头可以将类的属性和方法设置为私有，它们只能从类本身访问。

 #anotherPrivateField = 4;

static 可以节省内存空间，在多个实例之间共享

 static id = '...';

导入断言

使用这种方式导入，我们就不需要手动解析它了。

在 import…from… 后面加 assert { type: ‘json’ }

import json from './foo.json' assert { type: 'json' };
console.log(json.answer); // 42

负数索引

终于不用写冗余的[arr.length - 1]了！！

arr.at(-1)

注：at() 方法只能用于获取值，不能用于设置。

ES2021

数字分隔符（_）

使用数字分隔符可以提高数字的可读性 ，例如使用 1_000_000 来表示 1000000 。这种方式不会影响代码的功能。

三种操作符 ??= ||= &&=

减少代码冗余及复杂的逻辑判断

赋值操作符 (??=) 该操作符只在变量的值为 null 或 undefined 时才会执行赋值操作。
逻辑或赋值 (||=) 该操作符在变量的值为 “假” 值会执行赋值操作。
逻辑与赋值 (&&=) 该操作符在变量的值为 “真” 值会执行赋值操作。

??= 和 ||=的区别是 当x为0时，??=不会赋值，但||=会赋值。

赋值操作举例：x2 &&= ‘b’;

ES2020

可选链

我们经常需要访问对象的属性或方法，如果对象未定义或为 null，使用访问符 “.” 或者索引符 “[]” 访问其属性或方法时就会抛出异常。可选链就是为了解决这个问题而生的，通过在需要访问的对象后加上 “?”，避免了抛出异常。

例如，假设我们有一个对象 person，它有一个属性 name，但是 person 本身的定义是可选的，则可以这样写：let name = person?.name;如果 person 未定义，则 name 也会为 undefined，而不是抛出异常。可选链也可以用在索引和函数调用上。

悄咪咪说，个人评选最好用的更新！！！在业务代码中，通过接口返回的 object ，总是要判断字段是否存在来提高代码鲁棒性，经常会有考虑不周报错的bug。此外，虽然使用三元运算符降低了些代码冗余度，但每个字段判断处理的代码还是一堆。可选链就很好的集合了所有的可能性结果，可以在最后一步进行判断是否为undefined，对于层数很多的 object 非常好用。

空值合并运算符 ??

同上，该操作符与 “||” 操作符用于条件赋值有所不同。相对于 “||” 操作符适用于所有假值，?? 操作符只适用于 undefined 和 null 值。在使用时，可以用它来判断变量是否为 undefined 或者 null，如果是则返回默认值或者指定的值，如果不是则返回变量本身的值。这个操作符可以方便地处理变量的默认值或者初始值。

它只适用于 undefined 和 null 两个值，而不是 false 值。

const correctValue = '' ?? 'incorrect';   // 总是 ""
const anotherCorrectValue = 0 ?? 'incorrect';  // 总是 0

动态导入

传统的导入方式是在代码中使用 import … from … 的语法来导入需要的模块，但使用这种方式会将所有需要导入的模块都一次性加载进来，无法实现按需加载。而动态导入则能够在运行时通过使用 import() 方法来实现按需加载。此外，动态导入也支持使用变量来动态指定需要导入的模块，相比传统的导入方式更加灵活。

let importModule;
if (shouldImport) {
  importModule = await import('./module.mjs');
}