ES2020

好消息– ES2020的新功能现已完成！这意味着我们现在对ES2020（JavaScript的新的和改进的规范）中发生的变化有了完整的了解。因此，让我们看看这些更改是什么。

原文地址：HTTPS：//www.freecodecamp.org / ...
TC39第4阶段：HTTPS：//github.com/tc39/propo ...
代码运行结果：https://observablehq.com/@spe .. 。

1：BigInt

详细：官方介绍

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

目前，您可以在JavaScript中存储为整数的最大数量为pow(2, 53) - 1。但是BigInt实际上允许您超越此范围。  

语法：
ABigInt通过附加n到整数的末尾或调用构造函数来创建。

const theBiggestInt = 9007199254740991n;

const alsoHuge = BigInt(9007199254740991);
// ↪ 9007199254740991n

const hugeButString = BigInt('9007199254740991');
// ↪ 9007199254740991n

但是，n如上所示，您需要在数字的末尾附加一个附录。这n表示这是一个BigInt，JavaScript引擎（v8引擎或它使用的任何引擎）应对此加以区别。

此改进不向后兼容，因为传统的数字系统是IEEE754（它不能支持这种大小的数字）。

运营商：

您可以使用+，*，-，** 和%与BigIntS，就像对待Number秒。

const previousMaxSafe = BigInt(Number.MAX_SAFE_INTEGER);
// ↪ 9007199254740991

const maxPlusOne = previousMaxSafe + 1n;
// ↪ 9007199254740992n
 
const theFuture = previousMaxSafe + 2n;
// ↪ 9007199254740993n, this works now!

const multi = previousMaxSafe * 2n;
// ↪ 18014398509481982n

const subtr = multi – 10n;
// ↪ 18014398509481972n

const mod = multi % 10n;
// ↪ 2n

const bigN = 2n ** 54n;
// ↪ 18014398509481984n

bigN * -1n
// ↪ –18014398509481984n

const expected = 4n / 2n;
// ↪ 2n

const rounded = 5n / 2n;
// ↪ 2n, not 2.5n

2：动态导入

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

此功能将帮助您发送按需请求的代码（通常称为代码拆分），而不会增加webpack或其他模块捆绑器的开销。如果愿意，还可以有条件地在if-else块中加载代码。

好消息是您实际上导入了一个模块，因此它永远不会污染全局名称空间。

3：空位合并

详细：官方介绍

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

在JavaScript中，很多值都是falsey一样空字符串，数字0， ，undefined，null，false，NaN等。

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

在这种情况下，您将使用新的无效合并运算符??。

语法：
_Base case_。如果??运算符左侧的表达式求值为undefined或null，则返回其右侧。

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

4：可选链接

详细：官方介绍

可选的链接语法使您可以访问深度嵌套的对象属性，而不必担心该属性是否存在。如果存在，那就太好了！如果没有，undefined将被退回。

这不仅适用于对象属性，而且适用于函数调用和数组。超级方便！这是一个例子：

基本情况：

a?.b                          // undefined if `a` is null/undefined, `a.b` otherwise.
a == null ? undefined : a.b

a?.[x]                        // undefined if `a` is null/undefined, `a[x]` otherwise.
a == null ? undefined : a[x]

a?.b()                        // undefined if `a` is null/undefined
a == null ? undefined : a.b() // throws a TypeError if `a.b` is not a function
                              // otherwise, evaluates to `a.b()`

a?.()                        // undefined if `a` is null/undefined
a == null ? undefined : a()  // throws a TypeError if `a` is neither null/undefined, nor a function
                             // invokes the function `a` otherwise

5：承诺全部解决

详细：官方介绍

该Promise.allSettled方法接受一个Promises数组，并且仅在所有这些Promises都已解决（已解决或已拒绝）时才进行解析。

即使像race和这样的一些紧密实现，该功能以前也无法在本地all使用。这为JavaScript带来了“只要兑现所有承诺–我不在乎结果”。

6：String.prototype.matchAll

详细：官方介绍

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

让我们看另一个例子。
使用RegExp.exec：

var regex = /t(e)(st(\d?))/g;
var string = 'test1test2test3';

var matches = [];
var match;
while (match = regex.exec(string)) {
  matches.push(match);
}

matches
// [
//   ["test1", "e", "st1", "1", index: 0, input: "test1test2test3"],
//   ["test2", "e", "st2", "2", index: 5, input: "test1test2test3"],
//   ["test3", "e", "st3", "3", index: 10, input: "test1test2test3"]
// ]

使用String.matchAll：

const string = 'test1test2test3';
const regex = /t(e)(st(\d?))/g;

for (const match of string.matchAll(regex)) {
  console.log(match);
}
// ["test1", "e", "st1", "1", index: 0, input: "test1test2test3"]
// ["test2", "e", "st2", "2", index: 5, input: "test1test2test3"]
// ["test3", "e", "st3", "3", index: 10, input: "test1test2test3"]

7：globalThis

详细：官方介绍

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

这是因为它适用window于浏览器，globalNode和selfWeb Worker。如果有更多的运行时，则全局对象也将有所不同。

因此，您将不得不拥有自己的实现来检测运行时，然后使用正确的全局（即直到现在）实现。

globalThis无论您在哪里执行代码，ES2020都会带来始终引用全局对象的用法：

恐怖的全球性通用JavaScript中的这种polyfill

(function (Object) {
  typeof globalThis !== 'object' && (
    this ?
      get() :
      (Object.defineProperty(Object.prototype, '_T_', {
        configurable: true,
        get: get
      }), _T_)
  );
  function get() {
    this.globalThis = this;
    delete Object.prototype._T_;
  }
}(Object));

8：模块命名空间导出

在JavaScript模块中，已经可以使用以下语法：

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

但是，export到目前为止，还没有对称语法：

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

这等效于以下内容：

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

9：定义明确的顺序

介绍：官方文档

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

10：import.meta

详细：官方介绍

该import.meta对象由ECMAScript实现创建并带有null原型。

考虑一个模块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（对于内联脚本）。