ES2020 已經上線一段時間了,但是滿多新功能都大家不太知道。這篇文章跟大家介紹一下!

  • 原文出處:https://dev.to/worldindev/10-new-javascript-features-in-es2020-that-you-should-know-3ohf

1. BigInt

BigInt 是最受期待的新功能之一,允許工程師處理資料時,能存一個更大的整數。

目前在 JavaScript 中可以儲存的最大整數是 pow(2, 53) - 1。BigInt 讓你可以存更大的數字。

如上所示,需要在後面加上一個 n。這個 n 表示這是一個 BigInt ,讓 JavaScript 引擎(v8 引擎)能夠特別處理。

這個功能不向後兼容,因為傳統的數字系統是 IEEE754(不能支援這種大小的數字)。

2.Dynamic import

動態導入讓你可在程式碼中,有條件地動態導入模組。跟你現在用 Webpack 和 Babel 做的事一樣。

此功能讓你可以按需求讀取程式碼,也就是所謂的 code splitting。讓你不再需要 webpack 或其他模組打包工具就能做到。您還可以在 if-else 中有條件地載入程式碼。這有個額外好處,就是不會污染全域命名空間。

3. Nullish Coalescing

Nullish Coalescing 可以確實檢查 nullish 而不是 falsy 值。什麼是 nullish 與 falsy 值?

在 JavaScript 中,許多值都是 falsy,例如空字串、數字 0、undefinednullfalseNaN 等等。

但有時候你想要檢查 undefined 跟 null。這種情況下,就可以用新的運算子 ??

如圖, OR 運算子始終回傳 truthy 值,而 ?? 運算子回傳 non-nullish 值。

4. Optional Chaining

Optional Chaining 語法讓你可以取得深度嵌套的物件屬性,而不用擔心屬性不存在。如果找不到屬性,會回傳 undefined,而不會報錯壞掉。物件屬性可用,呼叫函數跟陣列也可以用。超方便!請參考:

5. Promise.allSettled

Promise.allSettled 方法接受一個 Promise 陣列,並且只有在所有 Promise 都完成時才 resolve 或 reject。

以前只能用 raceall 做出類似效果。

6. String#matchAll

matchAll 是添加到 String 原型的新方法,與正則表達式相關。這將回傳一個迭代器,該迭代器依次返回所有匹配的組。舉例:

7. globalThis

如果你是寫跨平台的 JS 程式碼,可以在 Node 上運行、在瀏覽器運行、也可以在 web-workers 中運行,你很難操作全域物件。

因為對於瀏覽器來說它是 window ,對於 Node 來說是 global ,對於 web-workers 來說是 self。如果有其它的運行環境,它們的全局物件也都不同。

變成你需要自己寫一段來檢測環境。所以 ES2020 實作了 globalThis,無論您在哪裡執行,它始終引用全域物件:

8. 模組命名空間匯出

在 JavaScript 模組中,可以使用以下語法:

import * as utils from './utils.mjs'

ES2020 新增了相對的匯出語法:

export * as utils from './utils.mjs'

這等同於以下內容:

import * as utils from './utils.mjs'
export { utils }

9. 定義好 for-in 順序

雖然大部份瀏覽器都實做了一樣的順序,但 ECMA 規範其實沒有指定 for (x in y) 的運行順序。在 ES2020 中正式標準化了。

10. import.meta

import.meta 物件帶有一個 null 原型。

考慮以下模組,module.js

<script type="module" src="module.js"></script>

您可以使用 import.meta 物件取得有關模組的元信息:

console.log(import.meta); // { url: "file:///home/user/module.js" }

對於 external scripts,它代表存取腳本的 URL,對於 inline scripts,它代表檔案的 URL。


以上簡單分享,希望對你有幫助!


共有 0 則留言