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

文章來源于公眾號：前端人

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

• 動態(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)入是一個方便的補充。

空位合并運算符

“空值合并運算符（??）是一種邏輯運算符，當其左側(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ǎo)致某些意外結(jié)果。當使用空值合并運算符時，我們可以更加嚴格，因此僅當該值為 null 或未定義時才允許使用默認值。

例如，假設(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 在類外訪問變量，我們收到一個錯誤。因此，當我們不想在類外公開數(shù)據(jù)時，添加便很方便。

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

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