前言
与许多其他编程语言一样，JavaScript 也在不断发展。每年，该语言都会通过新功能变得更加强大，使开发人员能够编写更具表现力和简洁的代码。
ES13（ECMAScript 2022）新特性
1.类
在ES13之前，类字段只能在构造函数中声明。与许多其他语言不同，无法在类的最外层作用域中声明或定义它们。
class Car {
constructor() {
this.color = 'blue';
this.age = 2;
}
}
const car = new Car();
console.log(car.color); // blue
console.log(car.age); //
而ES13 消除了这个限制。现在我们可以编写这样的代码：
class Car {
color = 'blue';
age = 2;
}
const car = new Car();
console.log(car.color); // blue
console.log(car.age); // 2
2.私有方法和字段
ES13以前，不可能在类中声明私有成员。成员传统上带有下划线 ( _) 前缀，以表明它是私有的，但仍然可以从类外部访问和修改它。
class Person {
_firstName = 'Joseph';
_lastName = 'Stevens';
get name() {
return `${this._firstName} ${this._lastName}`;
}
}
const person = new Person();
console.log(person.name); // Joseph Stevens
// 仍可以从类外部访问 // 原本打算设为私有的成员
console.log(person._firstName); // Joseph
console.log(person._lastName); // Stevens
// 也可以修改
person._firstName = 'Robert';
person._lastName = 'Becker';
console.log(person.name); // Robert Becker
使用 ES13，我们现在可以通过在类前面添加 ( #) 来向类添加私有字段和成员。尝试从外部访问这些类将会引发错误：
class Person {
#firstName = 'Joseph';
#lastName = 'Stevens'; 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.await顶层操作
在 JavaScript 中，await运算符用于暂停执行，直到 一个Promise被解决（执行或拒绝）。 以前只能在async中使用此运算符。不可以在全局作用域中直接使用await。
function setTimeoutAsync(timeout) {
return new Promise((resolve) => {
setTimeout(() => {
resolve();
}, timeout);
});
}
//语法错误：await 仅在异步函数中有效
await setTimeoutAsync(3000);
有了 ES13，现在我们可以：
function setTimeoutAsync(timeout) {
return new Promise((resolve) => {
setTimeout(() => {
resolve();
}, timeout);
});
}
// 等待超时 - 没有错误抛出
await setTimeoutAsync(3000);
顶级 await 在以下场景中将非常有用：
// 动态加载模块：
const lang = await import(`/i18n/${language}`);
// 资源初始化：
const connection = await getConnectParams();
// 依赖回退：
let citydata;
try {
citydata = await import('https://xxx.json');
} catch {
citydata = await import('https://xxx.xxx.json');
}
4.检查对象中的私有字段
开发者如今可以利用这一新功能，使用运算符in来方便地检查对象是否包含某个特定的私有字段。
class Car {
#color; hasColor() {
return #color in this;
}
}
const car = new Car();
console.log(car.hasColor()); // true;
通过运算符in，可以准确区分不同类中具有相同名称的私有字段。
class Car {
#color; hasColor() {
return #color in this;
}
}
class House {
#color; hasColor() {
return #color in this;
}
}
const car = new Car();
const house = new House();
console.log(car.hasColor()); // true;
console.log(car.hasColor.call(house)); // false
console.log(house.hasColor()); // true
console.log(house.hasColor.call(car)); // false
5.at() 索引方法
在 JavaScript 中，我们通常使用方括号[]来访问数组的第 t 个元素。这个过程非常简单，但实际上我们只是访问了索引为 t-1 的数组属性而已。
const arr = ['a', 'b', 'c', 'd'];
console.log(arr[1]); // b
然而，当我们希望通过方括号来访问数组末尾的第 N 个元素时，我们需要使用索引 arr.length - N。
const arr = ['a', 'b', 'c', 'd'];
// 从末尾开始第一个元素
console.log(arr[arr.length - 1]); // d
// 倒数第二个元素 console.log
console.log(arr[arr.length - 2]); // c
借助全新的at()方法，可以以更加精简和富有表现力的方式来实现这一目标。要访问数组末尾的第N个元素，只需将负值-N作为参数传递给at()方法即可。
const arr = ['a', 'b', 'c', 'd'];
// 从末尾开始第一个元素
console.log(arr.at(-1)); // d
// 倒数第二个元素 console.log
console.log(arr.at(-2)); // c
除了数组之外，字符串和TypedArray对象现在也有at()方法。
const str = 'Coding Beauty';
console.log(str.at(-1)); // y
console.log(str.at(-2)); // tconst typedArray = new Uint8Array([16, 32, 48, 64]);
console.log(typedArray.at(-1)); // 64
console.log(typedArray.at(-2)); // 48
网友评论