ES2020 已經上線一段時間了,但是滿多新功能都大家不太知道。這篇文章跟大家介紹一下!
BigInt 是最受期待的新功能之一,允許工程師處理資料時,能存一個更大的整數。
目前在 JavaScript 中可以儲存的最大整數是 pow(2, 53) - 1
。BigInt 讓你可以存更大的數字。
如上所示,需要在後面加上一個 n
。這個 n
表示這是一個 BigInt ,讓 JavaScript 引擎(v8 引擎)能夠特別處理。
這個功能不向後兼容,因為傳統的數字系統是 IEEE754(不能支援這種大小的數字)。
動態導入讓你可在程式碼中,有條件地動態導入模組。跟你現在用 Webpack 和 Babel 做的事一樣。
此功能讓你可以按需求讀取程式碼,也就是所謂的 code splitting。讓你不再需要 webpack 或其他模組打包工具就能做到。您還可以在 if-else 中有條件地載入程式碼。這有個額外好處,就是不會污染全域命名空間。
Nullish Coalescing 可以確實檢查 nullish 而不是 falsy 值。什麼是 nullish 與 falsy 值?
在 JavaScript 中,許多值都是 falsy
,例如空字串、數字 0、undefined
、null
、false
、NaN
等等。
但有時候你想要檢查 undefined 跟 null。這種情況下,就可以用新的運算子 ??
如圖, OR 運算子始終回傳 truthy 值,而 ?? 運算子回傳 non-nullish 值。
Optional Chaining 語法讓你可以取得深度嵌套的物件屬性,而不用擔心屬性不存在。如果找不到屬性,會回傳 undefined,而不會報錯壞掉。物件屬性可用,呼叫函數跟陣列也可以用。超方便!請參考:
Promise.allSettled
方法接受一個 Promise 陣列,並且只有在所有 Promise 都完成時才 resolve 或 reject。
以前只能用 race
和 all
做出類似效果。
matchAll
是添加到 String
原型的新方法,與正則表達式相關。這將回傳一個迭代器,該迭代器依次返回所有匹配的組。舉例:
如果你是寫跨平台的 JS 程式碼,可以在 Node 上運行、在瀏覽器運行、也可以在 web-workers 中運行,你很難操作全域物件。
因為對於瀏覽器來說它是 window ,對於 Node 來說是 global ,對於 web-workers 來說是 self。如果有其它的運行環境,它們的全局物件也都不同。
變成你需要自己寫一段來檢測環境。所以 ES2020 實作了 globalThis,無論您在哪裡執行,它始終引用全域物件:
在 JavaScript 模組中,可以使用以下語法:
import * as utils from './utils.mjs'
ES2020 新增了相對的匯出語法:
export * as utils from './utils.mjs'
這等同於以下內容:
import * as utils from './utils.mjs'
export { utils }
雖然大部份瀏覽器都實做了一樣的順序,但 ECMA 規範其實沒有指定 for (x in y) 的運行順序。在 ES2020 中正式標準化了。
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。
以上簡單分享,希望對你有幫助!