JavaScript ES2020-您應該知道的功能

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

ES2020 或 ECMAScript 2020 為 JavaScript 帶來了令人興奮的功能。在本文中，我想談談我最喜歡的 ES2020 功能。這意味著本文并未涵蓋所有新增內容。因此，讓我們看看我最喜歡的新功能：

• 動態(tài)導入
• 空位合并運算符
• 可選鏈接運算符
• 私有類變量Private
• Promise.allSettled
• 有關更多信息和所有其他內容，請查看官方的ECMAScript語言規(guī)范

動態(tài)導入

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

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

讓我們來看一個例子。

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

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

空位合并運算符

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

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

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


console.log(pass);

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

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

例如，假設我們有以下代碼：

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ù)調用上使用它。在下面的代碼段中，您可以看到我們檢查數(shù)組是否存在，如果存在，則訪問第三個值。此外，您還可以查看檢查 API 是否存在某個函數(shù)，如果存在，則將其調用。

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


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

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

私有類變量

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

嘗試在類外部調用該變量會導致 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ù)時，添加便很方便。

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

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