在寫本文時，本文提到的新的 JavaScript 提案功能已進入第 4 階段，并且幾乎肯定會包含在 ES2021 中，你已經可以開始在 最新版本的瀏覽器，Node.js 和 Babel 中使用，
注意：ECMAScript 是 JavaScript 所基于的標準，由 TC39 委員會管理，ECMAScript 始終是一個不需要的名稱，這會使一切都對初學者感到困惑，人們經常談論 JavaScript 功能，但參考的是 ECMAScript 規范，
更新特性
數字分隔符（
_）邏輯分配（
&&=，||=，??=）參考不足（
WeakRef和FinalizationRegistry）Promise.any
String.prototype.replaceAll
1. 數值分隔符
大數字文字很難使人眼快速決議，尤其是當有很多重復的數字時：
1000000000000 1019436871.42
為了提高可讀性，新的 JavaScript 語言功能 啟用了下劃線作為數字文字中的分隔符，因此，上面的內容現在可以重寫為每千位數字，例如：
1_000_000_000_000 1_019_436_871.42
現在，更容易說出第一個數字是 1 萬億，而第二個數字大約是 10 億，
數字分隔符有助于提高各種數字文字的可讀性：
// A decimal integer literal with its digits grouped per thousand:
1_000_000_000_000
// A decimal literal with its digits grouped per thousand:
1_000_000.220_720
// A binary integer literal with its bits grouped per octet:
0b01010110_00111000
// A binary integer literal with its bits grouped per nibble:
0b0101_0110_0011_1000
// A hexadecimal integer literal with its digits grouped by byte:
0x40_76_38_6A_73
// A BigInt literal with its digits grouped per thousand:
4_642_473_943_484_686_707n
它們甚至適用于八進制整數文字（盡管 我想不出 其中分隔符為此類文字提供值 的示例）：
// A numeric separator in an octal integer literal: ?????♀?
0o123_456
請注意，JavaScript 還具有不帶顯式 0o 前綴的八進制文字的舊式語法，例如，017 === 0o17，在嚴格模式下或模塊內不支持此語法，并且在現代代碼中不應使用此語法，因此，這些文字不支持數字分隔符，使用 0o17 風格的文字代替，
2. Promise combinators
自從 ES2015 中引入 Promise 以來，JavaScript 完全支持兩種 Promise 組合器：靜態方法 Promise.all 和 Promise.race，
目前有兩個新提案正在通過標準化流程：Promise.allSettled 和 Promise.any，有了這些添加，JavaScript 中將總共有四個諾言組合器，每個組合器支持不同的用例，
以下是這四個組合器的概述：
2.1 Promise.allSettled
Promise.allSettled 給你當所有輸入的諾言是一種信號結算，這意味著他們要么履行或拒絕，如果您不在乎承諾的狀態，而只是想知道作業何時完成，無論它是否成功，這都是很有用的，
例如，您可以啟動一系列獨立的 API 呼叫，并使用 Promise.allSettled 它們來確保它們已全部完成，然后再執行其他操作，例如洗掉加載微調器：
const promises = [
fetch('/api-call-1'),
fetch('/api-call-2'),
fetch('/api-call-3'),
];
// Imagine some of these requests fail, and some succeed.
await Promise.allSettled(promises);
// All API calls have finished (either failed or succeeded).
removeLoadingIndicator();
2.2 Promise.any
Promise.any 方法和 Promise.race 類似——只要給定的迭代中的一個 promise 成功，就采用第一個 promise 的值作為它的回傳值，但與 Promise.race 的不同之處在于——它會等到所有 promise 都失敗之后，才回傳失敗的值：
const promises = [
fetch('/endpoint-a').then(() => 'a'),
fetch('/endpoint-b').then(() => 'b'),
fetch('/endpoint-c').then(() => 'c'),
];
try {
const first = await Promise.any(promises);
// Any of the promises was fulfilled.
console.log(first);
// → e.g. 'b'
} catch (error) {
// All of the promises were rejected.
console.assert(error instanceof AggregateError);
// Log the rejection values:
console.log(error.errors);
// → [
// <TypeError: Failed to fetch /endpoint-a>,
// <TypeError: Failed to fetch /endpoint-b>,
// <TypeError: Failed to fetch /endpoint-c>
// ]
}
此代碼示例檢查哪個端點回應最快，然后將其記錄下來，只有當 所有 請求都失敗時，我們才最終進入代碼 catch 塊，然后在其中處理錯誤，
Promise.any 拒絕可以一次代表多個錯誤，為了在語言級別支持此功能，引入了一種新的錯誤型別，稱為 AggregateError，除了上面示例中的基本用法外，還可以以編程方式構造 AggregateError 物件，就像其他錯誤型別一樣：
const aggregateError = new AggregateError([errorA, errorB, errorC], 'Stuff went wrong!');
3. Weak references and finalizers
此功能包含兩個高級物件 WeakRef 和 FinalizationRegistry，根據使用情況，這些介面可以單獨使用，也可以一起使用，正確使用它們需要仔細考慮，如果可能，最好避免使用它們，
一般來說，在JavaScript中，物件的參考是強保留的，這意味著只要持有物件的參考，它就不會被垃圾回收，
const ref = { x: 42, y: 51 };
// 只要我們訪問 ref 物件（或者任何其他參考指向該物件），這個物件就不會被垃圾回收
目前在 Javascript 中，WeakMap 和 WeakSet 是弱參考物件的唯一方法：將物件作為鍵添加到 WeakMap 或 WeakSet 中，是不會阻止它被垃圾回收的，
JavaScript 的 WeakMap 并不是真正意義上的弱參考：實際上，只要鍵仍然存活，它就強參考其內容，WeakMap 僅在鍵被垃圾回收之后，才弱參考它的內容，
WeakRef 是一個更高級的 API，它提供了真正的弱參考，Weakref 實體具有一個方法 deref，該方法回傳被參考的原始物件，如果原始物件已被收集，則回傳 undefined 物件，
JavaScript 中物件的參考是強參考，WeakMap 和 WeakSet 可以提供部分的弱參考功能，若想在 JavaScript 中實作真正的弱參考，可以通過配合使用 WeakRef 和終結器（Finalizer）來實作，
WeakRef 是用來指目標物件不脫離垃圾收集保留它的物件，如果未通過垃圾回識訓收目標物件，則 WeakRefs 可以取消參考以允許訪問目標物件，
// Create a WeakRef object referring to a given target object
const ref = new WeakRef(targetObject)
// Return the WeakRef instance's target object, or undefined if the target object has been garbage-collected
const obj = ref.deref()
使用 FinalizationRegistry 物件可以在垃圾回收物件時請求回呼，
// Create a registry object that uses the given callback
const registry = new FinalizationRegistry([callback])
// Register an object with a registry instance so that if the object is garbage-collected, the registry's callback may get called
registry.register(target, heldValue, [unregisterToken])
// Unregister a target object from a registry instance
registry.unregister(unregisterToken)
更多資訊：TC39提案，V8
4. String.prototype.replaceAll
當前，如果不使用全域正則運算式，就無法替換字串中子字串的所有實體，與字串引數一起使用時，String.prototype.replace 僅影響首次出現，
String.prototype.replaceAll() 將為開發人員提供一種簡單的方法來完成此常見的基本操作，
'aabbcc'.replaceAll('b', '.') // 'aa..cc'
'aabbcc'.replaceAll(/b/g, '.') // 'aa..cc'
5. Logical assignment (邏輯分配)
支持與新的運營邏輯分配 &&=，||= 和 ??=，與它們的 數學和按位對應物不同，邏輯分配遵循其各自邏輯操作的短路行為，僅當邏輯運算將評估右側時，它們才執行分配，
// falsy: false, 0, -0, 0n, "", null, undefined, and NaN
// truthy: all values are truthy unless defined as falsy
// nullish: null or undefined
a ||= b
// Logical OR assignment
// Equivalent to: a || (a = b);
// Only assigns if a is falsy
a &&= b
// Logical AND assignment
// Equivalent to: a && (a = b);
// Only assigns if a is truthy
a ??= b
// Logical nullish assignment
// Equivalent to: a ?? (a = b);
// Only assigns if a is nullish
5.1 具體例子
帶有 && 運算子的邏輯賦值運算子
僅當 LHS 值為真時，才將 RHS 變數值賦給 LHS 變數，
// Logical Assignment Operator with && operator
let num1 = 5
let num2 = 10
num1 &&= num2
console.log(num1) // 10
// Line 5 can also be written as following ways
// 1. num1 && (num1 = num2)
// 2. if (num1) num1 = num2
帶有 || 的運算子邏輯賦值運算子
僅當 LHS 值為假時，才將 RHS 變數值賦給 LHS 變數，
// Logical Assignment Operator with || operator
let num1
let num2 = 10
num1 ||= num2
console.log(num1) // 10
// Line 5 can also be written as following ways
// 1. num1 || (num1 = num2)
// 2. if (!num1) num1 = num2
帶有 ?? 運算子的邏輯賦值運算子
ES2020 引入了空值合并運算子，其也可以與賦值運算子結合使用，僅當 LHS 為 undefined 或僅為 null 時，才將 RHS 變數值賦給 LHS 變數，
// Logical Assignment Operator with ?? operator
let num1
let num2 = 10
num1 ??= num2
console.log(num1) // 10
num1 = false
num1 ??= num2
console.log(num1) // false
// Line 5 can also be written as following ways
// num1 ?? (num1 = num2)
概括
作為開發人員，跟緊語言的新特性是很重要的，
以上將在 2021 年發布的一些新功能，它們是進入第 4 階段的提案，幾乎可以肯定會包括在內，這些功能已經在最新的瀏覽器和 babel 中實作，
參考文章：JavaScript Features in 2021
可以加貓哥的 wx：CB834301747 ，一起閑聊前端，
微信搜 “全堆疊修煉”，回復 “電子書” 即可以獲得 160 本前端精華書籍哦，
往期精文
Vue3 全家桶 + Element Plus + Vite + TypeScript + Eslint 專案配置最佳實踐
TypeScript 中提升幸福感的 10 個高級技巧
推薦 7 個 Vue2、Vue3 原始碼解密分析的重磅開源專案
通過閱讀本篇文章，如果有識訓的話，可以點個贊和在看，這將會成為我持續分享的動力，感謝～
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/271379.html
標籤：其他
上一篇：高效前端之再探頁面渲染優化