隨著可選鏈?zhǔn)讲僮鞣?(Optional Chaining) 的引入，我們前端的工作變得容易多了。 通過簡單地使用可選鏈?zhǔn)讲僮鞣?code>?.我們可以訪問深嵌套的對(duì)象，而不必檢查未定義或空對(duì)象。

讓我們看看它是如何運(yùn)作的。

const user = {
 firstName: "Joseph",
 lastName: "Kuruvilla",
 age: 38,
 address: {
 number: "239",
 street: "Ludwig Lane",
 city: "Chennai",
 zip: "600028",
 prop1: {
  prop2: {
  prop3: {
   prop4: {
   value: "sample",
   },
  },
  },
 },
 },
};

console.log(user?.address?.zip);
// 600028

console.log(user?.address?.prop1?.prop2?.prop3?.prop4?.value);
// sample

//Accessing unexisting property
console.log(user?.address?.prop102?.po);
//undefined

太神奇了！ ES2020 成功地通過引入一個(gè)單獨(dú)的代碼操作符?.來減少了如此多的代碼行數(shù)！

空值合并操作符（Nullish coalescing operator）

這是另一個(gè)令我興奮的功能，當(dāng)我第一次在proposal stage， 了解到的時(shí)候，我由衷的喜歡這個(gè)特性，因?yàn)槲乙呀?jīng)歷了編寫單獨(dú)的函數(shù)來手動(dòng)檢查這個(gè)特性的麻煩。

空值合并操作符允許您檢查nullish值而不是  falsey值。 Nullish 值是指  null或undefined的值。 而 falsey 值是諸如空字符串、數(shù)字0、  undefined、  null、  false、  NaN等等的值。 這對(duì)你來說可能聽起來沒什么不同，但是在現(xiàn)實(shí)中，這意味著很多。

讓我們看看這是怎么回事。

在有空值合并操作符之前

我最近做了一個(gè)項(xiàng)目，我需要允許黑暗模式（Dark Mode）切換功能。 我必須檢查輸入是true還是  false。 如果用戶沒有設(shè)置任何值，則默認(rèn)為  true。 下面就是我如何在有空值合并操作符之前實(shí)現(xiàn)它的：

const darkModePreference1 = true;
const darkModePreference2 = false;
const darkModePreference3 = undefined;
const darkModePreference4 = null;
const getUserDarkModePreference = (darkModePreference) => {
 if (darkModePreference || darkModePreference === false) {
 return darkModePreference;
 }
 return true;
};
getUserDarkModePreference(darkModePreference1);
// true
getUserDarkModePreference(darkModePreference2);
// false
getUserDarkModePreference(darkModePreference3);
// true
getUserDarkModePreference(darkModePreference4);
// true

在有空值合并操作符之后

在有空值合并操作符之后，您所要做的就是使用??操作符。不需要  if語句：

const darkModePreference1 = true;
const darkModePreference2 = false;
const darkModePreference3 = undefined;
const darkModePreference4 = null;
const getUserDarkModePreference = (darkModePreference) => {
 return darkModePreference ?? true;
};
getUserDarkModePreference(darkModePreference1);
// true
getUserDarkModePreference(darkModePreference2);
// false
getUserDarkModePreference(darkModePreference3);
// true
getUserDarkModePreference(darkModePreference4);
// true

這里基本上發(fā)生的情況是，如果變量 darkModePreference 包含一個(gè)nullish值，那么將值 true 賦給它。 簡單，簡短，易于理解。

動(dòng)態(tài) import（Dynamic Imports）

這個(gè)特性將幫助您的應(yīng)用程序更加高效的執(zhí)行， 動(dòng)態(tài) import 允許您將 JS 文件作為原生應(yīng)用用程序中的模塊動(dòng)態(tài)導(dǎo)入。 在 ES2020之前，不管是否使用模塊，都應(yīng)該導(dǎo)入模塊。

例如，假設(shè)我們需要添加一個(gè)功能來下載 pdf 格式的文件。

讓我們看看如何在 動(dòng)態(tài) import 之前和之后實(shí)現(xiàn)這一點(diǎn)。

在 動(dòng)態(tài) import  之前

實(shí)際上，不會(huì)所有的頁面訪問者使用下載 pdf 的選項(xiàng)。 但是，無論我們的訪客是否使用它，它仍然需要被導(dǎo)入。 這意味著這個(gè) pdf 模塊也可以在頁面加載期間被下載。

import { exportAsPdf } from "./export-as-pdf.js";
const exportPdfButton = document.querySelector(".exportPdfBtn");
exportPdfButton.addEventListener("click", exportAsPdf);

這種開銷可以通過使用延遲加載模塊（lazy loaded modules）來減少。 可以通過稱為代碼分割 （code-splitting）的方法來實(shí)現(xiàn)，這在 Webpack 或其他模塊打包工具已經(jīng)可以使用了。但是對(duì)于 ES2020，我們可以直接使用它了，而不需要模塊打包工具，如 Webpack。

在動(dòng)態(tài)導(dǎo)入（動(dòng)態(tài) import）之后

const exportPdfButton = document.querySelector('.exportPdfBtn');
exportPdfButton.addEventListener('click', () => {
 import('./export-as-pdf.js')
 .then(module => {
  module.exportAsPdf()
 })
 .catch(err => {
  // handle the error if the module fails to load
 })
})

正如您在上面的代碼中看到的，現(xiàn)在只有在需要模塊時(shí)才延遲加載模塊。 從而減少開銷和頁面加載時(shí)間。

Promise.allSettled

如果你有一個(gè)場景，在所有 Promise 都完成之后必須執(zhí)行一個(gè)任務(wù)，那么你可能使用Promise.all()方法。 但是這個(gè)方法有一個(gè)缺點(diǎn)。 當(dāng)你的任何一個(gè) Promise 被 Rejected 時(shí)，Promise 方法就會(huì)拋出一個(gè)錯(cuò)誤。 這意味著您的代碼不會(huì)等到所有的 Promise 都完成。

這可能不是你想要的。 如果你想要這樣的東西: “我不在乎他們的結(jié)果。 只需全部運(yùn)行” ，那么你可以使用新的Promise.allSettled()方法。 這種方法只有在你的所有 Promise 都  settledーー 要么  Resolved，要么  Rejectedーー 時(shí)才會(huì)  Resolved。

在擁有 Promise.allSettled 之前

const PromiseArray = [
 Promise.resolve(100),
 Promise.reject(null),
 Promise.resolve("Data release"),
 Promise.reject(new Error("Something went wrong")),
];
Promise.all(PromiseArray)
 .then((data) =>
 console.log("all resolved! here are the resolve values:", data)
 )
 .catch((err) => console.log("got rejected! reason:", err));
//got rejected! reason: null

如上所述，當(dāng)其中一個(gè) Promise 被rejected時(shí)， Promise 就會(huì)拋出錯(cuò)誤。

在擁有 Promise.allSettled 之后

const PromiseArray = [
 Promise.resolve(100),
 Promise.reject(null),
 Promise.resolve("Data release"),
 Promise.reject(new Error("Something went wrong")),
];
Promise.allSettled(PromiseArray)
 .then((res) => {
 console.log(res);
 })
 .catch((err) => console.log(err));
//[
// {status: "fulfilled", value: 100},
// {status: "rejected", reason: null},
// {status: "fulfilled", value: "Data release"},
// {status: "rejected", reason: Error: Something went wrong ...}
//]

盡管有些 Promise 被rejected了，Promise.allSettled 返回了所有的 Promise 的結(jié)果。

globalThis

globalThis包含對(duì)全局對(duì)象的引用，與環(huán)境無關(guān)。 在瀏覽器中，全局對(duì)象是  window對(duì)象。 在 Node 環(huán)境中，全局對(duì)象是  global或者 Web workers 中的  self。

在擁有 globalThis 之前

我們在工作中會(huì)有需要編寫一份同時(shí)運(yùn)行在 Node 和瀏覽器中的通用代碼，當(dāng)我們要取得全局對(duì)象時(shí)，通常需要做很多工作和邏輯判斷：

beforeGlobalThis = (typeof window !== "undefined"
? window
: (typeof process === 'object' &&
 typeof require === 'function' &&
 typeof global === 'object')
 ? global
 : this);

beforeGlobalThis.tuture = '小若燕雀，亦可一展宏圖';

在擁有 globalThis 之后

我們可以直接使用globalThis去引用全局對(duì)象，而不用去擔(dān)心環(huán)境的問題：

globalThis.tuture = '小若燕雀，亦可一展宏圖';

上面的代碼在瀏覽器或者 Node 環(huán)境中都是通用的，你可以放心使用！

BigInt

允許您使用大于 Javascript 中允許的最大值的數(shù)字。 這個(gè)數(shù)字是pow(2,53)-1。 盡管這不能向后兼容，因?yàn)閭鹘y(tǒng)的數(shù)字系統(tǒng)(IEEE 754)不能支持這種大小的數(shù)字。

String.matchall

matchAll()是一個(gè)與正則表達(dá)式相關(guān)的方法。 此方法返回與正則表達(dá)式匹配的字符串的所有結(jié)果的迭代器，包括捕獲組。 這個(gè)方法已經(jīng)被添加到 String 原型中。

參考資源

ECMA
InfoQ
Article by Tyler Hawkins

總結(jié)

到此這篇關(guān)于ES2020 已定稿,真實(shí)場景案例分析的文章就介紹到這了,更多相關(guān)ES2020 已定稿內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！