概述

ECMAScript2022于2022年6月22日正式发布， 本文会介绍ECMAScript2022(ES13)，即ECMAScript的第13个版本的新特性。

以下摘自官网：ecma-262 (opens new window)

ECMAScript 2022, the 13th edition, introduced top-level await, allowing the keyword to be used at the top level of modules; new class elements: public and private instance fields, public and private static fields, private instance methods and accessors, and private static methods and accessors; static blocks inside classes, to perform per-class evaluation initialization; the #x in obj syntax, to test for presence of private fields on objects; regular expression match indices via the /d flag, which provides start and end indices for matched substrings; the cause property on Error objects, which can be used to record a causation chain in errors; the at method for Strings, Arrays, and TypedArrays, which allows relative indexing; and Object.hasOwn, a convenient alternative to Object.prototype.hasOwnProperty.

ECMAScript2022(ES13)

ES2022的新特性如下：

• 顶级await
• 类的增强字段声明
• 类内部静态块(Static Blocks)
• #x in obj语法
• 正则表达式匹配索引（/d标志）
• Error对象的cause属性
• 数组/字符串/类型化的.at方法
• Object.hasOwn方法

顶级await

ES2022允许在模块的顶级作用域使用await关键字， 之前await关键字只能在async函数内部使用。

// 模块顶层直接使用await
const config = await fetch('/api/config');
export const settings = await config.json();

兼容性

类的增强

ES2022新增了多种类成员类型，增强了类的封装性和灵活性

• 公共/私有实例字段

  1. 公共实例字段：可直接在类中声明。无需在构造函数中赋值，如class A {x=1;}
  2. 私有实例字段: 以#为前缀，仅能在类内部访问，如class A{#y=2;getY(){return this.#y}}

• 公共/私有静态字段

  1. 静态字段属于类本身，而非实例
  2. 公共静态字段，如class A{ statics z =3};私有静态字段如class A{ statics #z=4}

• 私有实例方法及访问器 私有方法和getter/setter同样以#为前缀，仅在类内部可调用，如class A {#privateMethod(){};get # prop(){}}

• 私有静态方法及访问器 静态私有方法属于类，仅类内部可访问，用于类级别的私有逻辑，如class A{static #privateStaticMethod(){};static get #prop(){}}

兼容性

类内部的静态块 (Static Blocks)

ES2022中引入了类内部的静态块static{}，用于类级别的初始化逻辑。静态块在类定义时执行，仅执行一次。可用于初始化静态字段、验证类的配置，或封装类加载时的负载逻辑。

class A {
  static #count = 0;
  static {
    A.#count++;
  }
}

兼容性

#x in obj语法

#x用于检测对象obj是否包含私有字段#x，返回true或false。解决了私有字段无法通过in或hasOwnProperty检测的问题，避免访问不存在的私有字段时抛出错误。

class A {
  #x = 1;
}
const a = new A();
console.log('#x' in a); // true

正则表达式匹配索引

ES2022引入了正则表达式匹配索引功能，通过/d标志，匹配结果会包含indices属性，可获取每个匹配子字符串的起始和结束索引。

const str = 'hello';
const regex = /l+/d;
const match = regex.exec(str);
console.log(match.indices); // [[2, 4]]

兼容性

Error对象的cause属性

ES2022引入了Error对象的cause属性，用于记录错误的因果关系。当一个错误导致另一个错误时，可通过cause属性将导致错误的异常传递给调用者，形成错误的因果链，方便调试和错误处理。

try {
  throw new Error('Inner error');
} catch (error) {
  throw new Error('Outer error', { cause: error });
}

兼容性

at()方法（数组/字符串/类型化数组）

ES2022引入了at()方法，用于获取数组/字符串/类型化数组的指定位置元素。支持负索引，-1表示最后一个元素，-2表示倒数第二个元素，以此类推。

const arr = [1, 2, 3, 4, 5];
console.log(arr.at(-1)); // 5
console.log(arr.at(-2)); // 4

兼容性

Object.hasOwn方法

ES2022引入了Object.hasOwn方法，用于判断对象是否包含指定的属性。与in运算符不同，Object.hasOwn不会查找原型链上的属性，仅判断对象自身的属性。

hasOwn方法作为Object.prototype.hasOwnProperty的替代方法，无需通过Object.prototype调用。

const obj = { a: 1, b: 2 };
console.log(Object.hasOwn(obj, 'a')); // true
console.log(Object.hasOwn(obj, 'toString')); // false

兼容性