【第 240 期】ES2020 新特性出炉了，你最喜欢哪一个呢？
译者：RichLab 前端 Jothy
原文作者：PAWEL GRZYBEK原文：https:
原文：https://zhuanlan.zhihu.com/p/133658121
❝写在最前：欢迎来到「RichLab」技术专栏，我们将与大家分享前端各领域的高质量技术文章，包括但不限于移动端、小程序、互动技术/数据可视化、Node.js 全栈/中后台、基础架构、个人思考，不限于原创与翻译。
❞
ECMAScript 2020 新特性均已敲定，我们来瞧瞧今年都有哪些看头，以及实际的例子吧。
String.prototype.matchAll - 由 Jordan Harband 提出
import() - 由 Domenic Denicola 提出
BigInt – 任意精度整数，由 Daniel Ehrenberg 提出
Promise.allSettled - 由 Jason Williams, Robert Pamely 和 Mathias Bynens 提出
globalThis - 由 Jordan Harband 提出
for-in 机制 - 由 Kevin Gibbons 提出
可选链 - 由 Gabriel Isenberg, Claude Pache, Dustin Savery 提出
空值合并运算符 - 由 Gabriel Isenberg 提出
import.meta - 由 Domenic Denicola 提出
export * as ns from “mod”
String.prototype.matchAll - 由 Jordan Harband 提出
String.prototype 的 match() 方法仅返回完整的匹配结果，却不会返回特定正则表达式组（Regex groups）的信息。感谢 Jordan Harband 提出的 String.prototype.matchAll 协议，它返回了远比 match() 多得多的信息——它返回的迭代器不仅包括精确的匹配结果，还有全部的正则模式捕获结果。你还记得由 「Gorkem Yakin」 和 「Daniel Ehrenberg」 在 ECMAScript 2018 中新增的命名捕获组吗？matchAll() 方法完美实现了它。我们举个例子说明。
// 译者注：match() 方法
const text = "From 2019.01.29 to 2019.01.30";
const regexp = /(?\d{4}).(?\d{2}).(?\d{2})/gu;
const results = text.match(regexp);
console.log(results);
// [ '2019.01.29', '2019.01.30' ]
// 译者注：matchAll() 方法，可以看到结果的 groups 为命名捕获组
const text = "From 2019.01.29 to 2019.01.30";
const regexp = /(?\d{4}).(?\d{2}).(?\d{2})/gu;
const results = 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 函数，使得诸如按需引入、可计算模块名以及脚本内计算均成为可能。
const modulePage = 'page.js';
import(modulePage)
.then((module) => {
module.default();
});
(async () => {
const helpersModule = 'helpers.js';
const module = await import(helpersModule)
const total = module.sum(2, 2);
})();
BigInt – 任意精度整数，由 Daniel Ehrenberg 提出
感谢 「Daniel Ehrenberg」 让 Number.MAX_SAFE_INTEGER 不再是 JavaScript 的限制。BigInt 是一个新的原语，它可以表示任意精度的整数。你可以通过 BigInt 方法，或是在一个数值后添加 n 后缀，来将一个 number 转换为 bigint 类型。
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(), 感谢 Jason Williams, Robert Pamely 和 Mathias Bynens. 它可以用在处理所有的 promise 都 settled 的情况，无论结果是 fulfilled 还是 rejected 你看 ，无需 catch!
globalThis - 由 Jordan Harband 提出
所以在 JavaScript 中，全局的 this 到底是什么？在浏览器中它是 window, 在 worker 中它是 self, 在 Node.js 中它是 global, 在.. 如今这种混乱终于结束了！感谢 Jordan Harband 为我们带来的globalThis 关键字。
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 版本早已实现了此功能。超爱它的！
// 之前
const title = data && data.article && data.article.title
// 之后
const title = data?.article?.title
空值合并运算符 - 由 Gabriel Isenberg 提出
空值合并提议新增了一个处理默认值的便捷运算符。Gabriel Isenberg 干得太棒了——该特性紧随「可选链」之后。与 || 相比，空值合并运算符 ?? 只会在左边的值严格等于 null 或 undefined 时起作用。
"" || "default value"
// default value
"" ?? "default value"
// ""
const title = data?.article?.title ?? "What's new in ECMAScript 2020"
import.meta - 由 Domenic Denicola 提出
Domenic Denicola 提出的 import.meta 提议为当前运行的模块添加了一个特定 host 元数据对象。
console.log(import.meta.url)
// file:///Users/pawelgrzybek/main.js
export * as ns from “mod”
这是对 ES 规范的有力补充，它允许开发者以新名称导出另一模块的命名空间外部对象。
export * as ns from "mod"
以上就是 ES 2020 的所有新特性，新规范确定已半月有余，其中既有 TS 早已支持的大家喜闻乐见的可选链，也有让人匪夷所思的空值合并运算符 ??，不知你喜欢哪一个呢？快留言告诉我吧～
相关热门推荐
【第 239 期】JavaScript重构技巧 — 对象和值【第 238 期】是什么尤大选择放弃Webpack？——vite 原理解析
【第 237 期】JavaScript重构技巧 — 数组，类名和条件
「前端编程实战 37」HTML+CSS3实现鼠标移动线条特效
【第 236 期】JavaScript 对象可以做到的三件事
【第 235 期】这些 CSS 伪类，你可能还不知道，可以用起来了！
但最近微信改版，打乱了文章的推送顺序，导致有人可能没法及时收到我的更新。为避免错过我的独家文章，只需要简单三步：1、置顶星标大迁世界；2、阅读后给文章点下“在看”；3、经常来看看，我就会出现在你的常读列表里。