轉自:bb老貓
https://juejin.cn/post/6914538946751889422
簡介
ES2021 也就是 2021 年的 ECMAScript 版本。ES2021 並沒有像 ES2015 那樣提出很多新特性,但卻合併了一些有用的特性。
本文將會用通俗易懂的代碼示例來介紹 ES2021 的新特性。當然在這之前,你需要了解 JavaScript 的基礎知識。
以下是 ES2021 的新特性概覽:
-
String.prototype.replaceAll
-
Promise.any
-
WeakRef
-
邏輯賦值運算符 -
數字分隔符
String.protype.replaceAll
在 ES2021 之前,要替換掉一個字符串中的所有指定字符,我們可以這麼做:
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
類似——只要給定的迭代中的一個 promise 成功,就採用第一個 promise 的值作爲它的返回值,但與 Promise.race
的不同之處在於——它會等到所有 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) // 任何一個 promise 成功。
.then(console.log) // 比如 ‘3’
.catch(console.error); // 所有的 promise 都失敗了
// 使用 async-await
try {
const first = await Promise.any(promises); // 任何一個 promise 成功返回。
console.log(first);
}catch (error) { // 所有的 promise 都失敗了
console.log(error);
}
WeakRef
WeakRef
提案主要包含兩個新功能:
-
可以通過 WeakRef
類來給某個對象創建一個弱引用 -
可以通過 FinalizationRegistry
類,在某個對象被垃圾回收之後,執行一些自定義方法
上述兩個新功能可以同時使用,也可以單獨使用,取決於你的需求。
一個 WeakRef
對象包含一個對於某個對象的弱引用,被稱爲 目標 或 引用。通過弱引用一個對象,可以讓該對象在沒有其它引用的情況下被垃圾回收機制回收。
WeakRef
主要用來 緩存 和 映射 一些大型對象,當你希望某個對象在不被其它地方引用的情況下及時地被垃圾回收,那麼你就可以使用它。
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
接收一個註冊器回調函數,可以利用該註冊器爲指定對象註冊一個事件監聽器,當這個對象被垃圾回收之後,會觸發監聽的事件,具體步驟如下。
首先,創建一個註冊器:
const registry = new FinalizationRegistry(heldValue => {
// ....
});
接着註冊一個指定對象,同時也可以給註冊器回調傳遞一些參數:
registry.register(theObject, "some value");
邏輯賦值運算符
譯者注:賦值運算符 和 表達式 的區別可以 看這裏。
邏輯賦值運算符結合了 邏輯運算符 和 賦值表達式。邏輯賦值運算符有兩種:
-
或等於(||=) -
且等於(&&=)
// 或等於
| a | b | a ||= b | a (運算後) |
| 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 (運算後) |
| true | true | true | true |
| true | false | false | false |
| false | true | false | false |
| false | false | false | false |
a &&= b
// 等同於:
a && (a = b);
數字分隔符
通過這個功能,我們利用 “(_,U+005F)” 分隔符來將數字分組,提高數字的可讀性:
1_000_000_000 // 十億
101_475_938.38 // 億萬
const amount = 12345_00; // 12,345
const amount = 123_4500; // 123.45 (保留 4 位小數)
const amount = 1_234_500; // 1,234,500
0.000_001 // 百萬分之一
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;
總結
JavaScript 是一門動態類型語言,這在某些方面來說對於 web 開發是有益的。自 ES2015 之後,JavaScript 正在快速發展。在這篇文章裏面,我們着重回顧了 ES2021 的一些新特性。
儘管你的項目可能並不會用到這些新特性,但是它們的確爲項目開發提供了多種可能性,不是麼?
回覆“加羣”與大佬們一起交流學習~
點擊“閱讀原文”查看 100+ 篇原創文章
本文分享自微信公衆號 - 前端自習課(FE-study)。
如有侵權,請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”,歡迎正在閱讀的你也加入,一起分享。