(译)你应该知道的ES2020中的10个JavaScript新功能

我心飞翔 分类:javascript

嘿,新的ES2020功能已经存在了一段时间,但并不是所有人都知道,所以这里有一些很酷的功能可以尝试一下!

1. BigInt

BigInt,JavaScript中最令人期待的功能之一,终于来了。实际上,它允许开发人员在其JS代码中使用更大的整数表示形式进行数据处理和数据处理。

目前,您可以在JavaScript中存储为整数的最大数量为pow(2, 53) - 1。但是 BigInt 实际上允许您执行更多操作。
(译)你应该知道的ES2020中的10个JavaScript新功能

但是,如上所示,您需要在数字的末尾附加 nn 表示这是一个 BigInt,JavaScript引擎(对于v8引擎)应区别对待。

此改进不向后兼容,因为传统的数字系统是IEEE754(它不能支持此大小的数字)。

2. 动态导入

JavaScript中的动态导入使您可以选择将JS文件作为模块自然地动态导入应用程序中。就像您当前使用 WebpackBabel 进行操作时一样。

此功能将帮助您发送按需请求的代码(通常称为代码拆分),而不会增加 webpack 或其他模块捆绑器的开销。如果愿意,还可以有条件地在 if-else 块中加载代码。好消息是您实际上导入了一个模块,因此它永远不会污染全局名称空间。

(译)你应该知道的ES2020中的10个JavaScript新功能

3. 空值合并

空值合并增加了真正检查 空值 而不是 假值 的能力。您可能会问,空值假值 之间有什么区别?

在JavaScript中,许多值都是 false,例如 ""0undefinednullfalseNaN 等。

但是,您可能要检查无数个变量是否为空的次数,也就是说,该变量是 undefined 还是 null,就像变量可以有一个空字符串甚至是一个假值一样。

在这种情况下,您将使用新的空值合并运算符 ??

(译)你应该知道的ES2020中的10个JavaScript新功能

您可以清楚地看到 || 运算符如何始终返回真实值,而 null 运算符如何返回非null值。

4. 可选链接

可选链接语法使您可以访问深度嵌套的对象属性,而不必担心该属性是否存在。如果存在,那就太好了!否则,将返回 undefined。这适用于对象属性,也适用于函数调用和数组。超级方便!像这个例子:

(译)你应该知道的ES2020中的10个JavaScript新功能

5. Promise.allSettled

Promise.allSettled 方法接受一个Promises数组,并且仅在所有这些Promises都已结算时才解决(已解决或被拒绝)。

之前它是不可用的,即使像 raceall 一样的逻辑可用。

(译)你应该知道的ES2020中的10个JavaScript新功能

6. String的matchAll

matchAll 是添加到 String 原型的新方法,与正则表达式相关。这将返回一个迭代器,该迭代器一个接一个地返回所有匹配的组。看一下这个例子:

(译)你应该知道的ES2020中的10个JavaScript新功能

7. 全局this

如果您编写了一些可以在Node上,浏览器环境以及Web工作者内部运行的跨平台JS代码,那么将很难掌握全局对象。

这是因为它是浏览器的窗口,是Node的全局窗口,是web worker本身。如果有更多的运行时,则全局对象也将有所不同。

因此,您将不得不拥有自己的实现,以检测运行时,然后使用正确的全局变量。因此,ES2020带来了 globalThis,它始终引用全局对象,无论您在何处执行代码:

(译)你应该知道的ES2020中的10个JavaScript新功能

8. 导出模块的命名空间

在JavaScript模块中,已经可以使用以下语法:

import * as utils from './utils.mjs'
 

但是到目前为止,还没有对应的导出语法:

export * as utils from './utils.mjs'
 

它等效于:

import * as utils from './utils.mjs'
export { utils }
 

9. 更好的定义for-in顺序

ECMA规范未指定 for (x in y) 应按哪个顺序运行,即使以前浏览器自己实现了一致的顺序,但ES2020中已对其进行了正式标准化。

10. import.meta

import.meta 对象是由ECMAScript实现创建的,它带有一个 null 原型。

想象一个模块,module.js

<script type="module" src="module.js"></script>
 

您可以使用 import.meta 对象访问有关模块的 meta 信息:

console.log(import.meta); // { url: "file:///home/user/module.js" }
 

它返回一个带有url属性的对象,该属性指示模块的基本URL。这将是从中获取脚本的URL(对于外部脚本)或包含文档的文档基础URL(对于内联脚本)。

我的公众号:道道里的前端栈,分享前端知识,嚼碎的感觉真奇妙~

回复

我来回复
  • 暂无回复内容