盤點 ES2020 的新功能

時間 2020-12-22

標籤前端程序員 web 面試正則表達式 segmentfault promise 瀏覽器安全服務器欄目快樂工作简体版

原文原文鏈接

Ecma International 負責對 JavaScript 標準化。是他們制定了 ECMAScript 規範。當提到 ECMAScript 時，基本上能夠把它看做是 JavaScript 的同義詞。從 2015 年開始，開始用年份標記版本，即 ECMAScript 2015 縮寫爲 ES2015。可是也會使用版本號的計數，因此 ES6 與 ES2015 相同。還沒有發佈的功能被稱爲 ESNext。前端

ECMAScript 2020/ES2020/ES11 於 6 月發佈，而且已經在現代瀏覽器中實現。讓咱們看看這會帶來什麼好處。程序員

太長不看版

若是你不想看細節，那麼只看這張圖就夠了。web

空值合併

若是你在賦值時想要一個默認值（若是它爲 null 或 undefined ），則可使用 ??。面試

const name = person.fullName ?? 'anonymous';

若是對象 person 沒有 fullName 值，則 name 將被賦值爲「anonymous」。若是 person 的 fullName 有值，則把該值賦值給變量 name。正則表達式

你可能認爲用 || 就能作到。但這幾乎是幾乎相同的，若是 || 前面的值是虛值，那麼這個表達式將不會短路，而且會使用後面的值。可是請記住，空字符串 ''，0，NaN 和 false 都是虛值，在這些狀況下將使用默認值，若是咱們要用這些進行賦值的話，就行不通了。 ?? 則只檢查 null 和 undefined。segmentfault

const user = { preferredSound: 0 }
let sound = user.preferredSound ?? 50 // value is 0
let soundWrong = user.preferredSound || 50 // value is 50

僅當 preferredSound 爲 undefined 或者 null 時才使用 50 這個值。promise

可選鏈

若是要使用多級嵌套在對象中的屬性，在之前必需要檢查它們是否爲 null 或 undefined，以免代碼崩潰。如今能夠在訪問這些屬性以前使用 ?.，這樣就能夠只有在值不爲 null 或 undefined 時使用 ?. 後面的代碼。瀏覽器

例如：安全

const house = { owner: { name: 'Jim', pet: null }};// Old JavaScript
if(house && house.owner && house.owner.pet && house.owner.pet.type === 'dog'){
  console.log('owner has a dog');
}// ES2020
if (house?.owner?.pet?.type === 'dog') {
  console.log('owner has a dog');
}

Promise.allSettled

若是要執行更多的異步請求，可使用 Promise.all 來收集它們。可是若是其中任何一個請求失敗的話，將會引起異常。若是咱們但願每一個請求都可以完成，不管其請求是否失敗，那該怎麼辦。這時能夠用 Promise.allSettled，當全部請求都被解決或拒絕時，它將返回。服務器

const promises = [Promise.resolve(1), Promise.reject(2)];
const [result1, result2] = await Promise.allSettled(promises);

即便其餘 promise 被拒絕了，咱們仍然能夠在這裏使用 result1 的值。

matchAll

若是要用正則表達式查找全部的匹配項，能夠用 match 來獲得全部子字符串。可是，若是你既須要子字符串又須要索引，該怎麼辦？這時能夠用 matchAll 並進行重複匹配。

例如找到一個字符串中的全部數字：

const matches = 'Here are some numbers: 5 12 88'.matchAll(/\d+/g);
for (const match of matches) {
  console.log(match);
}// 輸出:
// ["5", index: 22, input: "Here are some numbers: 5 12 88", groups: undefined]
// ["12", index: 24, input: "Here are some numbers: 5 12 88", groups: undefined]
// ["88", index: 27, input: "Here are some numbers: 5 12 88", groups: undefined]

BigInt

BigInt 是 JavaScript 中新的原始數據類型，與 Boolean、Number、String、Symbol和 undefined 的地位相同。 BigInt 能夠安全的處理大於 Number 限制的整數數字。也就是說若是要處理大於 9007199254740991 的數字時應該用 BigInt。 BigInt 在數字末尾用 n 表示。

9_007_199_254_740_991 + 2; // 9007199254740992
BigInt(9_007_199_254_740_991) + BigInt(2) // 9007199254740993n

動態導入

之前只能在文件開頭靜態導入模塊。如今有了動態導入，能夠按需在代碼中的任何位置進行這種操做。import() 會與模塊一塊兒返回一個 Promise。

const module = await import('module');

模塊命名空間導出

在大多數狀況下，咱們可以經過導入導出 JavaScript 模塊來重命名模塊的名稱，就像這樣：

import * as values from 'module';
import { value as v } from 'module';export { v as value };

可是沒有辦法直接從名稱被更改的另外一個模塊中從新導出某些內容。如今有了 ES2020，則能夠這樣作：

export * as someUtils from 'utils';

globalThis

若是你的代碼須要在多個環境（例如瀏覽器和 Node 服務器）下運行，那麼它們所使用全局對象名稱並不一致。在瀏覽器中用的是 window，Node 則用的是 global，而 web worker 用的是self。如今，不管代碼在哪一種環境中運行，globalThis 都可以爲你提供正確的全局對象。

下面是一個例子，咱們須要檢查是否能夠向用戶提示 alert。若是代碼在瀏覽器中運行，則 globalThis 將會引用 window，而且 alert 也可使用。

if (typeof globalThis.alert === 'function'){
  globalThis.alert('hi');
}

本文首發微信公衆號：前端先鋒

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

歡迎繼續閱讀本專欄其它高贊文章：

更多文章...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。