ES2020的這些新功能令人期待

葡萄城技術團隊發表於2020-07-10

轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。

原文出處：https://blog.bitsrc.io/es2020-has-been-finalized-here-is-what-im-excited-about-414959bc2f7f

 

最近這幾年，隨著JavaScript及前端領域的持續迅猛發展，尤其是在2015年ES6釋出後，這個發展的程式也變得越來越快起來。許多新功能也將計劃包含在ES2020版本中。

前段時間，我們得到了關於ES2020已經基本定稿的功能列表，這個功能列表可以說大部分都會出現在ES2020新版本釋出列表中。而在這其中的部分功能我認為將備受期待，因為作為一個開發者，在這些功能違背釋出之前，在編碼時遇到一些難題需要我們自己去解決。那麼，讓我們看看這些功能都是什麼吧。

 

可選連結

就我個人而言，我認為這是ES2020最令人期待的功能之一，這個功能使你可以安全地訪問物件的深層巢狀屬性，而不必檢查每個屬性是否存在。那麼，Talk is cheap. Show me the code，讓我們看看實際在程式碼層面有什麼改變吧。

在使用可選連結之前的程式碼：

const user = {
   firstName:"Joseph",
   lastName:"Kuruvilla",
   age:38,
   address:{
      number:"239",
      street:"Ludwig Lane",
      city:"Chennai",
      zip:"600028",
   prop1:{
    prop2:{
     prop3:{
      prop4:{
       value:'sample'
      }
     }
    }
   }
   }
}

 

if(user && user.address){
 console.log(user.address.zip); //600028
}
 
if(user && user.address && user.address.prop1 && user.address.prop1.prop2 && user.address.prop1.prop2.prop3 && user.address.prop1.prop2.prop3.prop4){
 console.log(user.address.prop1.prop2.prop3.prop4.value);
}

//訪問不存在的屬性
console.log(user.address.prop102.po);
//Error

　　

如上所示，在訪問屬性前，你必須檢查所訪問層級中的屬性是否存在，以防止出現Cannot read property 'po' of undefined錯誤。而隨著巢狀級別的增加，你手動檢查的屬性數量也將隨之增加。這意味著一旦我們漏過一項，將會在程式中引發undefined或null物件錯誤，導致應用出現問題。

可選連結功能出現後

而隨著可選連結功能的出現，我們的工作將會變得比較輕鬆，通過使用可選連結運算子“?.”我們可以訪問深度巢狀的物件，而不必檢查其是否未定義或null物件。

讓我們看看它是如何使用的：

const user = {
   firstName:"Joseph",
   lastName:"Kuruvilla",
   age:38,
   address:{
      number:"239",
      street:"Ludwig Lane",
      city:"Chennai",
      zip:"600028",
   prop1:{
prop2:{
     prop3:{
      prop4:{
       value:'sample'
      }
     }
    }
   }
   }
}console.log(user?.address?.zip);
//600028
console.log(user?.address?.prop1?.prop2?.prop3?.prop4?.value);
//sample
//Accessing unexisting property
console.log(user?.address?.prop102?.po);
//undefined

　　

ES2020通過引入一個 ?. 操作符成功減少了許多程式碼。

 

空值合併（Nullish Coalescing）

當我第一次聽說這個功能時，我認為這是另一個令人值得期待的功能，因為我就曾因為在大量重複手動實現該功能時，非常期待有類似這個功能的出現。

空值合併可以讓你檢查nullish值而不是falsey值。nullish值是指null或undefined，falsey值是指空字串，數字0， undefined，null，false，NaN，等值。雖然看起來好像這兩個值沒什麼區別，但實際上差異卻很大。

在空值合併之前

我最近在做一個專案，其中需要增加暗夜模式的切換功能。我必須檢查輸入是否為 true或者false。如果使用者沒有設定任何值，預設它應該為true。下面是我如何在空值合併出現前實現它的程式碼。

const darkModePreference1 = true
const darkModePreference2 = false
const darkModePreference3 = undefined
const darkModePreference4 = null
 
const getUserDarkModePreference = (darkModePreference) => {
  if (darkModePreference || darkModePreference === false) {
    return darkModePreference
  }
  return true
}
 
getUserDarkModePreference(darkModePreference1)
// true
 
getUserDarkModePreference(darkModePreference2)
// false
 
getUserDarkModePreference(darkModePreference3)
// true
 
getUserDarkModePreference(darkModePreference4)
// true

　　

在空值合併出現後

在使用空值合併後，你所要做的就是使用??操作符。不再需要 if 語句。

const darkModePreference1 = true
const darkModePreference2 = false
const darkModePreference3 = undefined
const darkModePreference4 = null
 
const getUserDarkModePreference = (darkModePreference) => {
  return darkModePreference ?? true;
}
getUserDarkModePreference(darkModePreference1)
// true
 
getUserDarkModePreference(darkModePreference2)
// false
 
getUserDarkModePreference(darkModePreference3)
// true
 
getUserDarkModePreference(darkModePreference4)
// true

這裡的邏輯是，如果變數darkModePreference包含一個空值，那麼就把true賦給它，使用這個特性的程式碼簡單易懂。

 

動態匯入

此功能將幫助你的應用更高效地執行。動態匯入允許你實時地在應用中以模組的形式按需匯入JS檔案。在ES2020之前，無論你是否使用了該模組，都應該提前匯入它。

例如，假設我們需要新增一個功能來下載一個pdf格式的檔案。

讓我們看看如何在動態匯入之前和之後如何實現這一點有什麼異同。

動態匯入之前

在實際專案中，下載pdf的功能不會被所有的網站訪客使用。但是，不管我們的訪問者是否使用它，它都需要匯入。這意味著這個pdf模組也會在頁面載入時被載入。

import { exportAsPdf } from './export-as-pdf.js'

const exportPdfButton = document.querySelector('.exportPdfBtn');
exportPdfButton.addEventListener('click', exportAsPdf);

　　

這種開銷可以通過使用延遲載入模組來減少。可以通過程式碼分離（code-splitting）來實現，程式碼分離已經可以通過webpack或其他模組打包工具來實現。

但是在ES2020中我們以原生的方式來實現這個功能，不再需要模組打包工具等其他方式減少開銷了。

動態匯入之後

const exportPdfButton = document.querySelector('.exportPdfBtn');

exportPdfButton.addEventListener('click', () => { 
     import('./export-as-pdf.js')
.then(module => {
      module.exportAsPdf()
    })
    .catch(err => {
      // handle the error if the module fails to load
    })
})

　　

如上面的程式碼中所看到的那樣，現在可以按需載入所使用的模組，從而減少應用的開銷和頁面載入時間。

 

Promise.allSettled

如果你有這樣一個場景，一旦所有的promise都完成了，就必須執行一個任務，你會使用Promise.all()方法。這個方法有一個缺點。當任何一個promise被拒絕時，都會丟擲一個錯誤。這意味著你的程式碼不會等到你所有的promise都完成。

這可能不是你想要的。如果你的需求是不關心它們的結果，只需將它們全部執行，你可以使用新的Promise.allSettled()方法。這種方法只有在你所有的promise都執行完成之後才會呼叫。

使用 promise.all

const PromiseArray = [
    Promise.resolve(100),
    Promise.reject(null),
    Promise.resolve("Data release"),
    Promise.reject(new Error('Something went wrong'))];
 
Promise.all(PromiseArray)
  .then(data => console.log('all resolved! here are the resolve values:', data))
  .catch(err => console.log('got rejected! reason:', err))
 
//got rejected! reason: null

　　

如上面的程式碼，當一個promise失敗時，會引發錯誤。

使用 promise.allSettled

const PromiseArray = [
    Promise.resolve(100),
    Promise.reject(null),
    Promise.resolve("Data release"),
    Promise.reject(new Error('Something went wrong'))];
 
Promise.allSettled(PromiseArray).then(res =>{
console.log(res);
}).catch(err => console.log(err));
 
//[
//{status: "fulfilled", value: 100},
//{status: "rejected", reason: null},
//{status: "fulfilled", value: "Data release"},
//{status: "rejected", reason: Error: Something went wrong ...}
//]

　　

即使有些promise被拒絕，Promise.allSettled仍然會在所有promise執行完成後為你返回結果。

 

其他也很令人期待的功能

BigInt

允許你使用比Javascript中允許的最大值大的數字。這個數字是pow(2，53)-1。不過這並不是向後相容的，因為傳統的浮點數標準(IEEE 754)不支援這種大小的數字。

String.matchAll

matchAll() 是一個和正規表示式相關的方法。它返回一個包含所有匹配正規表示式的結果及分組捕獲組的迭代器。這個方法新增到了 String 原型裡。

globalThis

globalThis是對全域性物件的引用，與環境無關。在瀏覽器中，全域性物件是window物件。在Node環境中，全域性物件是global物件，在web worker中是self。

 

總結

本文中有些功能是我以個人角度總結梳理的，如果缺少了哪個功能或有我理解有誤的地方，歡迎大家在評論中指出，謝謝！

相關文章