ES2020 中 Javascript 10 个你应该知道的新功能

原文地址: www.freecodecamp.org/news/javasc… 译文地址：github.com/xiao-T/note…
本文版权归原做者全部，翻译仅用于学习。

---

好消息 - ES2020 新功能已经落地！这就意味着，如今对 ES2020 中 Javascript 的新增和改进要有一个完整的了解。让咱们来看看都有哪些改变。

#1: BigInt

BigInt，Javascript 中最期待的新功能终于落地。它容许开发者在 JS 中使用更大的整数进行数据处理。

以前，Javascript 中最大的整数是 pow(2, 53) - 1。可是，BigInt 不受此限制。

然而，就如你在上面看到，你须要在数字后面添加一个 n。这个 n 说明这是一个 BigInt，Javascript 引擎应该特殊处理（不论是 V8，仍是其它引擎）。

由于传统的数字系统是 IEEE754（它不支持这种大数字），所以，这个改进并不会向后兼容。

#2：动态引入

Javascript 的动态引入，容许你把 JS 文件做为一个模块动态的引入到你的应用中。这就像你使用 webpack 和 Babel 同样。

这个功能能够帮助你处理按需加载的代码，拆分代码，并且，并不须要 webpack 或者其它模块处理器。若是，你喜欢也能够在 if-else 块中加载代码。

在 if-else 块中引入一个模块，这样的好处是：不会污染全局命名空间。

#3: 空值合并

空值合并能够真正的检查 nullish 值，而不是 falsely 值。你或许会问：nullish 和 falsely 之间有什么不一样呢？

在 Javascript 中有不少值都是 falsely。好比：空字符串、数字 0、undefined 、null、 false 、NaN 等。

然而，不少状况下你只想检测一个变量是否为空值 -- undefined 或者 null，就像变量能够是一个空字符串甚至是一个假值。

在这个示例中，你将会看到新的空值合并操做符：??。

你能够清楚的看到 OR 操做符老是返回一个真值，可是，空值操做符返回一个非空值。

#4：可选链

可选链语法容许你访问嵌套更深的对象属性，而不用担忧属性是否存在。若是，存在很好。反之，会返回 undefined。

它不只仅可操做对象属性，也能够操做函数的调用或者数组。这样更加方便！如下是个演示：

#5: Promise.allSettled

Promise.allSettled 方法接收一组 Promise，而且会返回全部的结果 - 而不论是 resolved 仍是 rejected。

在以前，这是不可能的，尽管有些相似的实现好比：race 和 all。它只会“运行全部的 promise - 而不关心它们的结果”。

#6: String#matchAll

matchAll 是 String 原型链上的一个新增的方法，它能够关联正则表达式。它返回一个迭代器，一个接一个的返回全部匹配的组。咱们来看一个演示：

#7: globalThis

若是，你写过那些能够运行在 Node、浏览器或者 web-workers 等跨平台的 JS 代码，你就会花费不少的时间去处理全局对象的问题。

这是由于不一样平台全局对象也不一样，浏览器中是 window，Node 中是 global，web workers 中是 self。若是，还有更多的运行环境，这个对象也会有不一样。

所以，你本身必要检查运行环境来决定使用正确是全局对象。

ES2020 给咱们带来了 globalThis 对象，它始终会引用着全局对象，而不用关系代码在哪运行：

#8：导出模块的命名空间

Javascript 模块中，一直均可以使用如下这种语法：

import * as utils from './utils.mjs'
复制代码

然而，直到如今还不能够像如下这样使用 export 语法：

译者注：目前是支持的（2020-04-24）

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（对于内联脚原本说）。

总结

我喜欢 Javascript 社区不断发展的一致性和速度。看看 Javascript 如何从一种通过十年的嘘声演变成现在这种最强大、最灵活和最通用的语言，真的很神奇。

你是否但愿用一种全新的方式学习 Javascript 和其它的编程语言？我正在开发一个全新的开发者平台 ，如今能够试下！

ES2020 中功能哪一个是你喜欢的呢？能够在 Twitter 和 Instagram 上联系告诉我！

个人视频也有相同专题的内容。若是您能表达爱意，那就对我来讲意味着世界！

<www.youtube.com/watch?v=Fag… />