種草ECMAScript2021新特性

童歐巴發表於2020-11-25

觀感度：?????

口味：賽螃蟹

烹飪時間：5min

本文已收錄在前端食堂同名倉庫Github github.com/Geekhyt，歡迎光臨食堂，如果覺得酒菜還算可口，賞個 Star 對食堂老闆來說是莫大的鼓勵。

ECMAScript

ECMAScript 是 Ecma International 頒佈的一部語言標準，編號為 262，又稱為 ECMA-262。

Ecma International 則是一個制定資訊和通訊技術方面的國際標準的組織，前身是歐洲計算機制造商協會(European Computer Manufacturers Association)，隨著計算機的國際化，機構名稱改為其英文單詞首字母縮寫。

ECMAScript 由 EMCA International 的 TC39（Technical Committee 39）技術委員會編寫。

TC39 會將編寫完成的 ECMAScript 標準文件提交給 Ecma International，並由其正式釋出。

從 2015 年開始，ECMAScript 每年都會釋出一個正式版，並在標題中寫上年份，比如「ECMAScript® 2020 Language Specification, 11th edition」，可簡稱為ES2020或ES11。

五個流程階段

如果想要新增或是改寫規範，一般要經歷5個階段，如TC39 Process中所示：

  • Strawperson
  • Proposal
  • Draft
  • Candidate
  • Finished

經歷過這5個階段，進入 Finished 狀態的修改才會被列入正式版的規範。

ECMAScript2021

https://github.com/tc39/proposals/blob/master/finished-proposals.md

瞭解了 ECMAScript，下面就進入正文，讓我們來看看已經確定的 ECMAScript2021 的新特性吧。

image

1.String.prototype.replaceAll

https://github.com/tc39/proposal-string-replaceall

先來回顧下 String.prototype.replace 的用法：

const str = 'Stay Hungry. Stay Foolish.'
const newStr = str.replace('Stay', 'Always')
console.log(newStr) // Always Hungry. Stay Foolish.

如果我們這樣寫，只有第一個匹配的會被替換。

想要做到全部替換就需要使用正規表示式。

const str = 'Stay Hungry. Stay Foolish.'
const newStr = str.replace(/Stay/g, 'Always')
console.log(newStr) // Always Hungry. Always Foolish.

不過在使用正則的時候，如果需求是匹配 + 等符號時，還需要進行轉義。如：

/\+/g

聰明的你也許會想到另外一種方案：使用 split + join 的方式

這裡借用下官方的例子：

const queryString = 'q=query+string+parameters';
const withSpaces = queryString.split('+').join(' ');
// q=query string parameters

但這樣做也是有效能開銷的，加上這種操作十分常見。於是就誕生了 String.prototype.replaceAll 這個 API，我們可以更加方便的來進行操作。

const str = 'Stay Hungry. Stay Foolish.'
const newStr = str.replaceAll('Stay', 'Always')
console.log(newStr) // Always Hungry. Always Foolish.
String.prototype.replaceAll(searchValue, replaceValue)

注意：當 searchValue 是非全域性正規表示式時，replaceAll 會引發異常。如果 searchValue 是全域性正規表示式時，replaceAll 與 replace 行為是一致的。

2.Promise.any

https://github.com/tc39/proposal-promise-any

const p = Promise.all([p1, p2, p3]);
  • Promise.all (ES2015) 只有當傳入的每個 Promise 例項(p1,p2,p3)的狀態都變成 fulfilled 時，p 才 fulfilled，只要(p1,p2,p3)有一個被 rejected，p 的狀態就變成 rejected。
  • Promise.race (ES2015) 當傳入的 Promise 例項(p1,p2,p3)中有一個率先改變狀態，那麼 p 的狀態就跟著改變，也就是說返回最先改變的 Promise 例項的返回值。
  • Promise.allSettled (ES2020) 只有等到所有傳入的 Promise 例項(p1,p2,p3)都返回結果，不管是 fulfilled 還是 rejected，包裝例項才會結束。
  • Promise.any (ES2021) 當其中任何一個 Promise 完成(fulfilled)時，就返回那個已經有完成值的 Promise。如果所有的 Promise 都拒絕 (rejected), 那麼返回一個拒絕的 Promise。

對比記憶

  • 我們可以把 Promise.any() 理解成 Promise.all() 的反向操作。

image

致敬韋神！

  • Promise.any() 跟 Promise.race() 方法很像，有一個不同點是：前者不會因為某個 Promise 變成 rejected 狀態而結束。

想要了解更多細節可以看阮老師的ECMAScript 6 入門

Promise.any(promises).then(
    (first) => {
        // 任何一個Promise完成
    },
    (error) => {
        // 所有的 Promise都拒絕了
    }
)

any 名字的由來

any 顧名思義，不僅清楚的描述了它的作用，而且在提供此功能的第三方庫中都是這樣命名的，用過的同學們一定覺得很親切。

可預見的作用

官方提供了一個例子，可以應用 Promise.any() 檢查哪個站點訪問最快。

Promise.any([
  fetch('https://v8.dev/').then(() => 'home'),
  fetch('https://v8.dev/blog').then(() => 'blog'),
  fetch('https://v8.dev/docs').then(() => 'docs')
]).then((first) => {
  // Any of the promises was fulfilled.
  console.log(first);
  // → 'home'
}).catch((error) => {
  // All of the promises were rejected.
  console.log(error);
});

3.WeakRefs

https://github.com/tc39/proposal-weakrefs

注意：要儘量避免使用 WeakRef 和 FinalizationRegistry，垃圾回收機制依賴於 JavaScript 引擎的實現，不同的引擎或是不同版本的引擎可能會有所不同。

這個提案主要包括兩個主要的新功能：

  • 使用 WeakRef 類建立物件的弱引用
  • 使用 FinalizationRegistry 類對物件進行垃圾回收後，執行使用者定義的終結器

它們可以分開使用也可以一起使用。

WeakRef 例項不會阻止 GC 回收，但是 GC 會在兩次 EventLoop 之間回收 WeakRef 例項。GC 回收後的 WeakRef 例項的 deref() 方法將會返回 undefined。

let ref = new WeakRef(obj)
let isLive = ref.deref() // 如果 obj 被垃圾回收了，那麼 isLive 就是 undefined

FinalizationRegistry 註冊 Callback，某個物件被 GC 回收後呼叫。

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

// 通過 register 註冊任何你想要清理回撥的物件，傳入該物件和所含的值
registry.register(theObject, "some value");

關於更多的細節你可以查閱：

4.Logical Assignment Operators 邏輯賦值操作符

https://github.com/tc39/proposal-logical-assignment

先來回顧下 ES2020 新增的空值合併操作符 ??

在當左側運算元為 undefined 或 null 時，該操作符會將右側運算元賦值給左側變數。

const name = null ?? '前端食堂'
console.log(name) // 前端食堂

有了邏輯賦值運算子，我們可以替換掉如下舊的寫法：

const demo = function() {
    // 舊的寫法1
    // if (!a) {
    //     a = '西瓜'
    // }
    // 舊的寫法2
    // a = a || '西瓜'

    // 新的寫法
    a ||= '西瓜' 
}

a ||= b; // 等同於 a || (a = b);

a &&= b; // 等同於 a && (a = b);

a ??= b; // 等同於 a ?? (a = b);

5.Numeric separators 數字分隔符

https://github.com/tc39/proposal-numeric-separator

數字的可讀性隨著數字變長而變差，數字分隔符會讓長數字更加清晰。

const x = 1000000000000
const y = 1_000_000_000_000
console.log(x === y) // true

在二進位制、十六進位制、BigInt 等中都可以使用。

❤️愛心三連擊

1.如果你覺得食堂酒菜還合胃口，就點個贊支援下吧，你的贊是我最大的動力。

2.關注公眾號前端食堂，吃好每一頓飯！

3.點贊、評論、轉發 === 催更！

相關文章