本文轉載自微信公眾號“前端先鋒”（jingchengyideng）。

簡述

ES2021(ES12)將于 2021 年中發(fā)布。在本文中，你將將會了解五個最有趣的功能：String.prototype.replaceAll()，數(shù)字分隔符，邏輯賦值運算符，Promise.any()，WeakRef 和Finalizers。

本文所描述的五個功能目前都處于第 4 階段。這意味著它們已經(jīng)完成，并將要在 JavaScript 引擎中實現(xiàn)了。這意味著你不會浪費時間去學習一些可能永遠也不會出現(xiàn)的東西。

這些功能不久將會發(fā)布。如果有興趣，可以到官方 Ecma TC39 GitHub (https://github.com/tc39/proposals) 去了解有關其他提案的更多信息。這個 Github 庫跟蹤了所有提案以及其當前所處的階段。

String.prototype.replaceAll()

先從一個小功能 replaceAll() 開始，這是對 JavaScript 語言的一個補充。當你要替換字符串中多次出現(xiàn)的匹配模式時，目前可以用 replace() 方法，但問題是它只能替換第一次出現(xiàn)的那個。

這并不意味著 replace() 不能替換所有出現(xiàn)的匹配模式，只不過你必須用正則表達式才行。如果你可以接受那就沒事兒了。不過對于很多 js 程序員來說，正則表達式并不是他們的菜(實際上是懶得學!)。

如果你就是這樣的 js 程序員，肯定喜歡新的 replaceAll() 方法。它的工作方式與 replace() 類似，區(qū)別在于 replaceAll() 可以不用正則表達式就能替換所有出現(xiàn)的模式。

replaceAll() 也能接受正則表達式，你完全可以用它代替 replace() 。

// 聲明一個字符串 
let str = 'There are those who like cats, there those who like watching cats and there are those who have cats.' 
 
// 用 dogs 替換所有的“cats”： 
strstr = str.replaceAll('cats', 'dogs') 
console.log(str) 
// Output: 
// 'There are those who like dogs, there those who like watching dogs and there are those who have dogs.' 
 
// 用 replace() 的寫法： 
strstr = str.replace(/cats/g, 'dogs') 
console.log(str) 
// Output: 
// 'There are those who like dogs, there those who like watching dogs and there are those have dogs.' 

數(shù)字分隔符

這是 JavaScript ES2021的一個非常小的功能，可以讓你在處理大量數(shù)字時更好過一點。數(shù)字分隔符提供了一種能使大數(shù)字更易于閱讀和使用的簡單方法。語法也很簡單：一個下劃線 _。

// 不帶數(shù)字分隔符的 Number  
const num = 3685134689 
 
// 帶數(shù)字分隔符的 Number  
const num = 3_685_134_689 

不過數(shù)字分隔符只是在視覺上提供一些幫助。在使用時不會對數(shù)值本身產(chǎn)生任何影響。

// 帶數(shù)字分隔符的 Number  
const num = 3_685_134_689 
 
// 輸出: 
console.log(num) 
// Output: 
// 3685134689 

邏輯賦值運算符

JavaScript 允許在布爾上下文中使用邏輯運算符。例如在 if ... else語句和三目運算符中檢測是 true 還是 false。ES2021 的邏輯賦值運算符將邏輯運算符與賦值表達式(=)組合在了一起。

在 JavaScript 中已經(jīng)有了一些賦值運算符，例如：加法賦值(+=)，減法賦值(-=)，乘法賦值(*=)等。在 ES2021 中又增加了對邏輯運算符 &&，|| 和 ??([空值合并)的支持。

////////////////// 
// 邏輯與賦值運算符 (&&=) 
////////////////// 
x &&= y 
 
// 以上代碼相當于: 
xx = x && d 
// 或者: 
if (x) { 
  x = y 
} 
 
// 例1: 
let x = 3  
let y = 0  
x &&= y 
console.log(x) 
// Output: 
// 0 
 
// 例 2: 
let x = 0  
let y = 9  
x &&= y 
console.log(x) 
// Output: 
// 0 
 
// 例 3: 
let x = 3 // Truthy value. 
let y = 15 // Truthy value. 
x &&= y 
console.log(x) 
// Output: 
// 15 
 
 
////////////////// 
// 邏輯或賦值運算符 (||=): 
x ||= y 
 
// 相當于: 
xx = x || y 
// 或者: 
if (!x) { 
  x = y 
} 
 
// 例 1: 
let x = 3 
let y = 0 
x ||= y 
 
console.log(x) 
// Output: 
// 3 
 
// 例 2: 
let x = 0  
let y = 9  
x ||= y 
 
console.log(x) 
// Output: 
// 9 
 
// 例 3: 
let x = 3  
let y = 15 
x ||= y 
 
console.log(x) 
// Output: 
// 3 
 
 
///////////////////////// 
// 空值合并賦值運算符 (??=): 
///////////////////////// 
x ??= y 
 
// 相當于: 
xx = x ?? y 
// 或者: 
if (x == null || x == undefined) { 
    x = y 
} 
 
// 例 1: 
let x = null  
let y = 'Hello'  
x ??= y 
console.log(x) 
// Output: 
// 'Hello' 
 
// 例 2: 
let x = 'Jay'  
let y = 'Hello'  
x ??= y 
console.log(x) 
// Output: 
// 'Jay' 
 
// 例 3: 
let x = 'Jay' 
let y = null  
x ??= y 
console.log(x) 
// Output: 
// 'Jay' 
 
// 例 4: 
let x = undefined  
let y = 'Jock'  
x ??= y 
 
console.log(x) 
// Output: 
// 'Jock' 

看一下上面的例子。首先是 x && = y。僅當 x 為真時，才將 y 賦值給 x。其次是 x || = y，僅當 x 為假時，才將 y 賦值給 x。如果 x 是真，而 y 是假，則不會進行賦值。

如果 x 和 y 都是假，也會發(fā)生同樣的情況。最后是 x ?? = y。僅當 x 為 null 或 undefined 時，才將 y 分配給 x。如果 x 既不是 null 也不是 undefined 則不會進行賦值，如果 y 為 null 或 undefined 也一樣。

Promise.any()

在 ES6 中引入了 Promise.race() 和 Promise.all() 方法，ES2020 加入了 Promise.allSettled()。ES2021 又增加了一個使 Promise 處理更加容易的方法：Promise.any() 。

Promise.any() 方法接受多個 promise，并在完成其中任何一個的情況下返回 promise。其返回的是 Promise.any() 完成的第一個 promise。如果所有 promise 均被拒絕，則 Promise.any() 將返回 AggregateError，其中包含拒絕的原因。

// 例 1: 全部被完成: 
// 創(chuàng)建 promises: 
const promise1 = new Promise((resolve, reject) => { 
  setTimeout(() => { 
    resolve('promise1 is resolved.') 
  }, Math.floor(Math.random() * 1000)) 
}) 
 
const promise2 = new Promise((resolve, reject) => { 
  setTimeout(() => { 
    resolve('promise2 is resolved.') 
  }, Math.floor(Math.random() * 1000)) 
}) 
 
const promise3 = new Promise((resolve, reject) => { 
  setTimeout(() => { 
    resolve('promise3 is resolved.') 
  }, Math.floor(Math.random() * 1000)) 
}) 
 
;(async function() { 
  // Await the result of Promise.any(): 
  const result = await Promise.any([promise1, promise2, promise3]) 
  console.log(result) 
  // Output: 
  // 'promise1 is resolved.', 'promise2 is resolved.' or 'promise3 is resolved.' 
})() 
 
 
// 例 2: 部分完成: 
const promise1 = new Promise((resolve, reject) => { 
  setTimeout(() => { 
    resolve('promise1 is resolved.') 
  }, Math.floor(Math.random() * 1000)) 
}) 
 
const promise2 = new Promise((resolve, reject) => { 
  setTimeout(() => { 
    reject('promise2 was rejected.') 
  }, Math.floor(Math.random() * 1000)) 
}) 
 
;(async function() { 
  // Await the result of Promise.any(): 
  const result = await Promise.any([promise1, promise2]) 
  console.log(result) 
  // Output: 
  // 'promise1 is resolved.' 
})() 
 
 
// 例 3: 均被拒絕: 
const promise1 = new Promise((resolve, reject) => { 
  setTimeout(() => { 
    reject('promise1 was rejected.') 
  }, Math.floor(Math.random() * 1000)) 
}) 
 
const promise2 = new Promise((resolve, reject) => { 
  setTimeout(() => { 
    reject('promise2 was rejected.') 
  }, Math.floor(Math.random() * 1000)) 
}) 
 
;(async function() { 
  // Use try...catch to catch the AggregateError: 
  try { 
    // Await the result of Promise.any(): 
    const result = await Promise.any([promise1, promise2]) 
  } 
 
  catch (err) { 
    console.log(err.errors) 
    // Output: 
    // [ 'promise1 was rejected.', 'promise2 was rejected.' ] 
  } 
})() 

弱引用：WeakRef

最后一個搶眼的功能是 WeakRefs。在 JavaScript 中，當你創(chuàng)建了一個創(chuàng)建對象的引用時，這個引用可以防止對象被 gc 回收，也就是說 JavaScript 無法刪除對象并釋放其內(nèi)存。只要對該對象的引用一直存在，就可以使這個對象永遠存在。

ES2021 了新的類 WeakRefs。允許創(chuàng)建對象的弱引用。這樣就能夠在跟蹤現(xiàn)有對象時不會阻止對其進行垃圾回收。對于緩存和對象映射非常有用。

必須用 new關鍵字創(chuàng)建新的 WeakRef ，并把某些對象作為參數(shù)放入括號中。當你想讀取引用(被引用的對象)時，可以通過在弱引用上調(diào)用 deref() 來實現(xiàn)。下面是一個非常簡單的例子。

const myWeakRef = new WeakRef({ 
  name: 'Cache', 
  size: 'unlimited' 
}) 
 
console.log(myWeakRef.deref()) 
// Output: 
// { name: 'Cache', size: 'unlimited' } 
 
console.log(myWeakRef.deref().name) 
// Output: 
// 'Cache' 
 
console.log(myWeakRef.deref().size) 
// Output: 
// 'unlimited' 

Finalizers 和 FinalizationRegistry

與 WeakRef 緊密相連的還有另一個功能，名為 finalizers 或 FinalizationRegistry。這個功能允許你注冊一個回調(diào)函數(shù)，這個回調(diào)函數(shù)將會在對象被 gc 回收時調(diào)用。

// 創(chuàng)建 FinalizationRegistry: 
const reg = new FinalizationRegistry((val) => { 
  console.log(val) 
}) 
 
;(() => { 
  // 創(chuàng)建新對象: 
  const obj = {} 
 
  //為 “obj” 對象注冊 finalizer： 
  //第一個參數(shù)：要為其注冊 finalizer 的對象。 
  //第二個參數(shù)：上面定義的回調(diào)函數(shù)的值。 
  reg.register(obj, 'obj has been garbage-collected.') 
})() 
// 當 "obj" 被gc回收時輸出： 
// 'obj has been garbage-collected.' 

官方建議不要輕易使用 WeakRef 和 finalizer。其中一個原因是它們可能不可預測，另一個是它們并沒有真正幫 gc 完成工作，實際上可能會gc的工作更加困難。你可以在它的提案(https://github.com/tc39/proposal-weakrefs#a-note-of-caution)中詳細了解其原因。

總結

與以前的 JavaScript 規(guī)范(例如 ES6 和 ES2020)相比，看上去 ES2021的更新不多，但是這些有趣的功能值得我們關注。