(译)你应该知道的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(对于内联脚本)。

目录
相关文章
|
6月前
|
缓存 前端开发 JavaScript
不可思议!!我被这5 个 JavaScript 新功能惊到了...
不可思议!!我被这5 个 JavaScript 新功能惊到了...
|
Web App开发 JavaScript 前端开发
2022 年你应该尝试的 8个 JavaScript 新功能🔥
**本文主要介绍几个已经进入stage4的提案,这几个提案有望在2022年逐步纳入标准。**(请注意:纳入标准并不等同于浏览器支持)
|
3月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
49 1
JavaScript中的原型 保姆级文章一文搞懂
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
138 2
|
3月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
33 0
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
195 4
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
107 4
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
98 4
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
112 4

热门文章

最新文章