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 的一些新特性。

儘管你的項目可能並不會用到這些新特性，可是它們的確爲項目開發提供了多種可能性，不是麼？

相關文章

1. 13個JavaScript單行代碼，讓你看起來更專業
2. 由淺入深，66條JavaScript面試知識點
3. 20個經常使用的JavaScript簡寫技巧