【ES】862- 前瞻 ES 2021 新特性
轉(zhuǎn)自：bb老貓
https://juejin.cn/post/6914538946751889422
簡(jiǎn)介
ES2021 也就是 2021 年的 ECMAScript 版本。ES2021 并沒(méi)有像 ES2015 那樣提出很多新特性，但卻合并了一些有用的特性。
本文將會(huì)用通俗易懂的代碼示例來(lái)介紹 ES2021 的新特性。當(dāng)然在這之前，你需要了解 JavaScript 的基礎(chǔ)知識(shí)。
以下是 ES2021 的新特性概覽：
String.prototype.replaceAllPromise.anyWeakRef邏輯賦值運(yùn)算符 數(shù)字分隔符
String.protype.replaceAll
在 ES2021 之前，要替換掉一個(gè)字符串中的所有指定字符，我們可以這么做：
const?fruits?=?'??+??+??+';
const?fruitsWithBanana?=?fruits.replace(/\+/g,?'??');
console.log(fruitsWithBanana);?//????????????
ES2021 則提出了?replaceAll?方法，并將其掛載在 String 的原型上，可以這么用：
const?fruits?=?'??+??+??+';
const?fruitsWithBanana?=?fruits.replaceAll('+',?'??');
console.log(fruitsWithBanana);?//????????????
Promise.any
Promise.any?方法和?Promise.race?類(lèi)似——只要給定的迭代中的一個(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è)新功能：
可以通過(guò)? WeakRef?類(lèi)來(lái)給某個(gè)對(duì)象創(chuàng)建一個(gè)弱引用可以通過(guò)? FinalizationRegistry?類(lèi)，在某個(gè)對(duì)象被垃圾回收之后，執(zhí)行一些自定義方法
上述兩個(gè)新功能可以同時(shí)使用，也可以單獨(dú)使用，取決于你的需求。
一個(gè)?WeakRef?對(duì)象包含一個(gè)對(duì)于某個(gè)對(duì)象的弱引用，被稱為?目標(biāo)?或?引用。通過(guò)弱引用一個(gè)對(duì)象，可以讓該對(duì)象在沒(méi)有其它引用的情況下被垃圾回收機(jī)制回收。
WeakRef?主要用來(lái)?緩存?和?映射?一些大型對(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)聽(tīng)器，當(dāng)這個(gè)對(duì)象被垃圾回收之后，會(huì)觸發(fā)監(jiān)聽(tīng)的事件，具體步驟如下。
首先，創(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ù)字分隔符
通過(guò)這個(gè)功能，我們利用 “（_，U+005F）” 分隔符來(lái)將數(shù)字分組，提高數(shù)字的可讀性：
1_000_000_000???????????//?十億
101_475_938.38??????????//?億萬(wàn)
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?//?百萬(wàn)分之一
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 是一門(mén)動(dòng)態(tài)類(lèi)型語(yǔ)言，這在某些方面來(lái)說(shuō)對(duì)于 web 開(kāi)發(fā)是有益的。自 ES2015 之后，JavaScript 正在快速發(fā)展。在這篇文章里面，我們著重回顧了 ES2021 的一些新特性。
盡管你的項(xiàng)目可能并不會(huì)用到這些新特性，但是它們的確為項(xiàng)目開(kāi)發(fā)提供了多種可能性，不是么？