種草ECMAScript2021新特性

觀感度：🌟🌟🌟🌟🌟

口味：賽螃蟹

烹飪時間：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 的新特性吧。

1.String.protoype.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.protoype.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() 的反向操做。

致敬韋神！

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

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

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

any 名字的由來

any 顧名思義，不只清楚的描述了它的做用，並且在提供此功能的第三方庫中都是這樣命名的，用過的同窗們必定以爲很親切。

• https://github.com/kriskowal/q#combination
• http://bluebirdjs.com/docs/api/promise.any.html
• https://github.com/m0ppers/promise-any
• https://github.com/cujojs/when/blob/master/docs/api.md#whenany
• https://github.com/sindresorhus/p-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");

關於更多的細節你能夠查閱：

• https://github.com/tc39/proposal-weakrefs/blob/master/reference.md

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.點贊、評論、轉發 === 催更！