526互联

es13

发布时间 2023-11-27 16:55:48作者: 柯基与佩奇

前言

与许多其他编程语言一样，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