ES11新特性概览,包含了特别好用的【空值合并运算符 ?? 、以及可选链 ?. 】

目录

  • 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 

String.prototypematch() 方法仅返回完整的匹配结果,却不会返回特定正则表达式组(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() 

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 让 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 

自从 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`));

globalThis 

所以在 JavaScript 中,全局的 this 到底是什么?在浏览器中它是 window, 在 worker 中它是 self, 在 Node.js 中它是 global, 在… 如今这种混乱终于结束了!感谢 Jordan Harband 为我们带来的globalThis关键字。


for-in 机制 

ECMAScript 遗留了 for-in 循环顺序的详尽介绍待填补。Kevin Gibbons 为此悉心付出,为 for-in 机制定义了一套规则,感谢他。


可选链 

对于对象属性的长链式访问易出错又不易读,感谢 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 干得太棒了——该特性紧随「可选链」之后。与 || 相比,空值合并运算符 ?? 只会在左边的值严格等于 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"
// file:///Users/pawelgrzybek/main.js
原文地址:https://www.cnblogs.com/chenhuichao/p/14338027.html