11

ES2020 新特性出炉了，你最喜欢哪一个呢？

 3 years ago
source link: https://zhuanlan.zhihu.com/p/133658121
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

ES2020 新特性出炉了，你最喜欢哪一个呢？

蚂蚁金服 前端工程师

译者：RichLab 前端 Jothy

原文作者：PAWEL GRZYBEK

写在最前：欢迎来到「RichLab」技术专栏，我们将与大家分享前端各领域的高质量技术文章，包括但不限于移动端、小程序、互动技术/数据可视化、Node.js 全栈/中后台、基础架构、个人思考，不限于原创与翻译。

ECMAScript 2020 新特性均已敲定。我曾在 2016, 2017, 2018 及 2019 年做过类似介绍，这次也请跟随我一起，瞧瞧今年都有哪些看头，以及实际的例子吧。

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 = /(?<year>\d{4}).(?<month>\d{2}).(?<day>\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 = /(?<year>\d{4}).(?<month>\d{2}).(?<day>\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!

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 关键字。

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 早已支持的大家喜闻乐见的可选链，也有让人匪夷所思的空值合并运算符 ??，不知你喜欢哪一个呢？快留言告诉我吧～

感谢你看到最后～

我们是蚂蚁金服 RichLab 前端团队，目前正在急招 P6-P7 的前端工程师

我们的主要业务是 花呗 和 借呗，除了业务好待遇高，技术也是百花齐放

有负责蚂蚁互动小组的 Web 3D 引擎 & 工作流，走在 Web 3D 互动前沿：

有在 D2 上大放异彩的浏览器实时构建技术，完全基于浏览器技术实现的预览和调试解决方案：

再挑几个颇具代表性的技术产品给你看看：

除了上述这些技术产品之外，智能化业务体验平台、Serverless（SFF）、工程化等技术领域，甚至 旅行、音乐、Vlog 等生活娱乐领域也都是我们团队的专长～

RichLab 前端团队目前已有近 50 人，分布在杭州、北京、重庆

如果你对以上技术感兴趣，或者想要和我们一起实现普惠金融

欢迎私信联系我，或者投递简历到 [email protected]


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK