ES2020 已定稿！赶紧上手实践一下吧（真实场景例子）

译原文：blog.bitsrc.io/es2020-has-…
作者：Mahdhi Rezvi
译：图雀社区

近年来，JavaScript 的发展非常迅速。尤其是在2015 年 ES6 发布之后，情况变得更好。

现在许多新的特性被提议包括在 ES2020版本中。好消息是这些已经已经敲定。现在，我们获得了最终定稿的功能清单，它们将在被批准发布之后出现在备受期待的 ES2020 中。其中一些功能使我非常兴奋，因为在它们存在之前编写代码时遇到将会遇到很多麻烦。让我们看看它们是什么吧！

可选链操作符（Optional Chaining Operator）

对我个人来说，这是 ES2020最令人兴奋的特点之一。我已经编写了很多程序，这些程序将会从这个新特性中获益匪浅。

可选链操作符允许您安全地访问对象的深嵌套属性，而不必检查每个属性是否存在。让我们看看这个特性对我们有什么帮助。

拥有可选链操作符之前

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
}

//Accessing unexisting property
console.log(user.address.prop102.po);
//Error
复制代码

正如您在上面看到的，您必须检查每个级别中是否存在该属性，以避免出现无法读取未定义属性“ po”的错误。随着嵌套级别的增加，手动检查的属性数量也会增加。这意味着我们必须检查每个级别，以确保它不会在遇到未定义或空对象时崩溃。

拥有可选链式操作符之后

随着可选链式操作符 (Optional Chaining) 的引入，我们前端的工作变得容易多了。通过简单地使用可选链式操作符 ?. 我们可以访问深嵌套的对象，而不必检查未定义或空对象。

让我们看看它是如何运作的。

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 operator）

这是另一个令我兴奋的功能，当我第一次在 proposal stage，了解到的时候，我由衷的喜欢这个特性，因为我已经历了编写单独的函数来手动检查这个特性的麻烦。

空值合并操作符允许您检查 nullish 值而不是 falsey 值。 Nullish 值是指 null 或 undefined 的值。而 falsey 值是诸如空字符串、数字0、 undefined 、 null 、 false 、 NaN 等等的值。这对你来说可能听起来没什么不同，但是在现实中，这意味着很多。

让我们看看这是怎么回事。

在有空值合并操作符之前

我最近做了一个项目，我需要允许黑暗模式（Dark Mode）切换功能。我必须检查输入是 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 包含一个 nullish 值，那么将值 true 赋给它。简单，简短，易于理解。

动态 import（Dynamic Imports）

这个特性将帮助您的应用程序更加高效的执行，动态 import 允许您将 JS 文件作为原生应用用程序中的模块动态导入。在 ES2020之前，不管是否使用模块，都应该导入模块。

例如，假设我们需要添加一个功能来下载 pdf 格式的文件。

让我们看看如何在动态 import 之前和之后实现这一点。

在动态 import 之前

实际上，不会所有的页面访问者使用下载 pdf 的选项。但是，无论我们的访客是否使用它，它仍然需要被导入。这意味着这个 pdf 模块也可以在页面加载期间被下载。

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

这种开销可以通过使用延迟加载模块（lazy loaded modules）来减少。可以通过称为代码分割（code-splitting）的方法来实现，这在 Webpack 或其他模块打包工具已经可以使用了。但是对于 ES2020，我们可以直接使用它了，而不需要模块打包工具，如 Webpack。

在动态导入（动态 import）之后

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 被 Rejected 时，Promise 方法就会抛出一个错误。这意味着您的代码不会等到所有的 Promise 都完成。

这可能不是你想要的。如果你想要这样的东西: “我不在乎他们的结果。只需全部运行” ，那么你可以使用新的 Promise.allSettled() 方法。这种方法只有在你的所有 Promise 都 settled ーー要么 Resolved ，要么 Rejected ーー时才会 Resolved 。

在拥有 Promise.allSettled 之前

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 被 rejected 时， 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 被 rejected 了，Promise.allSettled 返回了所有的 Promise 的结果。

globalThis

globalThis 包含对全局对象的引用，与环境无关。在浏览器中，全局对象是 window 对象。在 Node 环境中，全局对象是 global 或者 Web workers 中的 self。

在拥有 globalThis 之前

我们在工作中会有需要编写一份同时运行在 Node 和浏览器中的通用代码，当我们要取得全局对象时，通常需要做很多工作和逻辑判断：

beforeGlobalThis = (typeof window !== "undefined"
? window
: (typeof process === 'object' &&
   typeof require === 'function' &&
   typeof global === 'object')
    ? global
    : this);

beforeGlobalThis.tuture = '小若燕雀，亦可一展宏图';
复制代码

在拥有 globalThis 之后

我们可以直接使用 globalThis 去引用全局对象，而不用去担心环境的问题：

globalThis.tuture = '小若燕雀，亦可一展宏图';
复制代码

上面的代码在浏览器或者 Node 环境中都是通用的，你可以放心使用！

BigInt

允许您使用大于 Javascript 中允许的最大值的数字。这个数字是 pow(2,53)-1 。尽管这不能向后兼容，因为传统的数字系统(IEEE 754)不能支持这种大小的数字。

String.matchall

matchAll() 是一个与正则表达式相关的方法。此方法返回与正则表达式匹配的字符串的所有结果的迭代器，包括捕获组。这个方法已经被添加到 String 原型中。

ES2020 中那个特性最让你兴奋？欢迎在评论中发表你的看法！✌️

Happy Coding!

参考资源

想要学习更多精彩的实战技术教程？来图雀社区逛逛吧。

提示

根据我国《网络安全法》，您需要绑定手机号后才可在掘金社区内发布内容。

ES2020 已定稿！赶紧上手实践一下吧（真实场景例子）

可选链操作符（Optional Chaining Operator）

拥有可选链操作符之前

拥有可选链式操作符之后

空值合并操作符（Nullish coalescing operator）

在有空值合并操作符之前

在有空值合并操作符之后

动态 import（Dynamic Imports）

在 动态 import 之前

在动态导入（动态 import）之后

Promise.allSettled

在拥有 Promise.allSettled 之前

在拥有 Promise.allSettled 之后

globalThis

在拥有 globalThis 之前

在拥有 globalThis 之后

BigInt

String.matchall

参考资源

在动态 import 之前