ES 2020(es11) 新增了几个非常好用的东西


自 2015 年发布 ES6 以来,JavaScript 一直在快速发展,每次迭代中都会出现大量新功能。 JavaScript 语言规范的新版本每年更新一次,新语言功能建议的定稿比以往更快。这意味着新功能将以前所未有的速度被整合到现代浏览器和其他 JavaScript 运行时引擎(如 Node.js)中。
在 2019年,“Stage 3”阶段有许多新功能,这意味着它即将完成,并且已经在浏览器和 Node 中获得对这些功能的支持。如果我们想将它们用于生产环境,则可以使用 Babel 之类的东西将其转换为旧版 JavaScript,以便在需要时用于旧版浏览器(如 Internet Explorer)。

空位合并运算符

来自 undefined 或 null 值的另一个问题是,如果我们想要的变量为 undefined 或 null 则必须给变量设置默认值。例如:

当使用 || 运算符将 x 设置为 y 时,如果 x 被定义为 undefined,我们必须设置一个默认值。运算符 || 的问题在于,所有类似于 0,false 或空字符串之类的值都将被我们不想要的默认值覆盖。

为了解决这个问题,有人提议创建一个“nullish”合并运算符,用 ?? 表示。有了它,我们仅在第一项为 null 或 undefined 时设置默认值。使用无效的合并运算符,以上表达式将变为:

例如有以下代码:

y 将被分配的值为 500,因为 x 的值为 null。但是,由于 n 不为 null 或 unfined,因此 m 被赋予值为 0。如果我们使用 || 而不是 ??,那么由于 0 为假,因此将为 m 赋值 9000。

不幸的是,此功能尚未在任何浏览器或 Node.js 中实现,我们必须使用最新版本的 Babel 才能使用此功能。

类的私有字段

最新提案之一是在类中添加私有变量的方法。我们将使用 # 符号表示类的私有变量。这样就不需要使用闭包来隐藏不想暴露给外界的私有变量。例如我们可以编写一个简单的类来增加和减少数字,请看以下代码:

代码中 console.log 输出的结果是 1。 #x 是一个私有变量,无法在类外部访问。所以如果我们这样写:

将会得到提示 Uncaught SyntaxError: Private field ‘#x’。

私有变量是 JavaScript 类非常需要的功能。现在,最新版本的 Chrome 和 Node.js v12 中已提供了此功能。

可选链运算符

如果要访问对象的深层嵌套属性,则必须通过很长的布尔表达式去检查每个嵌套级别中的属性。必须检查每个级别中定义的每个属性,直到所需的深度嵌套的属性为止,如下代码所示:

如果在任何级别的对象中都有 undefined 或 null 的嵌套对象,如果不进行检查,那么的程序将会崩溃。这意味着我们必须检查每个级别,以确保当它遇到 undefined 或 null 对象时不会崩溃。

使用可选链运算符,只需要使用 ?. 来访问嵌套对象。而且如果碰到的是 undefined 或 null 属性,那么它只会返回 undefined。通过可选链,可以把上面的代码改为:

动态import

静态 import 和动态 import() 有各自的特点和使用场景。使用静态 import 来初始绘制依赖关系,考虑到按需加载则使用动态 import()。

static import 是没有括号的,dynamic import() 是带括号的。不注意的可能会混淆。用法的区别: