自 2015 年以來，JavaScript 每年都會進行語言更新。2021 年也不例外：今年，一些新功能進入了TC39 流程的第 4 階段，并且已經(jīng)在 Node.js 和大多數(shù)主要的現(xiàn)代瀏覽器中可用。
在本文中，我們將研究四個最重要的新功能。我們將介紹一種新的字符串方法、一種新的 Promise 方法、對數(shù)字可讀性的改進以及一種新的賦值簡寫。
replaceAll()
首先，我們有一個新的字符串原型方法replaceAll，它替換子字符串的每個實例。雖然我們可以使用現(xiàn)有的 replace 方法來做到這一點，但我們不得不求助于正則表達式，例如：
"1990-01-01".replace(/-/g, "/");replaceAll 可以說更具可讀性：
"1990-01-01".replaceAll("-", "/");使用replaceAll，不需要正則表達式。但是，只要提供了g標(biāo)志，它仍然可以使用。
"1990-01-01".replaceAll(/-/g, "/");支持
Chrome：85+
Firefox：77+
Safari：13.1+
Node：15.0.0+
Promise.any
今年已經(jīng)看到了對異步代碼處理的進一步改進Promise.any，它接受一組 Promise 并返回第一個解析的。如果每個 Promise 都被拒絕，則會引發(fā)錯誤。
讓我們拿四個 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。我們可以使用以下代碼進行測試：
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 都已解決或被拒絕，則返回一個 Promise 數(shù)組，無論它們是已解決還是已拒絕 - ?
Promise.race? — 返回第一個已解決或被拒絕的 Promise - ?
Promise.any? — 返回第一個已解決的 Promise
支持
Chrome：85+
Firefox：79+
Safari：14+
Node：15.0.0+
邏輯賦值運算符
自 2020 年引入空合并運算符????以來，我們現(xiàn)在擁有三個邏輯運算符：
- ?
&&? — 邏輯與 - ?
||? — 邏輯或 - ?
??? — 空合并運算符
這些簡寫允許我們根據(jù)一個值是真還是假——或者，在?這種情況下?——一個值是否為空（null或undefined）來簡潔地解析表達式。
現(xiàn)在，我們有了更簡潔的使用這些運算符賦值的簡寫：
- ?
&&=? — 分配一個變量，如果變量為真 - ?
||=? — 分配一個變量，如果變量是假的 - ?
??=? — 分配一個變量，如果該變量為空
在下面的代碼中，每組三個語句是等效的：
// 邏輯與賦值
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)每個表達式運行時，變量將被重新分配一個新值。這是代碼：
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é)賦值運算符?+=?，?-=?，?*=?，?/=?，?**=?和?%=?，還有位運算符。
支持
Chrome：85+
Firefox：79+
Safari：14+
Node：15.0.0+
數(shù)字分隔符
最后，今年廣泛采用了一項功能，該功能顯著提高了處理大量數(shù)字或大量小數(shù)位的人員的可讀性！
現(xiàn)在，我們可以使用下劃線來分隔數(shù)字。
const a = 100000000;
const b = 100_000_000;
console.log(a === b); // true雖然a和b相同，b但更容易識別為 1 億。在實踐中，數(shù)字分隔符主要用作千位分隔符，盡管這種用法沒有強制執(zhí)行。數(shù)字分隔符可用于浮點數(shù)和 BigInt 值（于 2020 年引入）。下面是一些代碼來展示這些是如何工作的：
const float = 3.141_592_653_59;
const bigInt = 9_007_199_254_740_992n;它們也支持十六進制、八進制和二進制數(shù)，例如十六進制?0xFF_FF_FF?或?0x_00_00_00?.
請注意，?_?不能在數(shù)字的開頭或結(jié)尾（或首字母之后0）使用。此外，它不能與小數(shù)點相鄰，并且不能連續(xù)使用多個下劃線。
支持
Chrome：75+
Firefox ：70+
Safari：13+
Node：12.5.0+
