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

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

网络异常,图片无法展示
|

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


1. BigInt


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

目前,您可以在JavaScript中存储为整数的最大数量为pow(2, 53) - 1。但是 BigInt 实际上允许您执行更多操作。

网络异常,图片无法展示
|

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

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


2. 动态导入


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

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

网络异常,图片无法展示
|


3. 空值合并


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

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

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

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

网络异常,图片无法展示
|

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


4. 可选链接


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

网络异常,图片无法展示
|


5. Promise.allSettled


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

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

网络异常,图片无法展示
|


6. String的matchAll


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

网络异常,图片无法展示
|


7. 全局this


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

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

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

网络异常,图片无法展示
|


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(对于内联脚本)。

目录
相关文章
|
3月前
|
XML 前端开发 JavaScript
JavaScript代码优化利器:从ES5到ES6(二)
JavaScript代码优化利器:从ES5到ES6
|
3月前
|
JSON 自然语言处理 JavaScript
JavaScript代码优化利器:从ES5到ES6(一)
JavaScript代码优化利器:从ES5到ES6
|
1月前
|
JSON JavaScript 前端开发
javascript语言ES5版本详解(一)
javascript语言ES5版本详解(一)
|
1月前
|
JavaScript 前端开发
JavaScript的ES5模块化开发
JavaScript的ES5模块化开发
|
2月前
|
JSON 前端开发 JavaScript
掌握现代JavaScript:ES7到ES12的新特性全解析!
ES2016(ES7)中新增了如下特性👇 Array.prototype.includes Exponentiation Operator
|
3月前
|
存储 JSON 前端开发
JavaScript代码优化利器:从ES5到ES6(三)
JavaScript代码优化利器:从ES5到ES6
|
5月前
|
前端开发 JavaScript Java
探索JavaScript ES6+新特性
探索JavaScript ES6+新特性
42 0
|
6月前
|
存储 前端开发 JavaScript
|
6月前
|
XML JavaScript 前端开发
使用 Babel 将基于 ES6 的 SAP UI5 的代码转译成传统 JavaScript 代码
使用 Babel 将基于 ES6 的 SAP UI5 的代码转译成传统 JavaScript 代码
41 0
|
7月前
|
JavaScript 前端开发
现代JavaScript:深入了解ES6语法特性
ECMAScript 6(通常简称为ES6或ES2015)是JavaScript的重要更新,引入了许多强大的语法特性和新的功能。在本博客中,我们将深入研究ES6的语法特性,包括箭头函数、解构赋值、类和模块等,以帮助您更好地利用现代JavaScript的强大功能。
113 0