ECMAScript 2022

ECMAScript 2022（ES13）于 2022 年 6 月发布。

核心特性

1. 类字段和静态字段支持

引入了类实例字段和静态字段的支持，这使得类的定义更加简洁，避免了在构造函数中手动初始化字段。可以直接在类的定义中声明实例字段和静态字段，简化了类的结构。

class Person {
  name = "Alice"; // 实例字段
  static species = "Human"; // 静态字段

  constructor(age) {
    this.age = age;
  }
}

const person = new Person(25);
console.log(person.name); // 'Alice'
console.log(Person.species); // 'Human'

影响：

• 简化类定义：不再需要通过构造函数初始化实例字段。
• 更高的可读性和更清晰的结构。

2. 顶级 await

顶级 await，允许在模块的顶层直接使用 await，不需要在异步函数内使用。这对模块的加载和异步操作特别有用。

// 在模块内直接使用 await
const response = await fetch("https://api.example.com");
const data = await response.json();
console.log(data);

影响：

• 简化异步模块代码：避免了将顶级异步操作包装在函数中。
• 提升开发效率：更符合现代开发的需求，特别是在处理网络请求时。

3. Object.hasOwn() 方法

新增 Object.hasOwn() 方法，提供更安全的方式来检查对象是否有某个自有属性。相比 Object.prototype.hasOwnProperty.call()，该方法具有更好的安全性，避免了访问 null 或 undefined 时出现错误。

const obj = { name: "Alice" };
console.log(Object.hasOwn(obj, "name")); // true
console.log(Object.hasOwn(obj, "age")); // false

影响：

• 提升代码安全性：更安全地检查对象属性，尤其是在面对 null 或 undefined 时。
• 简化代码：避免了传统的 hasOwnProperty 使用方式。

4. Error 增强（Error.cause）

Error 对象新增了 cause 属性，用于链式传递原始错误。可以在抛出新错误时通过 cause 属性传递原始错误对象，便于错误追踪和调试。

try {
  throw new Error("Original error");
} catch (err) {
  throw new Error("New error", { cause: err });
}

影响：

• 更好的错误追踪：通过 cause 属性可以跟踪到原始错误，帮助开发者快速定位问题。
• 更强的调试能力：通过链式错误传递，错误处理更加灵活。

5. Array.at() 方法

新增 Array.at() 方法，允许使用负数索引从数组末尾访问元素。这个方法比传统的通过 length - 1 方式更加直观。

const arr = [1, 2, 3, 4];
console.log(arr.at(-1)); // 4 (最后一个元素)
console.log(arr.at(-2)); // 3 (倒数第二个元素)

影响：

• 简化数组访问：可以使用负数索引访问数组末尾的元素，使得代码更加简洁。
• 提高可读性：对处理末尾元素时的代码更加清晰。

6. WeakRef 和 FinalizationRegistry

WeakRef 和 FinalizationRegistry 是新增的内存管理相关特性。WeakRef 允许创建对对象的弱引用，而 FinalizationRegistry 提供了一种方式，在对象被垃圾回收时执行回调函数。

const weakRef = new WeakRef({ name: "Alice" });

const registry = new FinalizationRegistry((value) => {
  console.log("Object finalized:", value);
});

const obj = { name: "Bob" };
registry.register(obj, obj.name);

// 如果 obj 被垃圾回收，回调函数将被触发

影响：

• 精细化内存管理：对于需要清理和优化内存的场景非常有用。
• 减少内存泄漏：通过 FinalizationRegistry，开发者能够更有效地管理资源。

7. 逻辑赋值运算符

引入了三个新的逻辑赋值运算符，简化了常见的逻辑运算和赋值操作：

• &&=：仅在左侧值为 true 时才赋值。
• ||=：仅在左侧值为 false 时才赋值。
• ??=：仅在左侧值为 null 或 undefined 时才赋值。

let a = null;
a ||= "Default Value"; // 仅在 a 为 null 或 undefined 时赋值
console.log(a); // 'Default Value'

影响：

• 代码简化：减少了多行逻辑操作的写法，提升了代码的可读性。
• 提高效率：简化了逻辑判断和赋值操作。

兼容性

Chrome 92+

Firefox 89+

Safari 15.0+

Edge 92+

Node 16.0+

注：兼容性数据可能随着版本的更新而有所调整，建议开发者根据项目的具体需求参考最新的浏览器版本和 Polyfill 支持情况。

总结

ECMAScript 2022 带来了许多实用的新特性，尤其是在类的使用、异步操作、内存管理和逻辑赋值方面。这些改进增强了语言的表达能力，使开发者能够编写更简洁、更加高效的代码。

参考文献

ECMA-262 2022 规范 👉