1826 字
9 分钟
ES2020新特性

ES2020 已经发布了,一共出 9 个新特性,下面让我们一起来了解下。

String.prototype.matchAll()#

可一次性取出所有匹配,但是返回的是一个遍历器(Iterator),而非数组。可以用 for of 循环取出。相对于返回数组,返回遍历器的好处在于,如果遍历结果是一个很大的数组,那么遍历器比较节省资源。遍历器转换成数组,也是比较方便,可以使用…运算符和 Array.from()就可以了。

let str = "<text>JS</text><text>正则</text>";

let reg = /<\w+>(.*?)<\/\w+>/; // 注意这里没有全局搜素标示符“g”

str.match(reg);
/*
=>
[
  0: "<text>JS</text>"
  1: "JS"
  groups: undefined
  index: 0
  input: "<text>JS</text><text>正则</text>"
  length: 2
  [[Prototype]]: Array(0)
]
*/

这样可以获取到匹配的父项,包括子项(group),但只能获取到第一个满足的匹配字符。能看出上面无法匹配到正则。 如果获取到全局所有匹配项,包括子项呢? ES2020 提供了一种简易的方式:String.prototype.matchAll, 该方法会返回一个迭代器。

let str = "<text>JS</text><text>正则</text>";
let allMatchs = str.matchAll(/<\w+>(.*?)<\/\w+>/g);

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

/*
第一次迭代返回:
[
  0: "<text>JS</text>"
  1: "JS"
  groups: undefined
  index: 0
  input: "<text>JS</text><text>正则</text>"
  length: 2
  [[Prototype]]: Array(0)
]

第二次迭代返回:
[
  0: "<text>正则</text>"
  1: "正则"
  groups: undefined
  index: 15
  input: "<text>JS</text><text>正则</text>"
  length: 2
  [[Prototype]]: Array(0)
]
*/

能看出每次迭代中可获取所有的匹配,以及本次匹配的成功的一些其他元信息。

dynamic-import#

按需 import 提案几年前就已提出,如今终于能进入 ES 正式规范。这里个人理解成“按需”更为贴切。现代前端打包资源越来越大,打包成几 M 的 JS 资源已成常态,而往往前端应用初始化时根本不需要全量加载逻辑资源,为了首屏渲染速度更快,很多时候都是按需加载,比如懒加载图片等。而这些按需执行逻辑资源都体现在某一个事件回调中去加载。

el.onclick = () => {
  import(`/path/current-logic.js`)
    .then((module) => {
      module.doSomthing();
    })
    .catch((err) => {
      // load error;
    });
};

BigInt#

Js 中 Number 类型只能安全的表示-(2^53-1)至 2^53-1 范的值,即Number.MIN_SAFE_INTEGERNumber.MAX_SAFE_INTEGER,超出这个范围的整数计算或者表示会丢失精度。

let num = Number.MAX_SAFE_INTEGER; // -> 9007199254740991

num = num + 1; // -> 9007199254740992

// 再次加 +1 后无法正常运算
num = num + 1; // -> 9007199254740992

// 两个不同的值,却返回了true
9007199254740992 === 9007199254740993; // -> true

Promise.allSettled()#

Promise.all 缺陷

都知道 Promise.all 具有并发执行异步任务的能力。但它的最大问题就是如果其中某个任务出现异常(reject),所有任务都会挂掉,Promise 直接进入  reject 状态。 想象这个场景:你的页面有三个区域,分别对应三个独立的接口数据,使用 Promise.all 来并发三个接口,如果其中任意一个接口服务异常,状态是 reject,这会导致页面中该三个区域数据全都无法渲染出来,因为任何 reject 都会进入 catch 回调, 很明显,这是无法接受的,如下:

Promise.all([
  Promise.reject({ code: 500, msg: "服务异常" }),
  Promise.resolve({ code: 200, list: [] }),
  Promise.resolve({ code: 200, list: [] }),
])
  .then((ret) => {
    // 如果其中一个任务是 reject,则不会执行到这个回调。
    RenderContent(ret);
  })
  .catch((error) => {
    // 本例中会执行到这个回调
    // error: {code: 500, msg: "服务异常"}
  });

我们需要一种机制,如果并发任务中,无论一个任务正常或者异常,都会返回对应的的状态(fulfilled 或者 rejected)与结果(业务 value 或者 拒因 reason),在 then 里面通过 filter 来过滤出想要的业务逻辑结果,这就能最大限度的保障业务当前状态的可访问性,而 Promise.allSettled 就是解决这问题的。

Promise.allSettled([
  Promise.reject({ code: 500, msg: "服务异常" }),
  Promise.resolve({ code: 200, list: [] }),
  Promise.resolve({ code: 200, list: [] }),
]).then((ret) => {
  /*
        0: {status: "rejected", reason: {…}}
        1: {status: "fulfilled", value: {…}}
        2: {status: "fulfilled", value: {…}}
    */
  // 过滤掉 rejected 状态,尽可能多的保证页面区域数据渲染
  RenderContent(
    ret.filter((el) => {
      return el.status !== "rejected";
    })
  );
});

globalThis#

Javascript 在不同的环境获取全局对象有不通的方式,node 中通过 global, web 中通过 window, self 等,有些甚至通过 this 获取,但通过 this 是及其危险的,this 在 js 中异常复杂,它严重依赖当前的执行上下文,这些无疑增加了获取全局对象的复杂性。 过去获取全局对象,可通过一个全局函数

let getGlobal = function () {
  if (typeof self !== "undefined") {
    return self;
  }
  if (typeof window !== "undefined") {
    return window;
  }
  if (typeof global !== "undefined") {
    return global;
  }
  throw new Error("unable to locate global object");
};

let globals = getGlobal();

// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/globalThis

而 globalThis 目的就是提供一种标准化方式访问全局对象,有了 globalThis 后,你可以在任意上下文,任意时刻都能获取到全局对象。

for-in 机制#

ECMAScript 遗留了 for-in 循环顺序的详尽介绍待填补。Kevin Gibbons 为此悉心付出,为 for-in 机制定义了一套规则,感谢他。

可选链#

可选链 可让我们在查询具有多层级的对象时,不再需要进行冗余的各种前置校验。 日常开发中,我们经常会遇到这种查询

let name = user && user.info && user.info.name;

又或是这种

let age = user && user.info && user.info.getAge && user.info.getAge();

这是一种丑陋但又不得不做的前置校验,否则很容易命中 Uncaught TypeError: Cannot read property… 这种错误,这极有可能让你整个应用挂掉。 用了 Optional Chaining ,上面代码会变成

let name = user?.info?.name;
let age = user?.info?.getAge?.();

可选链中的 ? 表示如果问号左边表达式有值, 就会继续查询问号后面的字段。根据上面可以看出,用可选链可以大量简化类似繁琐的前置校验操作,而且更安全。

空值合并运算符#

当我们查询某个属性时,经常会遇到,如果没有该属性就会设置一个默认的值。比如下面代码中查询玩家等级。

let level = user.data.level || "暂无等级";

在 JS 中,空字符串、0 ,当进行逻辑操作符判时,会自动转化为 false。在上面的代码里,如果玩家等级本身就是 0 级, 变量 level 就会被赋值 暂无等级 字符串,这是逻辑错误,有时候业务上,我们只需容错取值查询到 undefined 或者 null ,比如:

// {
//    "level": null
// }
let level =
  user.level !== undefined && user.level !== null ? user.level : "暂无等级";
来看看用空值合并运算符如何处理;
// {
//   "level": 0
// }
let level = user.level ?? "暂无等级"; // level -> 0
// {
//   "an_other_field": 0
// }
let level = user.level ?? "暂无等级"; // level -> '暂无等级'

用空值合并运算在逻辑正确的前提下,代码更加简洁。 空值合并运算符 与 可选链 相结合,可以很轻松处理多级查询并赋予默认值问题。

let level = user.data?.level ?? "暂无等级";

import.meta#

import.meta 会返回一个对象,有一个 url 属性,返回当前模块的 url 路径,只能在模块内部使用。

//src/index.js
import React from "react";
console.log(import.meta); //{index.js:38 {url: "http://127.0.0.1:3000/src/index.js"}}
ES2020新特性
https://ameng404.com/posts/javascript/es2020/
作者
Ameng
发布于
2022-12-01
许可协议
CC BY-NC-SA 4.0