2021 年需要注意的 4 个 JavaScript 新功能

2021-09-27 14:07:51 浏览数 (5)

自 2015 年以来，JavaScript 每年都会进行语言更新。2021 年也不例外：今年，一些新功能进入了TC39 流程的第 4 阶段，并且已经在 Node.js 和大多数主要的现代浏览器中可用。

在本文中，我们将研究四个最重要的新功能。我们将介绍一种新的字符串方法、一种新的 Promise 方法、对数字可读性的改进以及一种新的赋值简写。

replaceAll()

首先，我们有一个新的字符串原型方法replaceAll，它替换子字符串的每个实例。虽然我们可以使用现有的 replace 方法来做到这一点，但我们不得不求助于正则表达式，例如：

"1990-01-01".replace(/-/g, "/");

replaceAll 可以说更具可读性：

"1990-01-01".replaceAll("-", "/");

使用replaceAll，不需要正则表达式。但是，只要提供了g标志，它仍然可以使用。

"1990-01-01".replaceAll(/-/g, "/");

支持

Chrome：85+

Firefox：77+ 

Safari：13.1+

Node：15.0.0+

Promise.any

今年已经看到了对异步代码处理的进一步改进Promise.any，它接受一组 Promise 并返回第一个解析的。如果每个 Promise 都被拒绝，则会引发错误。

让我们拿四个 Promise 看看会发生什么：

const p1 = new Promise(( resolve , reject ) => setTimeout(reject, 1000, "p1"));
const p2 = new Promise(( resolve , reject ) => setTimeout(resolve, 2000, "p2"));
const p3 = new Promise(( resolve , reject ) => setTimeout(reject, 3000, "p3"));
const p4 = new Promise(( resolve , reject ) => setTimeout(resolve, 4000, "p4"));

​Promise.any​将返回先解决的。在这种情况下，p2。我们可以使用以下代码进行测试：

async function getFirstResolvedPromise() { 
  const result = await Promise.any([p1, p2, p3, p4]); 
  console.log(result);
};

getFirstResolvedPromise(); // "p2"

现在我们可以使用四种方法来处理 Promise 数组：

  • ​Promise.all​ — 返回已解决的 Promise 数组，一旦所有 Promise 都已解决
  • ​Promise.allSettled​ （2020 年新增）— 一旦所有 Promise 都已解决或被拒绝，则返回一个 Promise 数组，无论它们是已解决还是已拒绝
  • ​Promise.race​ — 返回第一个已解决或被拒绝的 Promise
  • ​Promise.any​ — 返回第一个已解决的 Promise

支持

Chrome：85+ 

Firefox：79+

Safari：14+

Node：15.0.0+

逻辑赋值运算符

自 2020 年引入空合并运算符​??​以来，我们现在拥有三个逻辑运算符：

  • ​&&​ — 逻辑与
  • ​||​ — 逻辑或
  • ​??​ — 空合并运算符

这些简写允许我们根据一个值是真还是假——或者，在​这种情况下​——一个值是否为空（null或undefined）来简洁地解析表达式。

现在，我们有了更简洁的使用这些运算符赋值的简写：

  • ​&&=​ — 分配一个变量，如果变量为真
  • ​||=​ — 分配一个变量，如果变量是假的
  • ​??=​ — 分配一个变量，如果该变量为空

在下面的代码中，每组三个语句是等效的：

// 逻辑与赋值
a &&= b; 
a = a && b; 
a = a ? b： a;

// 逻辑或赋值
a ||= b; 
a = a || b;
a = a ? a : b;

// 逻辑空赋值
a ??= b; 
a = a ?? b;
a = a === null || a === undefined?b : a;

在下面的示例中，a当每个表达式运行时，变量将被重新分配一个新值。这是代码：

let a = true；
const b = false, c = null, d = 10;

a &&= b; 
console.log(a); // false
a ||= c; 
console.log(a); // null

a ??= d; 
console.log(a); // 10

这些新的赋值操作符加入数学赋值运算符​+=​，​-=​，​*=​，​/=​，​**=​和​%=​，还有位运算符。

支持

Chrome：85+ 

Firefox：79+

Safari：14+

Node：15.0.0+

数字分隔符

最后，今年广泛采用了一项功能，该功能显着提高了处理大量数字或大量小数位的人员的可读性！

现在，我们可以使用下划线来分隔数字。

const a = 100000000;
const b = 100_000_000;
console.log(a === b); // true

虽然a和b相同，b但更容易识别为 1 亿。在实践中，数字分隔符主要用作千位分隔符，尽管这种用法没有强制执行。数字分隔符可用于浮点数和 BigInt 值（于 2020 年引入）。下面是一些代码来展示这些是如何工作的：

const float = 3.141_592_653_59;
const bigInt = 9_007_199_254_740_992n;

它们也支持十六进制、八进制和二进制数，例如十六进制​0xFF_FF_FF​或​0x_00_00_00​.

请注意，​_​不能在数字的开头或结尾（或首字母之后0）使用。此外，它不能与小数点相邻，并且不能连续使用多个下划线。

支持

Chrome：75+

Firefox ：70+

Safari：13+

Node：12.5.0+


JavaScript

1 人点赞