原文:https://pawelgrzybek.com/whats-new-in-ecmascript-2020/
译文转自:https://zhuanlan.zhihu.com/p/133658121
译者:RichLab 前端 Jothy
ECMAScript 2020 新特性均已敲定。瞧瞧今年都有哪些看头,以及实际的例子吧。

  • [String.prototype.matchAll - 由 Jordan Harband

提出](https://link.zhihu.com/?target=https%3A//pawelgrzybek.com/whats-new-in-ecmascript-2020/%23stringprototypematchall-by-jordan-harband)

  • [import() - 由 Domenic Denicola

提出](https://link.zhihu.com/?target=https%3A//pawelgrzybek.com/whats-new-in-ecmascript-2020/%23import-by-domenic-denicola)

  • [BigInt – 任意精度整数,由 Daniel Ehrenberg

提出](https://link.zhihu.com/?target=https%3A//pawelgrzybek.com/whats-new-in-ecmascript-2020/%23bigint--arbitrary-precision-integers-by-daniel-ehrenberg)

  • [Promise.allSettled - 由 Jason Williams, Robert Pamely 和 Mathias Bynens

提出](https://link.zhihu.com/?target=https%3A//pawelgrzybek.com/whats-new-in-ecmascript-2020/%23promiseallsettled-by-jason-williams-robert-pamely-and--mathias-bynens)

  • [globalThis - 由 Jordan Harband

提出](https://link.zhihu.com/?target=https%3A//pawelgrzybek.com/whats-new-in-ecmascript-2020/%23globalthis-by-jordan-harband)

  • [for-in 机制 - 由 Kevin Gibbons

提出](https://link.zhihu.com/?target=https%3A//pawelgrzybek.com/whats-new-in-ecmascript-2020/%23for-in-mechanics-by-kevin-gibbons)

  • [可选链 - 由 Gabriel Isenberg, Claude Pache, Dustin Savery

提出](https://link.zhihu.com/?target=https%3A//pawelgrzybek.com/whats-new-in-ecmascript-2020/%23optional-chaining-by-gabriel-isenberg-claude-pache-dustin-savery)

  • [空值合并运算符 - 由 Gabriel Isenberg

提出](https://link.zhihu.com/?target=https%3A//pawelgrzybek.com/whats-new-in-ecmascript-2020/%23nullish-coalescing-operator-by-gabriel-isenberg)

  • [import.meta - 由 Domenic Denicola

提出](https://link.zhihu.com/?target=https%3A//pawelgrzybek.com/whats-new-in-ecmascript-2020/%23importmeta-by-domenic-denicola)

  • [export * as ns from

“mod”](https://link.zhihu.com/?target=https%3A//pawelgrzybek.com/whats-new-in-ecmascript-2020/%23export--as-ns-from-mod)

String.prototype.matchAll - 由 Jordan Harband 提出

String.prototypematch() 方法仅返回完整的匹配结果,却不会返回特定正则表达式组(Regex groups)的信息。感谢
Jordan Harband
提出的 String.prototype.matchAll
协议
,它返回了远比
match() 多得多的信息——它返回的迭代器不仅包括精确的匹配结果,还有全部的正则模式捕获结果。你还记得由 Gorkem Yakin 和 Daniel
Ehrenberg 在 ECMAScript 2018
中新增的命名捕获组吗?
matchAll() 方法完美实现了它。我们举个例子说明。

1
2
3
4
5
6
// 译者注:match() 方法
consttext = "From 2019.01.29 to 2019.01.30";
constregexp = /(?<year>\d{4}).(?<month>\d{2}).(?<day>\d{2})/gu;
constresults = text.match(regexp);
console.log(results); // [ '2019.01.29', '2019.01.30' ]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 译者注:matchAll() 方法,可以看到结果的 groups 为命名捕获组
consttext = "From 2019.01.29 to 2019.01.30";
constregexp = /(?<year>\d{4}).(?<month>\d{2}).(?<day>\d{2})/gu;
constresults = Array.from(text.matchAll(regexp));
console.log(results);
// [
// [
// '2019.01.29',
// '2019',
// '01',
// '29',
// index: 5,
// input: 'From 2019.01.29 to 2019.01.30',
// groups: [Object: null prototype] { year: '2019', month: '01', day: '29' }
// ],
// [
// '2019.01.30',
// '2019',
// '01',
// '30',
// index: 19,
// input: 'From 2019.01.29 to 2019.01.30',
// groups: [Object: null prototype] { year: '2019', month: '01', day: '30' }
// ]
// ]

import() - 由 Domenic Denicola 提出

ECMAScript 2015 引入了静态模块,与之相对应的是, 由 Domenic
Denicola

提出的可以按需获取的动态
import
.
该类函数格式(它并非继承自 Function.prototype)返回了一个强大的 promise
函数,使得诸如按需引入、可计算模块名以及脚本内计算均成为可能。

1
2
3
4
5
6
7
8
9
10
11
constmodulePage = 'page.js';
import(modulePage).then((module) => {
module.default();
});

(async()=>{
consthelpersModule='helpers.js';
constmodule=await import(helpersModule)
consttotal=module.sum(2,2);
})();

BigInt – 任意精度整数,由 Daniel Ehrenberg 提出

感谢 Daniel
Ehrenberg

Number.MAX_SAFE_INTEGER 不再是 JavaScript 的限制。BigInt
是一个新的原语
,它可以表示任意精度的整数。你可以通过
BigInt 方法,或是在一个数值后添加 n 后缀,来将一个 number 转换为 bigint 类型。

1
2
3
4
5
6
7
Number.MAX_SAFE_INTEGER
// 9007199254740991
Number.MAX_SAFE_INTEGER + 10 - 10
// 9007199254740990 (译者注:精度丢失)
BigInt(Number.MAX_SAFE_INTEGER) + 10n - 10n
// 9007199254740991n (译者注:计算结果为 bigint 类型)

Promise.allSettled - 由 Jason Williams, Robert Pamely 和 Mathias Bynens 提出

自从 ECMAScript ES2015 支持了仅有的两个 promise 连接符:Promise.all()Promise.race()
以来,我们终于迎来了
[Promise.allSettled()](https://link.zhihu.com/?target=https%3A//github.com/tc39/proposal-promise-allSettled),
感谢 Jason Williams, Robert Pamely 和 Mathias
Bynens
.
它可以用在处理所有的 promise 都 settled 的情况,无论结果是 fulfilled 还是 rejected. 你看 ,无需 catch!

1
2
3
4
5
Promise.allSettled([
fetch("https://api.github.com/users/pawelgrzybek").then( data => data.json() ),
fetch("https://api.github.com/users/danjordan").then( data => data.json() )
]).then( result => console.log(`All profile settled`) );

不久后可能会有个 Promise.any() 方法加入 ECMAScript. 我前段时间在「Promise
连接符解析
」一文中详细介绍过。

globalThis - 由 Jordan Harband 提出

所以在 JavaScript 中,全局的 this 到底是什么?在浏览器中它是 window, 在 worker 中它是 self, 在
Node.js 中它是 global, 在.. 如今这种混乱终于结束了!感谢 Jordan
Harband

为我们带来的[globalThis 关键字](https://zhuanlan.zhihu.com/p/133658121/h%3C/code%3Ettps://github.com/tc39/proposal-global)。

for-in 机制 - 由 Kevin Gibbons 提出

ECMAScript 遗留了 for-in 循环顺序的详尽介绍待填补。Kevin
Gibbons

为此悉心付出,为 for-in
机制定义了一套规则
,感谢他。

可选链 - 由 Gabriel Isenberg, Claude Pache, Dustin Savery 提出

对于对象属性的长链式访问易出错又不易读,感谢 Gabriel
Isenberg
,
Claude Pache
和 Dustin Savery 把这件事简化了。如果你是 TypeScript 用户,这对你来说并不新奇,因为 TypeScript
3.7

版本早已实现了此功能。超爱它的!

1
2
3
4
// 之前
consttitle = data && data.article && data.article.title// 之后
consttitle = data?.article?.title

空值合并运算符 - 由 Gabriel Isenberg 提出

空值合并提议新增了一个处理默认值的便捷运算符。Gabriel
Isenberg

干得太棒了——该特性紧随「可选链」之后。与 || 相比,空值合并运算符 ?? 只会在左边的值严格等于 nullundefined
时起作用。

1
2
3
""||"default value"// default value
""??"default value"// ""

1
2
consttitle=data?.article?.title ?? "What's new in ECMAScript 2020"

import.meta - 由 Domenic Denicola 提出

Domenic Denicola
提出的 import.meta
提议
为当前运行的模块添加了一个特定
host 元数据对象。

1
2
console.log(import.meta.url) // file:///Users/pawelgrzybek/main.js

export * as ns from “mod”

这是对 ES
规范的有力补充
,它允许开发者以新名称导出另一模块的命名空间外部对象。

1
2
export * as ns from "mod"

以上就是 ES 2020 的所有新特性,新规范确定已半月有余,其中既有 TS 早已支持的大家喜闻乐见的可选链,也有让人匪夷所思的空值合并运算符
??,不知你喜欢哪一个呢?快留言告诉我吧~