ES11新特性概览

原创
小哥 2年前 (2023-05-13) 阅读数 100 #大杂烩

目录

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!

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 - 由 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 提出

null值合并提议增加了一个方便的操作符来处理默认值。Gabriel Isenberg 好——这个特性紧接着“可选链”。 || 相比,空值的合并运算符进行合并 ?? 只有左边严格等于价值 null 或 undefined 它工作的时候。

"" || "default value"
// default value
"" ?? "default value"
// ""

const title = data?.article?.title ?? "Whats 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://zhuanlan.zhihu.com/p/133658121
版权声明

所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除