ES13(ECMAScript 2022)中一些新特性的用法总结,包括私有属性、类静态属性、静态代码块、最外层的 `await`、`at` 函数、正则匹配的开始

171 阅读2分钟

以下是 ES13(ECMAScript 2022)中一些新特性的用法总结,包括私有属性、类静态属性、静态代码块、最外层的 awaitat 函数、正则匹配的开始和结束索引等。

1. 私有属性 (Private Class Fields)

用法

私有属性是类中只能在类内部访问的属性,外部无法直接访问。私有属性通过在属性名前加 # 来定义。

class MyClass {
  #privateField = 42;

  getPrivateField() {
    return this.#privateField;
  }
}

const instance = new MyClass();
console.log(instance.getPrivateField()); // 42
console.log(instance.#privateField); // SyntaxError: Private field '#privateField' must be declared in an enclosing class

使用场景

  • 当需要隐藏类的内部实现细节时,可以使用私有属性。
  • 防止外部代码直接修改类的内部状态。

2. 类静态属性 (Static Class Fields)

用法

静态属性是类本身的属性,而不是实例的属性。静态属性通过 static 关键字定义。

class MyClass {
  static staticField = 42;

  static staticMethod() {
    return this.staticField;
  }
}

console.log(MyClass.staticField); // 42
console.log(MyClass.staticMethod()); // 42

使用场景

  • 当需要定义与类本身相关的属性或方法时,可以使用静态属性。
  • 例如,用于存储类的配置、常量或工具方法。

3. 静态代码块 (Static Initialization Blocks)

用法

静态代码块允许在类定义时执行一些初始化逻辑,通常用于初始化静态属性。

class MyClass {
  static staticField;

  static {
    this.staticField = 42;
  }
}

console.log(MyClass.staticField); // 42

使用场景

  • 当静态属性的初始化逻辑较为复杂时,可以使用静态代码块。
  • 例如,需要根据某些条件动态初始化静态属性。

4. 支持最外层的 await (Top-level await)

用法

在 ES13 中,await 可以在模块的最外层使用,而不必包裹在 async 函数中。

// module.js
const data = await fetchData();
console.log(data);

export default data;

使用场景

  • 当需要在模块加载时执行异步操作时,可以使用最外层的 await
  • 例如,在模块加载时获取配置或初始化数据。

5. at 函数 (Array.prototype.at)

用法

at 方法允许通过索引访问数组元素,支持负数索引(从数组末尾开始计数)。

const array = [1, 2, 3, 4, 5];

console.log(array.at(0)); // 1
console.log(array.at(-1)); // 5

使用场景

  • 当需要访问数组的最后一个元素或倒数第几个元素时,可以使用 at 方法。
  • 比传统的 array[array.length - 1] 更加简洁。

6. 正则匹配的开始和结束索引 (RegExp Match Indices)

用法

通过 d 标志,正则表达式匹配的结果会包含每个捕获组的开始和结束索引。

const regex = /(\d+)/d;
const match = regex.exec('abc123def');

console.log(match.indices); // [[3, 6], [3, 6]]

使用场景

  • 当需要获取正则匹配的精确位置时,可以使用 d 标志。
  • 例如,用于高亮显示匹配的文本或进行复杂的文本处理。

以上是 ES13 中一些新特性的用法总结,这些特性可以帮助开发者编写更加简洁、安全和高效的代码。