好消息– 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(它不能支持这种大小的数字)。
运营商:
您可以使用+
,*
,-
,**
和%
与BigInt
S,就像对待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
于浏览器,global
Node和self
Web 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(对于内联脚本)。