ES13包含了许多有价值的特性，彻底改变了我们编写JavaScript的方式。
从异步升级到数组语法糖等等，让我们来看看这些特性，看看你是否错过了其中一些。
1. 顶级await
在ES13之前，我们永远不能在全局作用域中使用await。
❌ 之前：
// X 语法错误：await 只在异步函数中有效
await setTimeoutAsync(3000);
function setTimeoutAsync(timeout) {
return new Promise((resolve) => {
setTimeout(() => {
resolve('codingbeautydev.com');
}, timeout);
});
}我们总是必须将其放在async函数中或创建一个async IIFE（立即执行函数表达式）：
// 异步立即执行函数
(async () => {
await setTimeoutAsync(3000);
})();
// 类似 C++
async function main() {
await setTimeoutAsync(3000);
}✅ ES13之后：
// ✅ 等待超时 - 没有抛出错误
await setTimeoutAsync(3000);
function setTimeoutAsync(timeout) {
return new Promise((resolve) => {
setTimeout(() => {
resolve('codingbeautydev.com');
}, timeout);
});
}2. 类声明升级
（1）类字段声明
在ES13之前，我们只能在构造函数中声明类字段： 与许多其他语言不同，我们不能在类的最外层作用域中声明或定义它们。
❌ 之前：
✅ 现在有了ES13： 就像在TypeScript中一样：
（2）私有方法和字段
在ES13之前，创建私有方法是不可能的。 我们还必须使用丑陋的下划线hack来表示私有性 — 但那只是一个指示。
❌ 之前：
class Person {
_firstName = 'Tari';
_lastName = 'Ibaba';
get name() {
return `${this._firstName} ${this._lastName}`;
}
}
const person = new Person();
console.log(person.name); // Tari Ibaba
// 我们仍然可以访问私有成员！
console.log(person._firstName); // Tari
console.log(person._lastName); // Ibaba
// 它们也可以被修改！
person._firstName = 'Lionel';
person._lastName = 'Messi';
console.log(person.name); // Lionel Messi✅ ES13之后：
我们可以通过在字段前加上井号（#）来为类添加私有字段和成员：
如果你试图从类外部访问它，你会得到一个语法错误：
class Person {
#firstName = 'Tari';
#lastName = 'Ibaba';
get name() {
return `${this.#firstName} ${this.#lastName}`;
}
}
const person = new Person();
console.log(person.name);
// 语法错误：私有字段 '#firstName' 必须在封闭的类中声明
console.log(person.#firstName);
console.log(person.#lastName);我们可以从错误消息中看到一些有趣的东西：
编译器甚至不期望你从类外部尝试访问私有字段 — 它假设你是在尝试创建一个。
（3）静态类字段和静态私有方法
静态字段 — 类本身的属性，而不是任何特定实例的属性。
自ES13以来，我们现在可以轻松地为任何类创建它们：
class Person {
static #count = 0;
static eyeCount = 2;
static getCount() {
// 使用 this 访问同级静态成员
return this.#count;
}
// 实例成员
constructor() {
// 使用 this.constructor 访问静态成员
this.constructor.#incrementCount();
}
static #incrementCount() {
this.#count++;
}
}
const person1 = new Person();
const person2 = new Person();
console.log(Person.getCount()); // 23. 数组升级：新的at()方法
通常我们会使用方括号（[]）来访问数组的第N个元素。
const arr = ['a', 'b', 'c', 'd'];
console.log(arr[1]); // b但从末尾访问第N个项目一直是一个痛点 -- 我们必须使用arr.length - N进行索引：
❌ ES13之前：
const arr = ['a', 'b', 'c', 'd'];
// 倒数第1个元素
console.log(arr[arr.length - 1]); // d
// 倒数第2个元素
console.log(arr[arr.length - 2]); // c幸运的是，ES13带来了一个新的at()方法，解决了所有这些问题：
const str = 'Coding Beauty';
console.log(str.at(-1)); // y 倒数第1个字符
console.log(str.at(-2)); // t 倒数第2个字符4. 静态类块
随着静态字段的出现，静态块也来了。 只在类创建时执行一次代码 — 就像C#和Java等OOP语言中的静态构造函数。 所以你可以在类中创建任意多个静态块 — 所有代码都会按你定义的顺序运行：
class Vehicle {
static defaultColor = 'blue';
}
class Car extends Vehicle {
static colors = [];
// 👇 pushes red before green
// 👇 先添加 red，然后添加 green
static {
this.colors.push(super.defaultColor, 'red');
}
static {
this.colors.push('green');
}
}
console.log(Car.colors); // ['blue', 'red', 'green']5. 错误报告升级
有时我们捕获调用栈下方方法的错误，只是为了将其重新抛出回调用栈上方。 但当我们这样做时，我们会失去原始错误中的关键信息：
try {
userAction();
} catch (err) {
// ❌ doesn't know fundamental cause of error
// ❌ 不知道错误的根本原因
console.log(err);
}
function userAction() {
try {
apiCallThatCanThrow();
} catch (err) {
// 👇 rethrow
// 👇 重新抛出错误
throw new Error('New error message');
}
}
function apiCallThatCanThrow() {
console.log('fetching from codingbeautydev.com...');
throw new Error('throwing for no reason');
}这就是为什么ES13引入了一个新的cause属性来保留这个重要信息并使调试更容易：
try {
userAction();
} catch (err) {
// ✅ now knows what caused the error
// ✅ 现在知道了错误的原因
console.log(err);
console.log(`Caused by: ${err.cause}`);
}
function userAction() {
try {
apiCallThatCanThrow();
} catch (err) {
// ✅ error cause
// ✅ 错误原因
throw new Error('New error message', { cause: err });
}
}
function apiCallThatCanThrow() {
console.log('fetching from codingbeautydev.com...');
throw new Error('throwing for no reason');
}最后的思考
总的来说，ES13对JavaScript来说是一个重大飞跃，它带来了几个已成为现代开发必不可少的特性。 使你能够编写更清晰、更简洁、更具表现力的代码。
