🍧 🧑🏿‍🤝‍🧑🏾 ✍🏾 我非常喜欢的ES2020创新 🎀 🤪 🤯

近年来，JavaScript的发展非常迅速。对于2015年发布ES6标准之后的时期尤其如此。从那时起，该语言中出现了许多很棒的功能。已提议将许多新内容包含在ES2020标准中。已经形成了最终的功能列表，可以在标准获得批准后期待其外观。对于所有JS爱好者来说，这都是个好消息。这篇文章的作者（我们今天将要翻译的译本）说，在这些机会中，有一些让他特别高兴的机会。在它们出现之前，他很难在适用的情况下编写代码。据他说，如果他们早点出现在该语言中，那将为他节省很多时间和精力。

可选链

就我个人而言，可选链接是ES2020标准最令人兴奋的功能之一。我编写了许多程序，其中的该功能将非常有用。

可选链使您可以组织对对象的深层嵌入属性的安全访问，而无需验证每个对象的存在。看一下此功能的工作原理。

首先，看看在可选链出现之前必须编写的代码。

of可选链出现之前的代码

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);
 //sample
}
//    
console.log(user.address.prop102.po);
//Error

如您所见，为了避免错误的发生，看来Cannot read property 'po' of undefined，在嵌套的每个级别上，都必须检查属性是否存在。随着实体嵌套深度的增加，选中的属性的数量也增加。这意味着程序员自己必须编写代码来保护它免受访问时可能会碰到null或值的属性的影响undefined。

of可选链出现后的代码

像我们刚刚回顾过的代码一样，编写代码使可选链的出现变得更加容易。要组织具有深层嵌入特性的安全工作，只需使用操作员即可?.。它使我们免于独立检查on null和undefined。

看起来是这样的：

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
//    
console.log(user?.address?.prop102?.po);
//undefined

好吧，好吗？由于这项创新，ES2020使摆脱大量代码行成为可能。

仅验证空值和未定义的值

仅在null和undefined（Nullish Coalescing）上检查值是使功能感到高兴的那些功能之一，即使可能在提议阶段也是如此。我经常碰到需要编写专门的函数来执行适当的检查的需求。

众所周知，JavaScript具有“假”和“真”的含义。现在我们可以说添加了``零''值。这些值包括null和undefined。以“虚假”的JavaScript条款是空字符串，数字0，值undefined，null，false，NaN。也就是说，例如，用于检查“假性”值的某个表达式将对空字符串和值起作用undefined，还有更多内容。用于检查其值是否为“零”的表达式将true仅针对null和返回undefined。也许这个机会对您个人而言似乎并不那么美妙，但实际上，它非常非常重要。

让我们看一些例子。

▍代码直到只能检查null和undefined的值为止

最近，我正在一个项目中，我需要实现在明亮和黑暗主题之间切换的功能。同时，我必须检查控件的状态，找出它是否对应于true或的值false。如果用户未设置任何值，则默认情况下，该值应等于true。这是我仅在nulland 上检查值之前解决此问题的方法undefined：

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

▍仅在null和undefined上检查值的可能性之后进行编码

一旦此功能以检查语言null和undefined足够的运算符出现??。您可以不使用条件语句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格式加载特定文件的功能。

与往常一样，请考虑解决此问题的新旧选项。

support支持动态导入之前的代码

根据实际情况，我们可以预期页面的所有访问者都不会使用PDF格式的资料下载功能。但是无论如何，都需要将相应的模块导入代码中。这意味着该模块（无论是否需要）将在页面加载时加载。

import { exportAsPdf } from './export-as-pdf.js'
const exportPdfButton = document.querySelector('.exportPdfBtn');
exportPdfButton.addEventListener('click', exportAsPdf);

这在系统上创建了一个额外的负载，可以通过使用模块的延迟加载来促进此负载。这可以使用代码分离技术来完成，该技术可以在webpack或其他模块加载器中使用（其本身使用意味着花费一定数量的系统资源）。

但是现在，由于有了ES2020，我们有了一种动态加载模块的标准方法，这使我们无需捆绑器即可完成工作。

▍代码出现后支持动态导入

const exportPdfButton = document.querySelector('.exportPdfBtn');
exportPdfButton.addEventListener('click', () => {
  import('./export-as-pdf.js')
    .then(module => {
      module.exportAsPdf()
    })
    .catch(err => {
      //      -  
    })
})

如您所见，现在您可以仅在需要适当的模块时通过加载来组织模块的延迟加载。这样可以减少系统负载并提高页面加载速度。

构造Promise.allSettled

如果仅在所有承诺均已成功解决后才需要执行某些操作，则可以使用method Promise.all()。的确，这种方法有一个缺点。如果传递给它的至少一个诺言被拒绝，则该方法将引发错误。这意味着在成功解决所有承诺之前，将不会执行必要的操作。

您可能不需要这个。也许以下情况适合您：“结果对我而言并不重要。我需要在所有承诺完成后执行代码。” 在这种情况下，该方法对您很有用Promise.allSettled()。相应的承诺只有在其他承诺完成后才能成功解决。他们工作成功与否并不重要。

using使用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.all在拒绝转移给它的承诺之一后产生了错误。

uses使用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.allSettled返回了转移给它的所有承诺所发布的结果。

其他显着特征

▍BigInt数据类型

新的数据类型BigInt使您可以处理长度超过JavaScript出现之前可以使用的数字长度（pow(2,53)-1）的数字。是的，此数据类型与以前的语言向后不兼容。IEEE 754标准是使用JavaScript处理数字的基础，但不支持可能使用的数字BigInt

▍String.prototype.matchAll方法

该方法String.prototype.matchAll()与正则表达式有关。它返回一个迭代器，使您可以使用正则表达式（包括groups）处理在字符串中找到的所有匹配项。

▍全球房地产globalThis

全局属性globalThis持有对与执行代码的环境相对应的全局对象的引用。在浏览器中，全局对象由object表示window。在Node.js中，这是一个object global。在网络工作者中，这是一个对象self。

您最喜欢ES2020哪些创新？

我非常喜欢的ES2020创新

可选链