[[378137]]

簡介

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

本文將會(huì)用通俗易懂的代碼示例來介紹 ES2021 的新特性。當(dāng)然在這之前，你需要了解 JavaScript 的基礎(chǔ)知識(shí)。

以下是 ES2021 的新特性概覽：

•  String.prototype.replaceAll
•  Promise.any
•  WeakRef
•  邏輯賦值運(yùn)算符
•  數(shù)字分隔符

String.protype.replaceAll

在 ES2021 之前，要替換掉一個(gè)字符串中的所有指定字符，我們可以這么做： 

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

ES2021 則提出了 replaceAll 方法，并將其掛載在 String 的原型上，可以這么用： 

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

Promise.any

Promise.any 方法和 Promise.race 類似——只要給定的迭代中的一個(gè) promise 成功，就采用第一個(gè) promise 的值作為它的返回值，但與 Promise.race 的不同之處在于——它會(huì)等到所有 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) // 任何一個(gè) promise 成功。  
       .then(console.log) // 比如 ‘3’  
       .catch(console.error); // 所有的 promise 都失敗了  
// 使用 async-await  
try {  
  const first = await Promise.any(promises); // 任何一個(gè) promise 成功返回。  
 console.log(first);  
}catch (error) { // 所有的 promise 都失敗了  
  console.log(error);  
} 

WeakRef

WeakRef 提案主要包含兩個(gè)新功能：

•  可以通過 WeakRef 類來給某個(gè)對(duì)象創(chuàng)建一個(gè)弱引用
•  可以通過 FinalizationRegistry 類，在某個(gè)對(duì)象被垃圾回收之后，執(zhí)行一些自定義方法

上述兩個(gè)新功能可以同時(shí)使用，也可以單獨(dú)使用，取決于你的需求。

一個(gè) WeakRef 對(duì)象包含一個(gè)對(duì)于某個(gè)對(duì)象的弱引用，被稱為 目標(biāo) 或 引用。通過弱引用一個(gè)對(duì)象，可以讓該對(duì)象在沒有其它引用的情況下被垃圾回收機(jī)制回收。

WeakRef 主要用來 緩存 和 映射 一些大型對(duì)象，當(dāng)你希望某個(gè)對(duì)象在不被其它地方引用的情況下及時(shí)地被垃圾回收，那么你就可以使用它。 

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 接收一個(gè)注冊(cè)器回調(diào)函數(shù)，可以利用該注冊(cè)器為指定對(duì)象注冊(cè)一個(gè)事件監(jiān)聽器，當(dāng)這個(gè)對(duì)象被垃圾回收之后，會(huì)觸發(fā)監(jiān)聽的事件，具體步驟如下。

首先，創(chuàng)建一個(gè)注冊(cè)器： 

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

接著注冊(cè)一個(gè)指定對(duì)象，同時(shí)也可以給注冊(cè)器回調(diào)傳遞一些參數(shù)： 

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

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

譯者注：賦值運(yùn)算符 和 表達(dá)式 的區(qū)別可以 看這里。

邏輯賦值運(yùn)算符結(jié)合了 邏輯運(yùn)算符 和 賦值表達(dá)式。邏輯賦值運(yùn)算符有兩種：

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

// 或等于  
|   a   |   b   | a ||= b | a (運(yùn)算后) |  
| 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 (運(yùn)算后) |  
| true  | true  |   true  |        true         |  
| true  | false |   false |        false        |  
| false | true  |   false |        false        |  
| false | false |   false |        false        |  
a &&= b  
// 等同于:  
a && (a = b); 

數(shù)字分隔符

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

1_000_000_000           // 十億  
101_475_938.38          // 億萬  
const amount = 12345_00;  // 12,345  
const amount = 123_4500;  // 123.45 (保留 4 位小數(shù))  
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; 

總結(jié)

JavaScript 是一門動(dòng)態(tài)類型語言，這在某些方面來說對(duì)于 web 開發(fā)是有益的。自 ES2015 之后，JavaScript 正在快速發(fā)展。在這篇文章里面，我們著重回顧了 ES2021 的一些新特性。

盡管你的項(xiàng)目可能并不會(huì)用到這些新特性，但是它們的確為項(xiàng)目開發(fā)提供了多種可能性，不是么？