JavaScript ES2020的功能怎么用

這篇文章主要介紹“JavaScript ES2020的功能怎么用”，在日常操作中，相信很多人在JavaScript ES2020的功能怎么用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JavaScript ES2020的功能怎么用”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

新功能：

• 動態(tài)導(dǎo)入

• 空位合并運算符

• 可選鏈接運算符

• 私有類變量Private

• Promise.allSettled

• 有關(guān)更多信息和所有其他內(nèi)容，請查看官方的ECMAScript語言規(guī)范

動態(tài)導(dǎo)入

其中之一是我們可以使用async / await動態(tài)導(dǎo)入依賴項。這意味著我們不必先導(dǎo)入所有內(nèi)容，并且僅在需要它們時才可以導(dǎo)入依賴項。結(jié)果，通過在運行時加載模塊來提高應(yīng)用程序的性能。

它如何提高性能？使用常規(guī)模塊系統(tǒng)，我們在程序開始時靜態(tài)導(dǎo)入模塊。無論我們現(xiàn)在還是以后需要它們，我們都必須先導(dǎo)入它們。另外，在加載時會評估來自導(dǎo)入模塊的所有代碼。因此，它不必要地減慢了應(yīng)用程序的速度。為什么？因為它會在執(zhí)行代碼之前下載導(dǎo)入的模塊并評估每個模塊的代碼。

讓我們來看一個例子。

if (calculations) {
    const calculator = await import('./calculator.js');
    const result = calculator.add(num1, num2);
    console.log(result);
}

在上面的代碼片段中，您可以看到我們僅在要執(zhí)行計算時才導(dǎo)入計算器模塊。因此，我們不會通過在運行時之前加載所有代碼來不必要地降低應(yīng)用程序的速度。因此，動態(tài)導(dǎo)入是一個方便的補充。

空位合并運算符

“空值合并運算符（??）是一種邏輯運算符，當(dāng)其左側(cè)操作數(shù)為 null 或未定義時，將返回其右側(cè)操作數(shù)，否則將返回其左側(cè)操作數(shù)。”

基本上，Nullish合并運算符使我們可以檢查值是否為 null 或未定義，并在這種情況下提供回退值。讓我們看一個例子：

let score = 0;
let pass = score ?? 60;


console.log(pass);

在上面的代碼段中，值為 pass0 。原因是 ?? 運算符不會將零強制為偽造的值。變量 pass 只得到 60 分配如果變量 score 是undefined或null。

但是，雙管道“ ||”之間有什么區(qū)別？和這個運算符？當(dāng)使用雙管道“ ||”時，它總是返回真實值，這可能會導(dǎo)致某些意外結(jié)果。當(dāng)使用空值合并運算符時，我們可以更加嚴(yán)格，因此僅當(dāng)該值為 null 或未定義時才允許使用默認(rèn)值。

例如，假設(shè)我們有以下代碼：

let score = 0;
let pass = score || 60;


console.log(pass);

在上面的示例中，使用時，值 0 被視為虛假值 || 。在上面的代碼片段中，值 pass 是 60 ，這不是我們想要的。因此，雙問號允許我們檢查變量是否為空，這意味著變量是未定義還是為空。

Promise.allSettled

使用可選的鏈接運算符，我們可以從對象訪問深度嵌套的屬性。如果屬性存在，則運算符返回其值。如果該屬性不存在，則運算符返回 undefined 。

const person = {
 name: "Catalin Pit",
 employer: {
  name: "Catalins Tech",
 }
};


console.log(person?.employer?.name);

上面的代碼段說明了訪問深度嵌套的對象屬性的示例。但是，我們可以在數(shù)組和函數(shù)調(diào)用上使用它。在下面的代碼段中，您可以看到我們檢查數(shù)組是否存在，如果存在，則訪問第三個值。此外，您還可以查看檢查 API 是否存在某個函數(shù)，如果存在，則將其調(diào)用。

const allowedValues = [1, 5, 10, 13, 90, 111];
console.log(allowedValues?.[2]);


// functional call
const response = myAPI.getData?.();

總之，可選的鏈接運算符非常方便，它還有助于我們使代碼更具可讀性和簡短性。

私有類變量

從現(xiàn)在開始，我們也可以在 JavaScript 中的類中創(chuàng)建私有變量。制作私有變量所需要做的就是在變量前面添加哈希符號。例如，#firstName 是一個私有變量，不能在類外部訪問。

嘗試在類外部調(diào)用該變量會導(dǎo)致 SyntaxError 。

class Person {
  #firstName = "Catalin";
  getFirstName() 
  { 
      console.log(this.#firstName) 
   }
}


const person1 = new Person();
person1.getFirstName() // "Catalin"


// Returns "undefined"
console.log(person1.firstName); 
// Returns "Uncaught SyntaxError: Private field '#firstName' must be declared in an enclosing class"
console.log(person1.#firstName);

在上面的代碼中，您可以看到一個私有類變量在起作用。嘗試 firstName 在類外訪問變量，我們收到一個錯誤。因此，當(dāng)我們不想在類外公開數(shù)據(jù)時，添加便很方便。

到此，關(guān)于“JavaScript ES2020的功能怎么用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>