App下載

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

猿友 2020-09-10 11:30:51 瀏覽數(shù) (2880)
反饋

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

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ù)?!?/p>

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

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


console.log(pass);

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

但是,雙管道“ ||”之間有什么區(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)介紹了,希望對大家有所幫助。

0 人點贊