JavaScript ES2020-您應(yīng)該知道的功能

文章來(lái)源于公眾號(hào)：前端人

ES2020 或 ECMAScript 2020 為 JavaScript 帶來(lái)了令人興奮的功能。在本文中，我想談?wù)勎易钕矚g的 ES2020 功能。這意味著本文并未涵蓋所有新增內(nèi)容。因此，讓我們看看我最喜歡的新功能：

• 動(dòng)態(tài)導(dǎo)入
• 空位合并運(yùn)算符
• 可選鏈接運(yùn)算符
• 私有類(lèi)變量Private
• Promise.allSettled
• 有關(guān)更多信息和所有其他內(nèi)容，請(qǐng)查看官方的ECMAScript語(yǔ)言規(guī)范

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

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

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

讓我們來(lái)看一個(gè)例子。

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

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

空位合并運(yùn)算符

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

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

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


console.log(pass);

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

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

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

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


console.log(pass);

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

Promise.allSettled

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

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


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

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

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


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

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

私有類(lèi)變量

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

嘗試在類(lèi)外部調(diào)用該變量會(huì)導(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); 

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

文章中的補(bǔ)充內(nèi)容并非唯一。還有更多，我鼓勵(lì)您查看官方的 ECMAScript 語(yǔ)言規(guī)范來(lái)查看所有這些內(nèi)容。

以上就是W3Cschool編程獅關(guān)于JavaScript ES2020-您應(yīng)該知道的功能的相關(guān)介紹了，希望對(duì)大家有所幫助。