【ES】885- ES 2021 新特性提前知，附案例

bb老貓

​

簡介

ES2021 也就是 2021 年的 ECMAScript 版本。ES2021 并沒有像 ES2015 那樣提出很多新特性，但卻合并了一些有用的特性。

本文将會用通俗易懂的代碼示例來介紹 ES2021 的新特性。當然在這之前，你需要了解 JavaScript 的基礎知識。

以下是 ES2021 的新特性概覽：

• ​

  ​String.prototype.replaceAll​

  ​
• ​

  ​Promise.any​

  ​
• ​

  ​WeakRef​

  ​
• 邏輯指派運算符
• 數字分隔符

String.protype.replaceAll

在 ES2021 之前，要替換掉一個字元串中的所有指定字元，我們可以這麼做：

const fruits = '🍎+🍐+🍓+';
const fruitsWithBanana = fruits.replace(/\+/g, '🍌');
console.log(fruitsWithBanana); //🍎🍌🍐🍌🍓🍌
      

ES2021 則提出了 ​

​replaceAll​

​ 方法，并将其挂載在 String 的原型上，可以這麼用：

const fruits = '🍎+🍐+🍓+';
const fruitsWithBanana = fruits.replaceAll('+', '🍌');
console.log(fruitsWithBanana); //🍎🍌🍐🍌🍓🍌
      

Promise.any

​

​Promise.any​

​​ 方法和 ​

​Promise.race​

​​ 類似——隻要給定的疊代中的一個 promise 成功，就采用第一個 promise 的值作為它的傳回值，但與 ​

​Promise.race​

​ 的不同之處在于——它會等到所有 promise 都失敗之後，才傳回失敗的值：

const myFetch = url setTimeout(() fetch(url), Math.floor(Math.random() * 3000));
const promises = [
  myFetch('/endpoint-1'),
  myFetch('/endpoint-2'),
  myFetch('/endpoint-3'),
];
// 使用 .then .catch
Promise.any(promises) // 任何一個 promise 成功。
       .then(console.log) // 比如 ‘3’
       .catch(console.error); // 所有的 promise 都失敗了
// 使用 async-await
try {
  const first = await Promise.any(promises); // 任何一個 promise 成功傳回。
 console.log(first);
}catch (error) { // 所有的 promise 都失敗了
  console.log(error);
}
      

WeakRef

​

​WeakRef​

​ 提案主要包含兩個新功能：

• 可以通過​

  ​WeakRef​

  ​ 類來給某個對象建立一個弱引用
• 可以通過​

  ​FinalizationRegistry​

  ​ 類，在某個對象被垃圾回收之後，執行一些自定義方法

上述兩個新功能可以同時使用，也可以單獨使用，取決于你的需求。

一個 ​

​WeakRef​

​ 對象包含一個對于某個對象的弱引用，被稱為 目标 或 引用。通過弱引用一個對象，可以讓該對象在沒有其它引用的情況下被垃圾回收機制回收。

​

​WeakRef​

​ 主要用來 緩存 和 映射 一些大型對象，當你希望某個對象在不被其它地方引用的情況下及時地被垃圾回收，那麼你就可以使用它。

function toogle(element) {
  const weakElement = new WeakRef(element);
  let intervalId = null;

  function toggle() {
    const el = weakElement.deref();
    if (!el) {
       return clearInterval(intervalId);
   }
   const decoration = weakElement.style.textDecoration;
   const style= decoration === 'none' ? 'underline' : 'none';
   decoration = style;
  }
  intervalId = setInterval(toggle, 1000);
}
const element = document.getElementById("link");
toogle(element);
setTimeout(() element.remove(), 10000);
      

​

​FinalizationRegistry​

​ 接收一個注冊器回調函數，可以利用該注冊器為指定對象注冊一個事件監聽器，當這個對象被垃圾回收之後，會觸發監聽的事件，具體步驟如下。

首先，建立一個注冊器：

const registry = new FinalizationRegistry(heldValue {
  // ....
});
      

接着注冊一個指定對象，同時也可以給注冊器回調傳遞一些參數：

registry.register(theObject, "some value");
      

邏輯指派運算符

譯者注：指派運算符 和 表達式 的差別可以 看這裡。

邏輯指派運算符結合了 邏輯運算符 和 指派表達式。邏輯指派運算符有兩種：

• 或等于（||=）
• 且等于（&&=）

// 或等于
|   a   |   b   | a ||= b | a (運算後) |
| true  | true  |   true  |        true         |
| true  | false |   true  |        true         |
| false | true  |   true  |        true         |
| false | false |   false |        false        |
a ||= b
// 等同于:
a || (a = b);

// 且等于
|   a   |   b   | a &&= b | a (運算後) |
| true  | true  |   true  |        true         |
| true  | false |   false |        false        |
| false | true  |   false |        false        |
| false | false |   false |        false        |
a &&= b
// 等同于:
a && (a = b);
      

數字分隔符

通過這個功能，我們利用 “（_，U+005F）” 分隔符來将數字分組，提高數字的可讀性：

1_000_000_000           // 十億
101_475_938.38          // 億萬

const amount = 12345_00;  // 12,345
const amount = 123_4500;  // 123.45 (保留 4 位小數)
const amount = 1_234_500; // 1,234,500

0.000_001 // 百萬分之一
1e10_000  // 10^10000

const binary_literals = 0b1010_0001_1000_0101;
const hex_literals = 0xA0_B0_C0;
const bigInt_literals = 1_000_000_000_000n;
const octal_literal = 0o1234_5670;
      

總結

JavaScript 是一門動态類型語言，這在某些方面來說對于 web 開發是有益的。自 ES2015 之後，JavaScript 正在快速發展。在這篇文章裡面，我們着重回顧了 ES2021 的一些新特性。

盡管你的項目可能并不會用到這些新特性，但是它們的确為項目開發提供了多種可能性，不是麼？