ES2020的這些新功能令人期待-有解無憂

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

原文出處：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 =https://www.cnblogs.com/powertoolsteam/p/> 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，

總結

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/43740.html

標籤：JavaScript

上一篇：JavaScript連載23-String物件及其常用方法

下一篇：Bootstrap4 表格練習