JavaScript 不断发展，随着 ES13 (ECMAScript 2022) 的引入，开发人员应该注意一些新功能，以便编写更高效、更现代的代码。在本文中，我们将深入探讨 ES13 中十个最有影响力的功能，这些功能可以改善您的开发工作流程。

1. 顶级等待

ES13 之前：

以前，您只能在异步函数中使用await。这意味着如果您需要使用await，则必须将代码包装在异步函数中，即使模块的其余部分不需要它。

例子：

// Without top-level await (Before ES13)
async function fetchData() {
  const data = await fetch('/api/data');
  return data.json();
}
fetchData().then(console.log);

ES13特点：

使用 ES13，您现在可以在模块的顶层使用 wait，从而无需额外的异步包装函数。

// With top-level await (ES13)
const data = await fetch('/api/data');
console.log(await data.json());

2. 私有实例方法和访问器

ES13 之前：

在 ES13 之前，JavaScript 类没有真正的私有字段或方法。开发人员经常使用下划线或闭包等命名约定来模拟隐私，但这些方法并不是真正的隐私。

例子：

// Simulating private fields (Before ES13)
class Person {
  constructor(name) {
    this._name = name; // Conventionally "private"
  }

  _getName() {
    return this._name;
  }

  greet() {
    return `Hello, ${this._getName()}!`;
  }
}

const john = new Person('John');
console.log(john._getName()); // Accessible, but intended to be private

ES13特点：

ES13 引入了真正的私有实例方法和使用 # 前缀的访问器，确保它们不能在类外部访问。

// Private instance methods and fields (ES13)
class Person {
  #name = '';

  constructor(name) {
    this.#name = name;
  }

  #getName() {
    return this.#name;
  }

  greet() {
    return `Hello, ${this.#getName()}!`;
  }
}

const john = new Person('John');
console.log(john.greet()); // Hello, John!
console.log(john.#getName()); // Error: Private field '#getName' must be declared in an enclosing class

3. 静态类字段和方法

ES13 之前：

在 ES13 之前，静态字段和方法通常在类体之外定义，导致代码内聚力较差。

例子：

// Static fields outside class body (Before ES13)
class MathUtilities {}

MathUtilities.PI = 3.14159;

MathUtilities.calculateCircumference = function(radius) {
  return 2 * MathUtilities.PI * radius;
};

console.log(MathUtilities.PI); // 3.14159
console.log(MathUtilities.calculateCircumference(5)); // 31.4159

ES13特点：

ES13 允许您直接在类主体中定义静态字段和方法，从而提高可读性和组织性。

// Static fields and methods inside class body (ES13)
class MathUtilities {
  static PI = 3.14159;

  static calculateCircumference(radius) {
    return 2 * MathUtilities.PI * radius;
  }
}

console.log(MathUtilities.PI); // 3.14159
console.log(MathUtilities.calculateCircumference(5)); // 31.4159

4. 逻辑赋值运算符

ES13 之前：

逻辑运算符（&&、||、??）和赋值通常在详细语句中手动组合，导致代码更加复杂。

例子：

// Manually combining logical operators and assignment (Before ES13)
let a = 1;
let b = 0;

a = a && 2;  // a = 2
b = b || 3;  // b = 3
let c = null;
c = c ?? 4; // c = 4

console.log(a, b, c); // 2, 3, 4

ES13特点：

ES13引入了逻辑赋值运算符，它以简洁的语法将逻辑运算与赋值结合起来。

// Logical assignment operators (ES13)
let a = 1;
let b = 0;

a &&= 2;  // a = a && 2; // a = 2
b ||= 3;  // b = b || 3; // b = 3
let c = null;
c ??= 4; // c = c ?? 4; // c = 4

console.log(a, b, c); // 2, 3, 4

5. WeakRefs 和 FinalizationRegistry

ES13 之前：

JavaScript 本身不支持弱引用和终结器，这使得在某些情况下管理资源变得困难，尤其是处理昂贵对象的大型应用程序。

例子：

// No native support for weak references (Before ES13)
// Developers often had to rely on complex workarounds or external libraries.

ES13特点：

ES13引入了WeakRef和FinalizationRegistry，为弱引用和垃圾收集后的清理任务提供原生支持。

// WeakRefs and FinalizationRegistry (ES13)
let obj = { name: 'John' };
const weakRef = new WeakRef(obj);

console.log(weakRef.deref()?.name); // 'John'

obj = null; // obj is eligible for garbage collection

setTimeout(() => {
  console.log(weakRef.deref()?.name); // undefined (if garbage collected)
}, 1000);

const registry = new FinalizationRegistry((heldValue) => {
  console.log(`Cleanup: ${heldValue}`);
});

registry.register(obj, 'Object finalized');

6. 私人领域的人体工学品牌检查

ES13 之前：

检查对象是否具有私有字段并不简单，因为私有字段本身不受支持。开发人员必须依赖解决方法，例如检查公共属性或使用instanceof检查。

例子：

// Checking for private fields using workarounds (Before ES13)
class Car {
  constructor() {
    this.engineStarted = false; // Public field
  }

  startEngine() {
    this.engineStarted = true;
  }

  static isCar(obj) {
    return obj instanceof Car; // Not reliable for truly private fields
  }
}

const myCar = new Car();
console.log(Car.isCar(myCar)); // true

ES13特点：

使用 ES13，您现在可以使用 # 语法直接检查对象是否具有私有字段，使其更简单、更可靠。

// Ergonomic brand checks for private fields (ES13)
class Car {
  #engineStarted = false;

  startEngine() {
    this.#engineStarted = true;
  }

  static isCar(obj) {
    return #engineStarted in obj;
  }
}

const myCar = new Car();
console.log(Car.isCar(myCar)); // true

7. Array.prototype.at()

ES13 之前：

访问数组中的元素涉及使用带有索引的括号表示法，对于负索引，您必须手动计算位置。

例子：

// Accessing array elements (Before ES13)
const arr = [1, 2, 3, 4, 5];
console.log(arr[arr.length - 1]); // 5 (last element)

ES13特点：

at()方法允许您更直观地使用正索引和负索引访问数组元素。

// Accessing array elements with `at()` (ES13)
const arr = [1, 2, 3, 4, 5];
console.log(arr.at(-1)); // 5 (last element)
console.log(arr.at(0)); // 1 (first element)

8. Object.hasOwn()

ES13 之前：

要检查对象是否有自己的属性（不是继承的），开发人员通常使用 Object.prototype.hasOwnProperty.call() 或 obj.hasOwnProperty()。

例子：

// Checking own properties (Before ES13)
const obj = { a: 1 };
console.log(Object.prototype.hasOwnProperty.call(obj, 'a')); // true
console.log(obj.hasOwnProperty('a')); // true

ES13特点：

新的 Object.hasOwn() 方法简化了此检查，提供了更简洁和可读的语法。

// Checking own properties with `Object.hasOwn()` (ES13)
const obj = { a: 1 };
console.log(Object.hasOwn(obj, 'a')); // true

9. Object.fromEntries()

ES13 之前：

将键值对（例如，从 Map 或数组）转换为对象需要循环和手动构造。

例子：

// Creating an object from entries (Before ES13)
const entries = [['name', 'John'], ['age', 30]];
const obj = {};
entries.forEach(([key, value]) => {
  obj[key] = value;
});
console.log(obj); // { name: 'John', age: 30 }

ES13特点：

Object.fromEntries() 简化了从键值对创建对象的过程。

// Creating an object with `Object.fromEntries()` (ES13)
const entries = [['name', 'John'], ['age', 30]];
const obj = Object.fromEntries(entries);
console.log(obj); // { name: 'John', age: 30 }

10. 模块中的全局 this

ES13 之前：

模块顶层的 this 值未定义，导致将代码从脚本移植到模块时出现混乱。

例子：

// Global `this` (Before ES13)
console.log(this); // undefined in modules, global object in scripts

ES13特点：

ES13 澄清了模块顶层的 this 值始终是未定义的，从而提供了模块和脚本之间的一致性。

// Global `this` in modules (ES13)
console.log(this); // undefined

这些 ES13 功能旨在使您的 JavaScript 代码更加高效、可读和可维护。通过将这些集成到您的开发实践中，您可以利用该语言的最新进展来构建现代的高性能应用程序。