JavaScript的新功能有哪些及怎么使用

本篇內容主要講解“JavaScript的新功能有哪些及怎么使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“JavaScript的新功能有哪些及怎么使用”吧!

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的新功能有哪些及怎么使用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！