ES2020 中 Javascript 10 個你應該知道的新功能

原文地址: www.freecodecamp.org/news/javasc… 譯文地址：github.com/xiao-T/note…
本文版權歸原做者全部，翻譯僅用於學習。

---

好消息 - ES2020 新功能已經落地！這就意味着，如今對 ES2020 中 Javascript 的新增和改進要有一個完整的瞭解。讓咱們來看看都有哪些改變。

#1: BigInt

BigInt，Javascript 中最期待的新功能終於落地。它容許開發者在 JS 中使用更大的整數進行數據處理。

以前，Javascript 中最大的整數是 pow(2, 53) - 1。可是，BigInt 不受此限制。

然而，就如你在上面看到，你須要在數字後面添加一個 n。這個 n 說明這是一個 BigInt，Javascript 引擎應該特殊處理（不論是 V8，仍是其它引擎）。

由於傳統的數字系統是 IEEE754（它不支持這種大數字），所以，這個改進並不會向後兼容。

#2：動態引入

Javascript 的動態引入，容許你把 JS 文件做爲一個模塊動態的引入到你的應用中。這就像你使用 webpack 和 Babel 同樣。

這個功能能夠幫助你處理按需加載的代碼，拆分代碼，並且，並不須要 webpack 或者其它模塊處理器。若是，你喜歡也能夠在 if-else 塊中加載代碼。

在 if-else 塊中引入一個模塊，這樣的好處是：不會污染全局命名空間。

#3: 空值合併

空值合併能夠真正的檢查 nullish 值，而不是 falsely 值。你或許會問：nullish 和 falsely 之間有什麼不一樣呢？

在 Javascript 中有不少值都是 falsely。好比：空字符串、數字 0、undefined 、null、 false 、NaN 等。

然而，不少狀況下你只想檢測一個變量是否爲空值 -- undefined 或者 null，就像變量能夠是一個空字符串甚至是一個假值。

在這個示例中，你將會看到新的空值合併操做符：??。

你能夠清楚的看到 OR 操做符老是返回一個真值，可是，空值操做符返回一個非空值。

#4：可選鏈

可選鏈語法容許你訪問嵌套更深的對象屬性，而不用擔憂屬性是否存在。若是，存在很好。反之，會返回 undefined。

它不只僅可操做對象屬性，也能夠操做函數的調用或者數組。這樣更加方便！如下是個演示：

#5: Promise.allSettled

Promise.allSettled 方法接收一組 Promise，而且會返回全部的結果 - 而不論是 resolved 仍是 rejected。

在以前，這是不可能的，儘管有些相似的實現好比：race 和 all。它只會「運行全部的 promise - 而不關心它們的結果」。

#6: String#matchAll

matchAll 是 String 原型鏈上的一個新增的方法，它能夠關聯正則表達式。它返回一個迭代器，一個接一個的返回全部匹配的組。咱們來看一個演示：

#7: globalThis

若是，你寫過那些能夠運行在 Node、瀏覽器或者 web-workers 等跨平臺的 JS 代碼，你就會花費不少的時間去處理全局對象的問題。

這是由於不一樣平臺全局對象也不一樣，瀏覽器中是 window，Node 中是 global，web workers 中是 self。若是，還有更多的運行環境，這個對象也會有不一樣。

所以，你本身必要檢查運行環境來決定使用正確是全局對象。

ES2020 給咱們帶來了 globalThis 對象，它始終會引用着全局對象，而不用關係代碼在哪運行：

#8：導出模塊的命名空間

Javascript 模塊中，一直均可以使用如下這種語法：

import * as utils from './utils.mjs'
複製代碼

然而，直到如今還不能夠像如下這樣使用 export 語法：

譯者注：目前是支持的（2020-04-24）

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 是由 ECMAScript 建立實現的，默認爲 null。

考慮一下這個模塊，module.js ：

<script type="module" src="module.js"></script>
複製代碼

你能夠經過 import.meta 對象訪問模塊的相關 meta 信息：

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

它返回一個包含 url 屬性的對象，該屬性表明着模塊的 URL。它多是獲取腳本的 URL（對於外部腳原本說），或者是包含模塊文檔的基礎URL（對於內聯腳原本說）。

總結

我喜歡 Javascript 社區不斷髮展的一致性和速度。看看 Javascript 如何從一種通過十年的噓聲演變成現在這種最強大、最靈活和最通用的語言，真的很神奇。

你是否但願用一種全新的方式學習 Javascript 和其它的編程語言？我正在開發一個全新的開發者平臺 ，如今能夠試下！

ES2020 中功能哪一個是你喜歡的呢？能夠在 Twitter 和 Instagram 上聯繫告訴我！

個人視頻也有相同專題的內容。若是您能表達愛意，那就對我來講意味着世界！

<www.youtube.com/watch?v=Fag… />