(内含 Vue 3 学习资料群)JavaScript:ECMAScript 2020中的新增功能

感兴趣的可以加微信群

如果过期可以底下留言,或者关注我的微信公众号 《人生代码》《人生代码》《人生代码》,回复进群,加我微信,拉你进群,重要的事情说三遍。

JavaScript即将推出令人兴奋的新功能!

即使新ECMAScript 2020(ES2020)语言规范的最终批准已经在六月,您也可以立即开始尝试一下!

处理模块

一些重要的创新涉及模块。其中,开发人员长期以来一直要求的功能是动态导入。但是,让我们按顺序进行详细介绍。

动态导入

当前的模块导入机制基于静态声明,如下所示:

import * as MyModule from "./my-module.js";

该语句有两个约束:
在当前模块的加载时间评估导入模块的所有代码
该模块的说明符("./my-module.js"在上面的示例中)是一个字符串常量,您不能在运行时更改它

这些约束阻止有条件或按需加载模块。同样,在加载时评估每个相关模块也会影响应用程序的性能。
新import()语句通过允许您动态导入模块来解决了这些问题。该语句接受模块说明符作为参数并返回promise。同样,模块说明符可以是任何返回字符串的表达式。这是个好消息,因为我们现在可以在运行时加载JavaScript模块,如以下示例所示:

const baseModulePath = "./modules";
const btnBooks = document.getElementById("btnBooks");
let bookList = [];

btnBooks.addEventListener("click", async e => {
  const bookModule = await import(`${baseModulePath}/books.js`);

  bookList = bookModule.loadList();
});

该代码显示books.js了用户单击btnBooks按钮时如何正确加载模块。加载模块后,click事件处理程序将使用loadList()模块导出的功能。请注意如何通过字符串插值指定要导入的模块。
导入元数据
该import.meta对象提供当前模块的元数据。JavaScript引擎创建了它,其当前可用属性为url。此属性的值是从中加载模块的URL,包括任何查询参数或哈希。
例如,您可以使用该import.meta.url属性来构建data.json存储在当前模块相同文件夹中的文件的URL 。以下代码获得此结果:

const dataUrl = new URL("data.json", import.meta.url);

在这种情况下,会import.meta.url为URL该类提供data.json文件的基本URL 。

新的导出语法

importECMAScript 2015规范引入的声明为您提供了多种形式的模块导入。以下是一些示例:

import {value} from "./my-module.js";
import * from "./my-module.js";

在某些情况下,您可能需要导出从另一个模块导入的对象。方便的export语法可能会对您有所帮助,如下所示:

export {value} from "./my-module.js";
export * from "./my-module.js";

从开发人员的经验来看,导入和导出语句之间的这种对称性很方便。但是,在这些新规范之前不支持特定情况:

import * as MyModule from "./my-module.js";

要导出MyModule名称空间,应使用两个语句:

import * as MyModule from "./my-module.js";
export {MyModule};

现在,您可以通过一条语句获得相同的结果,如下所示:

export * as MyModule from "./my-module.js";

这种添加简化了您的代码,并使import和export语句之间保持对称。

数据类型和对象

新的ES2020规范引入了新的数据类型,标准化的全局对象以及一些简化开发人员生活的方法。让我们来看看。

BigInt和任意精度整数

如您所知,JavaScript只有一种数据类型:数字Number。这种原始类型允许您表示64位浮点数。当然,它也表示整数,但是最大可表示值为2 53,对应于Number.MAX_SAFE_INTEGER常数。
在不涉及整数表示的内部细节的情况下,有些情况下您可能需要更高的精度。考虑以下情况:
与其他提供64位整数数据的系统(例如GUID,帐号或对象ID)进行交互
需要超过64位的复杂数学计算的结果

第一种情况的解决方法是将数据表示为字符串。当然,这种解决方法不适用于第二种情况。
新的BigInt数据类型旨在解决这些问题。您可以BigInt通过将字母简单地附加n到数字来表示文字,如以下示例所示:

const aBigInteger = 98765432123456789n;

您也可以像使用BigInt()构造函数一样使用Number()构造函数:

const aBigInteger = BigInt("98765432123456789");

typeof现在,运算符将"bigint"应用于BigInt值的字符串返回:

typeof aBigInteger      //output: "bigint"

请记住,Number并且BigInt是不同类型的,所以你不能将它们混合。例如,尝试将Number值添加到BigInt值会引发TypeError异常,如下图所示:

您必须使用构造函数将Number值显式转换为值。BigIntBigInt()

用于正则表达式的matchAll()方法

您可以通过多种方式获取给定正则表达式的所有匹配项。以下是这些方法之一,但是您可以使用其他方法:

const regExp = /page (\d+)/g;
const text = 'text page 1 text text page 2';
let matches;

while ((matches = regExp.exec(text)) !== null) {
  console.log(matches);
}

此代码通过迭代匹配变量中的所有page x实例text。在每次迭代时,该exec()方法都会在输入字符串上运行,并且您将获得如下结果:

["page 1", "1", index: 5, input: "text page 1 text text page 2", groups: undefined]
["page 2", "2", index: 22, input: "text page 1 text text page 2", groups: undefined]

该matchAll()方法String的对象,您可以得到相同的结果,但在更紧凑的方式和更好的性能。下面的示例使用此新方法重写以前的代码:

const regExp = /page (\d+)/g;
const text = 'text page 1 text text page 2';
let matches = [...text.matchAll(regExp)];

for (const match of matches) {
  console.log(match);
}

该matchAll()方法返回一个迭代器。前面的示例使用传播运算符将迭代器的结果收集到数组中。

全局对象

访问全局对象需要不同的语法,具体取决于JavaScript环境。例如,在浏览器中,全局对象是window,但是您不能在Web Worker中使用它。在这种情况下,您需要使用self。另外,在Node.js中,全局对象是global。
在编写旨在在不同环境中运行的代码时,这会导致问题。您可能使用了this关键字,但是它undefined在以严格模式运行的模块和函数中。
该globalThis对象提供了一种跨不同JavaScript环境访问全局对象的标准方法。因此,现在您可以以一致的方式编写代码,而不必检查当前的运行环境。但是请记住,要尽量减少使用全局项,因为这被认为是不好的编程习惯。

Promise.allSettled()方法

目前,JavaScript有两种方法来组合诺言:Promise.all()和Promise.race()。
两种方法都将一个promise数组作为参数。以下是使用示例Promise.all():

const promises = [fetch("/users"), fetch("/roles")];
const allResults = await Promise.all(promises);

Promise.all()当所有的诺言都实现时,返回一个诺言。如果至少一个诺言被拒绝,则返回的诺言被拒绝。最终承诺的拒绝原因与第一个拒绝的承诺相同。
当至少一个承诺被拒绝时,这种行为无法为您提供直接获得所有承诺结果的方法。例如,在上面的代码中,如果fetch("/users")失败并且相应的诺言被拒绝,您将没有一个简单的方法来知道的诺言fetch("/roles")是兑现还是被拒绝。要获得此信息,您必须编写一些其他代码。
新的Promise.allSettled()组合器将等待所有诺言的兑现,无论其结果如何。因此,以下代码可让您知道每个诺言的结果:

const promises = [fetch("/users"), fetch("/roles")];
const allResults = await Promise.allSettled(promises);
const errors = results
  .filter(p => p.status === 'rejected')
  .map(p => p.reason);

特别是,此代码使您知道每个被拒绝的承诺失败的原因。

新运营商

几个新的运算符将使在非常常见的操作中更容易编写和阅读代码。猜猜哪一个?

空合并运算符

您看过多少次并使用了以下表达式?

const size = settings.size || 42;

||当您尝试分配的默认值是null或时,通常使用运算符来分配默认值undefined。但是,这种方法可能会导致一些潜在的意外结果。
例如,size上面示例中的常量42也将在settings.sizeis的值时被赋值0。但是,当值的默认值也将被指定settings.size为""或false。
为了克服这些潜在的问题,现在您可以使用无效的合并运算符(??)。先前的代码如下:

const size = settings.size ?? 42;

这允许仅在值为is或时42将默认值分配给size常数。settings.sizenullundefined

可选链接

考虑以下示例:

const txtName = document.getElementById("txtName");
const name = txtName ? txtName.value : undefined;

您txtName将从当前HTML文档中获得带有其标识符的文本框。但是,如果文档中不存在HTML元素,则txtName常量将为null。因此,在访问其value属性之前,必须确保txtName不是null或undefined。
可选的链接运算符(?.)使您可以拥有更紧凑,更易读的代码,如下所示:

const txtName = document.getElementById("txtName");
const name = txtName?.value;

与前面的示例一样,该name常量的值将为txtName.valueif txtNameis notnull或undefined;; undefined除此以外。
在如下所示的复杂表达式中,此运算符的优点得到了更多的赞赏:

const customerCity = invoice?.customer?.address?.city;

您还可以将可选的链接运算符应用于动态属性,如以下示例所示:

const userName = user?.["name"];

此外,它也适用于函数或方法调用:

const fullName = user.getFullName?.();

在这种情况下,如果该getFullName()方法存在,则将执行该方法。否则,表达式返回undefined。

使用新功能

在整篇文章中,您对ES2020的新功能进行了概述,并且您可能想知道何时才能使用它们。
根据caniuse.com的资料,所有最近的主流浏览器(但Internet Explorer)已经支持ECMAScript 2020带来的新功能。但是,在撰写本文时,Safari并不支持新的BigInt数据类型和matchAll()方法。
在Node.js的最新版本,支持所有功能,以及包括动态导入的启用ECMAScript的模块。
最后,Babel和TypeScript等最受欢迎的编译器的最新版本也使您可以使用最新的ES2020功能。

旁:使用JavaScript进行Auth0身份验证
在Auth0,我们大量使用了全栈JavaScript来帮助客户管理用户身份,包括密码重置,创建,供应,阻止和删除用户。因此,毫无疑问,在JavaScript Web应用程序上使用我们的身份管理平台简直是小菜一碟。
Auth0提供了一个免费层,可以开始使用现代身份验证。签出,或在此处注册免费的Auth0帐户!
然后,转到Auth0信息中心的“应用程序”部分,然后单击“创建应用程序”。在显示的对话框上,设置应用程序的名称,然后选择“单页Web应用程序”作为应用程序类型:

创建应用程序后,单击“设置”,并记下分配给您的应用程序的域和客户端ID。另外,将“允许的回调URL”和“允许的注销URL”字段设置为将处理Auth0的登录和注销响应的页面的URL。在当前示例中,页面的URL将包含您要编写的代码(例如http://localhost:8080)。
现在,在您的JavaScript项目中,如下安装auth0-spa-js库:

npm install @auth0/auth0-spa-js

然后,在您的JavaScript应用中实现以下内容:

import createAuth0Client from '@auth0/auth0-spa-js';

let auth0Client;

async function createClient() {
  return await createAuth0Client({
    domain: 'YOUR_DOMAIN',
    client_id: 'YOUR_CLIENT_ID'
  });
}

async function login() {
  await auth0Client.loginWithRedirect();
}

function logout() {
  auth0Client.logout();
}

async function handleRedirectCallback() {
  const isAuthenticated = await auth0Client.isAuthenticated();

  if (!isAuthenticated) {
    const query = window.location.search;
    if (query.includes("code=") && query.includes("state=")) {
      await auth0Client.handleRedirectCallback();
      window.history.replaceState({}, document.title, "/");
    }
  }

  await updateUI();
}

async function updateUI() {
  const isAuthenticated = await auth0Client.isAuthenticated();

  const btnLogin = document.getElementById("btn-login");
  const btnLogout = document.getElementById("btn-logout");

  btnLogin.addEventListener("click", login);
  btnLogout.addEventListener("click", logout);

  btnLogin.style.display = (isAuthenticated ? "none" : "block");
  btnLogout.style.display = (isAuthenticated ? "block" : "none");

  if (isAuthenticated) {
    const username = document.getElementById("username");
    const user = await auth0Client.getUser();

    username.innerText = user.name;
  }
}

window.addEventListener("load", async () => {
  auth0Client = await createClient();

  await handleRedirectCallback()
});

将YOUR_DOMAIN和YOUR_CLIENT_ID占位符替换为您在Auth0信息中心中找到的域和客户端ID的实际值。
然后,使用以下标记创建UI:

Welcome

您的应用程序已准备好通过Auth0进行身份验证!
请查看Auth0 SPA SDK文档,以了解有关使用JavaScript和Auth0进行身份验证和授权的更多信息。

你可能感兴趣的