自 2015 年以來，JavaScript 每年都會進(jìn)行語言更新。2021 年也不例外：今年，一些新功能進(jìn)入了TC39 流程的第 4 階段，并且已經(jīng)在 Node.js 和大多數(shù)主要的現(xiàn)代瀏覽器中可用。

在本文中，我們將研究四個(gè)最重要的新功能。我們將介紹一種新的字符串方法、一種新的 Promise 方法、對數(shù)字可讀性的改進(jìn)以及一種新的賦值簡寫。

replaceAll()

首先，我們有一個(gè)新的字符串原型方法replaceAll，它替換子字符串的每個(gè)實(shí)例。雖然我們可以使用現(xiàn)有的 replace 方法來做到這一點(diǎn)，但我們不得不求助于正則表達(dá)式，例如：

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

replaceAll 可以說更具可讀性：

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

使用replaceAll，不需要正則表達(dá)式。但是，只要提供了g標(biāo)志，它仍然可以使用。

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

支持

Chrome：85+

Firefox：77+ 

Safari：13.1+

Node：15.0.0+

Promise.any

今年已經(jīng)看到了對異步代碼處理的進(jìn)一步改進(jìn)Promise.any，它接受一組 Promise 并返回第一個(gè)解析的。如果每個(gè) Promise 都被拒絕，則會引發(fā)錯(cuò)誤。

讓我們拿四個(gè) Promise 看看會發(fā)生什么：

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。我們可以使用以下代碼進(jìn)行測試：

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

getFirstResolvedPromise(); // "p2"

現(xiàn)在我們可以使用四種方法來處理 Promise 數(shù)組：

• ?Promise.all? — 返回已解決的 Promise 數(shù)組，一旦所有 Promise 都已解決
• ?Promise.allSettled? （2020 年新增）— 一旦所有 Promise 都已解決或被拒絕，則返回一個(gè) Promise 數(shù)組，無論它們是已解決還是已拒絕
• ?Promise.race? — 返回第一個(gè)已解決或被拒絕的 Promise
• ?Promise.any? — 返回第一個(gè)已解決的 Promise

支持

Chrome：85+ 

Firefox：79+

Safari：14+

Node：15.0.0+

邏輯賦值運(yùn)算符

自 2020 年引入空合并運(yùn)算符????以來，我們現(xiàn)在擁有三個(gè)邏輯運(yùn)算符：

• ?&&? — 邏輯與
• ?||? — 邏輯或
• ???? — 空合并運(yùn)算符

這些簡寫允許我們根據(jù)一個(gè)值是真還是假——或者，在?這種情況下?——一個(gè)值是否為空（null或undefined）來簡潔地解析表達(dá)式。

現(xiàn)在，我們有了更簡潔的使用這些運(yùn)算符賦值的簡寫：

• ?&&=? — 分配一個(gè)變量，如果變量為真
• ?||=? — 分配一個(gè)變量，如果變量是假的
• ???=? — 分配一個(gè)變量，如果該變量為空

在下面的代碼中，每組三個(gè)語句是等效的：

// 邏輯與賦值
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當(dāng)每個(gè)表達(dá)式運(yùn)行時(shí)，變量將被重新分配一個(gè)新值。這是代碼：

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

這些新的賦值操作符加入數(shù)學(xué)賦值運(yùn)算符?+=?，?-=?，?*=?，?/=?，?**=?和?%=?，還有位運(yùn)算符。

支持

Chrome：85+ 

Firefox：79+

Safari：14+

Node：15.0.0+

數(shù)字分隔符

最后，今年廣泛采用了一項(xiàng)功能，該功能顯著提高了處理大量數(shù)字或大量小數(shù)位的人員的可讀性！

現(xiàn)在，我們可以使用下劃線來分隔數(shù)字。

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

雖然a和b相同，b但更容易識別為 1 億。在實(shí)踐中，數(shù)字分隔符主要用作千位分隔符，盡管這種用法沒有強(qiáng)制執(zhí)行。數(shù)字分隔符可用于浮點(diǎn)數(shù)和 BigInt 值（于 2020 年引入）。下面是一些代碼來展示這些是如何工作的：

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

它們也支持十六進(jìn)制、八進(jìn)制和二進(jìn)制數(shù)，例如十六進(jìn)制?0xFF_FF_FF?或?0x_00_00_00?.

請注意，?_?不能在數(shù)字的開頭或結(jié)尾（或首字母之后0）使用。此外，它不能與小數(shù)點(diǎn)相鄰，并且不能連續(xù)使用多個(gè)下劃線。

支持

Chrome：75+

Firefox ：70+

Safari：13+

Node：12.5.0+