1. 犀牛前端部落首页
  2. JavaScript百科

ES2020 JavaScript特性

新的ES2020功能现在已经完成了,这意味着我们现在对ES2020将要发生的变化有了一个完整的概念,新的改进了的JavaScript规范。

现在就是学习ES2020最好的时候!

本文俺将跟大家一起学习ES2020的10个新特性。

ES2020 JavaScript特性

BigInt

JavaScript中最受期待的特性之一BigInt终于出现了。它实际上允许开发者在他们的JS代码中有更大的整数表示用于数据处理。

目前,JavaScript中可以存储为整数的最大数字是pow(2,53) – 1。但BigInt允许你做得更多。

ES2020 JavaScript特性

但是,您需要在数字的最后添加一个n,正如您在上面看到的那样。n表示这是一个BigInt, JavaScript引擎(v8引擎或它使用的任何引擎)应该区别对待它。

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

动态导入

JavaScript中的动态导入让您可以选择将JS文件作为模块动态导入到应用程序中。这就像你现在用Webpack和Babel做的那样。

这个特性将帮助您在不需要webpack或其他模块绑定的情况下发布按需请求代码,也就是众所周知的代码分割。如果愿意,还可以在if-else块中有条件地加载代码。

好处是您实际上导入了一个模块,因此它不会污染全局名称空间。

ES2020 JavaScript特性

nullish 合并

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

在JavaScript中,很多值都是false,例如空字符串,数字0,undefined,null,false,NaN等。

但是,很多时候您可能想检查一个变量是否为空-即它是undefined还是为null,例如当变量可以具有空字符串甚至是假值时就可以了。

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

ES2020 JavaScript特性

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

可选链式

可选的链接语法允许您访问深度嵌套的对象属性,而不必担心该属性是否存在。如果不存在,将返回undefined。

这不仅适用于对象属性,也适用于函数调用和数组。超级方便!这里有一个例子:

ES2020 JavaScript特性

Promise.allSettled

Promise.allsettle方法接受一个承诺数组,并且只在所有承诺都被解决时才解析——解决或拒绝。

这在以前是不可用的,尽管一些类似race和all的紧密实现是可用的。这给JavaScript带来了“只要运行所有承诺—我不关心结果”的特性。

ES2020 JavaScript特性

String#matchAll

matchAll是添加到与正则表达式相关的字符串原型中的一个新方法。这将返回一个迭代器,该迭代器将依次返回所有匹配的组。让我们看一个快速的例子:

ES2020 JavaScript特性

globalThis

如果你写了一些跨平台的JS代码,可以在Node上运行,在浏览器环境中运行,也可以在web workers内部运行,你将很难获得全局对象。

这是因为它是用于浏览器的window,用于节点的global,用于web工作者的self。如果有更多的运行时,它们的全局对象也会不同。

所以你必须有自己的检测运行时的实现,然后使用正确的全局变量——也就是说,直到现在。

ES2020带给我们globalThis,它总是指全局对象,无论你在哪里执行你的代码:

模块化命名导出

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

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

然而,直到现在还不存在对称导出语法:

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

这相当于以下内容:

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

for in 顺序

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

import.meta

import.meta对象是由ECMAScript实现创建的,具有空原型。

考虑模块module.js:

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

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

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

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

结论

JavaScript的发展速度真的是太快了,大家都得加把劲了呀,奥利给!!!

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/3505.html

发表评论

登录后才能评论