ES2020 中 Javascript 10 個你應(yīng)該知道的新功能

譯者：xiaoT

https://www.freecodecamp.org/news/javascript-new-features-es2020

好消息 - ES2020 新功能已經(jīng)落地！這就意味著，現(xiàn)在對 ES2020 中 Javascript 的新增和改進(jìn)要有一個完整的了解。讓我們來看看都有哪些改變。

1: BigInt

BigInt，Javascript 中最期待的新功能終于落地。它允許開發(fā)者在 JS 中使用更大的整數(shù)進(jìn)行數(shù)據(jù)處理。

之前，Javascript 中最大的整數(shù)是?pow(2, 53) \- 1。但是，BigInt 不受此限制。

然而，就如你在上面看到，你需要在數(shù)字后面添加一個?n。這個?n?說明這是一個 BigInt，Javascript 引擎應(yīng)該特殊處理（不管是 V8，還是其它引擎）。

因為傳統(tǒng)的數(shù)字系統(tǒng)是 IEEE754（它不支持這種大數(shù)字），因此，這個改進(jìn)并不會向后兼容。

2：動態(tài)引入

Javascript 的動態(tài)引入，允許你把 JS 文件作為一個模塊動態(tài)的引入到你的應(yīng)用中。這就像你使用 webpack 和 Babel 一樣。

這個功能可以幫助你處理按需加載的代碼，拆分代碼，而且，并不需要 webpack 或者其它模塊處理器。如果，你喜歡也可以在 if-else 塊中加載代碼。

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

3: 空值合并

空值合并可以真正的檢查?nullish?值，而不是?falsely?值。你或許會問：nullish和?falsely?之間有什么不同呢？

在 Javascript 中有很多值都是?falsely。比如：空字符串、數(shù)字 0、undefined?、null、?false?、NaN?等。

然而，很多情況下你只想檢測一個變量是否為空值 --?undefined?或者?null，就像變量可以是一個空字符串甚至是一個假值。

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

你可以清楚的看到 OR 操作符總是返回一個真值，但是，空值操作符返回一個非空值。

4：可選鏈

可選鏈語法允許你訪問嵌套更深的對象屬性，而不用擔(dān)心屬性是否存在。如果，存在很好。反之，會返回?undefined。

它不僅僅可操作對象屬性，也可以操作函數(shù)的調(diào)用或者數(shù)組。這樣更加方便！以下是個演示：

5: Promise.allSettled

Promise.allSettled?方法接收一組 Promise，并且會返回所有的結(jié)果 - 而不管是 resolved 還是 rejected。

在之前，這是不可能的，盡管有些類似的實現(xiàn)比如：race?和?all。它只會“運行所有的 promise - 而不關(guān)心它們的結(jié)果”。

6: String#matchAll

matchAll?是?String?原型鏈上的一個新增的方法，它可以關(guān)聯(lián)正則表達(dá)式。它返回一個迭代器，一個接一個的返回所有匹配的組。我們來看一個演示：

7: globalThis

如果，你寫過那些可以運行在 Node、瀏覽器或者 web-workers 等跨平臺的 JS 代碼，你就會花費很多的時間去處理全局對象的問題。

這是因為不同平臺全局對象也不同，瀏覽器中是?window，Node 中是?global，web workers 中是?self。如果，還有更多的運行環(huán)境，這個對象也會有不同。

因此，你自己必要檢查運行環(huán)境來決定使用正確是全局對象。

ES2020 給我們帶來了?globalThis?對象，它始終會引用著全局對象，而不用關(guān)系代碼在哪運行：

8：導(dǎo)出模塊的命名空間

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

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

然而，直到現(xiàn)在還不可以像以下這樣使用?export?語法：

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

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

以上和以下結(jié)果相同：

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

9：明確定義 for-in 的順序

ECMA 規(guī)范中并沒有明確定義?for (x in y)?的順序。盡管，在此之前瀏覽器實現(xiàn)了一致的順序，但是，現(xiàn)在已經(jīng)被納入到 ES2020 的官方規(guī)范中了。

10: import.meta

import.meta?是由 ECMAScript 創(chuàng)建實現(xiàn)的，默認(rèn)為?null。

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

你可以通過?import.meta?對象訪問模塊的相關(guān) meta 信息：

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

它返回一個包含?url?屬性的對象，該屬性代表著模塊的 URL。它可能是獲取腳本的 URL（對于外部腳本來說），或者是包含模塊文檔的基礎(chǔ)URL（對于內(nèi)聯(lián)腳本來說）。

- END -

專注分享當(dāng)下最實用的前端技術(shù)。關(guān)注前端達(dá)人，與達(dá)人一起學(xué)習(xí)進(jìn)步！

長按關(guān)注"前端達(dá)人"