盘点 ES12 中的一些新特性！

2022-06-15 15:22:12 浏览数 (1)

作者：KUMAR HARSH 译者：前端小智 来源：blog

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

今天主要介绍一下 ECMAScript 2021（ES12）的一部分的 JS 功能。

  1. 逻辑赋值操作符
  2. 数字分隔符(1_000)
  3. Promise.any 与 AggregateError
  4. String.prototype.replaceAll
  5. WeakRefs 与 FinalizationRegistry 对象

逻辑赋值操作符

逻辑赋值操作符将逻辑操作(&&、||或??)与赋值表达式组合在一起。

代码语言：javascript复制
x ||= y;
x || (x = y);

x &&= y;
x && (x = y);


x ??= y;
x ?? (x = y);

带有&&的逻辑赋值操作符

代码语言：javascript复制
let x = 1;
let y = 2;
x &&= y;
console.log(x); // 2

x &&= y 等价于 x && (x = y)。

或者等价于

代码语言：javascript复制
if(x) {
  x = y
}

因为x是一个真值，所以它被赋值为y，即2。

带有||的逻辑赋值操作符

代码语言：javascript复制
let x = 1;
let y = 2;
x ||= y;
console.log(x); // 1

x ||= y 等价于 x || (x = y)。

这意味着赋值操作只在x为虚值时才会发生。在我们的代码中，x包含1，这是一个真值，因此，赋值不会发生。这就是我们的代码在控制台中打印1的原因。

简单地说

代码语言：javascript复制
const updateID = user => {

  // 我们可以这样做
  if (!user.id) user.id = 1

  // 或者这样
  user.id = user.id || 1

  // 或者这样
  user.id ||= 1
}

带有??的逻辑赋值操作符

?? 在 JS 中专门检查一个值是否为 null 或undefined。

代码语言：javascript复制
let a;
let b = a ?? 5;
console.log(b); // 5

在第二行，let b = a ?? 5，如果a的值为null 或undefined，??求值并赋值给b。

现在考虑?? 和==。

代码语言：javascript复制
let x;
let y = 2;
x ??= y;
console.log(x); // 2

x ??= y 等价于 x = x ?? (x=y)

数字分隔符

它允许我们在数字之间添加下划线(_)字符，使数字更具可读性。

例如

代码语言：javascript复制
const num = 100000000

被0的数量所迷惑

分隔符解决这个问题：

代码语言：javascript复制
const num = 100_000_000

分隔符可以用于数字的整数部分和小数部分。

代码语言：javascript复制
const num = 1_000_000.123_456

分隔符不仅可以用在整数和浮点数中，也可以用在二进制、十六进制、八进制字面量中。

分隔符也适用于BigInt数字。

代码语言：javascript复制
const trillion = 1000_000_000_000n;
console.log(trillion.toString()); // "1000000000000"

分隔符只是为了可读性。所以，它可以放在数字内的任何地方。

代码语言：javascript复制
const amount = 178_00; // 00 after _ for cents.

Promise.any 与 AggregateError

Promise.any()返回第一个完成的promise的值。如果所有传递给Promise.any()作为参数(作为数组)的Promise都被拒绝，则抛出一个"AggregateError"异常。

AggregateError`是一个新的Error子类，它对单个错误进行分组。每个AggregateError实例都包含一个对异常数组的引用。

考虑下面例子：

下面我们有3个 promise，它们是随机的。

代码语言：javascript复制
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("A"), Math.floor(Math.random() * 1000));
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("B"), Math.floor(Math.random() * 1000));
});
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("C"), Math.floor(Math.random() * 1000));
});

在p1, p2和p3中，最先的完成的的由Promise.any()执行。

代码语言：javascript复制
(async function() {
  const result = await Promise.any([p1, p2, p3]);
  console.log(result); // 打印 "A", "B" 或者 "C"
})();

如果所有的 promise 都失败了?在这种情况下，Promise.any()抛出AggregateError异常。 我们需要捕获它：

代码语言：javascript复制
const p = new Promise((resolve, reject) => reject());

try {
  (async function() {
    const result = await Promise.any([p]);
    console.log(result);
  })();
} catch(error) {
  console.log(error.errors);

为了演示的目的，在Promise.any()中我们只能它一个 promise。而这个 promise 是失败的。上述代码在控制台中记录了以下错误。

String.prototype.replaceAll 方法

String.prototype.replaceAll()允许我们用一个不同的值替换字符串中的所有子串实例，而不需要使用全局正则表达式。

目前，JavaScript字符串有一个replace()方法。它可以用来用另一个字符串替换一个字符串。

代码语言：javascript复制
const str = "Backbencher sits at the Back";
const newStr = str.replace("Back", "Front");
console.log(newStr); // "Frontbencher sits at the Back"

如果输入模式是一个字符串，replace()方法只替换第一次出现的内容。这就是为什么在代码中，"Back"的第二次出现没有被替换。

只有将模式作为正则表达式提供时，才能进行完全替换。

代码语言：javascript复制
const str = "Backbencher sits at the Back";
const newStr = str.replace(/Back/g, "Front");
console.log(newStr); // "Frontbencher sits at the Front"

我们来看另一个例子

代码语言：javascript复制
const strWithPlus = '  '
const strWithComma = strWithPlus.replace(/ /g, ', ')
// , ,

这种方法需要使用正则表达式。然而，复杂的正则表达式往往是错误的来源。(没有人喜欢RegEx

缓存 java javascript 正则表达式 编程算法

0 人点赞