ES13 新特性

ES13（也称为 ES2020）是 ECMAScript 标准的最新版本，于 2020 年 6 月发布。它引入了一些新的语言特性，以帮助开发者更轻松地编写代码。以下是一些 ES13 的新特性：

BigInt

BigInt 是一种新的 JavaScript 类型，用于表示任意精度的整数。在旧版 JavaScript 中，Number 类型只能表示 2 的 53 次方以内的整数，如果需要进行更大的数字计算，就需要借助第三方库。而 BigInt 可以表示任意长度的整数，例如：

const bigIntNum = 9007199254740991n;
console.log(typeof bigIntNum); // 输出 "bigint"

需要注意的是，BigInt 类型的数字需要加上后缀 n。

可选链操作符

可选链操作符是一种新的语言特性，用于简化 JavaScript 代码中的属性访问。在旧版 JavaScript 中，我们通常会通过 && 运算符来检查对象的属性是否存在，例如：

if (person && person.address && person.address.city) {
  console.log(person.address.city);
}

这种写法虽然能够正常工作，但是会让代码变得冗长，尤其是在访问深层次的属性时。可选链操作符可以让我们更简洁地检查属性是否存在，例如：

if (person?.address?.city) {
  console.log(person.address.city);
}

这里的 ?. 表示如果 person 或者 address 属性不存在，就不会再去访问 city 属性，避免了出现 TypeError。当然，如果你希望在访问不存在的属性时，返回一个默认值，也可以像下面这样使用可选链操作符：

const city = person?.address?.city ?? 'Unknown';
console.log(city);

这里的 ?? 表示如果 city 为 null 或 undefined，就会返回 ‘Unknown’。

Nullish 合并操作符

Nullish 合并操作符是一种新的语言特性，用于解决 JavaScript 中变量默认值的问题。在 JavaScript 中，我们通常会用 || 运算符来给变量赋默认值，例如：

const name = person.name || 'Unknown';

但是如果变量的值为 0 或者空字符串，这种写法就会出现问题，因为这些值在逻辑上是存在的。Nullish 合并操作符就是为了解决这个问题，它只会在变量的值为 null 或 undefined 时才会使用默认值，例如：

const name = person.name ?? 'Unknown';

这里的 ?? 表示如果 name 为 null 或 undefined，就会返回 ‘Unknown’。如果 name 的值为 0 或空字符串，这种写法依然会将其视为存在

类的私有方法/属性：

class MyClass {
  #myPrivateMethod() {
    console.log('This is a private method');
  }
  #privateName = 'lkq'
  myPublicMethod() {
    console.log('This is a public method');
    this.#myPrivateMethod();
  }
}

const myInstance = new MyClass();
myInstance.myPublicMethod(); 
myInstance.#myPrivateMethod(); 
console.log(myInstance.#privateName);

在上面的例子中，我们定义了一个私有方法#myPrivateMethod()，并在公共方法myPublicMethod()中调用它。在创建MyClass的实例时，我们可以使用myPublicMethod()方法，但是尝试直接调用私有方法时，会抛出一个TypeError。

2. 静态方法：

class ParentClass {
  static parentStaticMethod() {
    console.log('This is a parent static method');
  }
}

class ChildClass extends ParentClass {
  static childStaticMethod() {
    console.log('This is a child static method');
    super.parentStaticMethod();
  }
}

ChildClass.childStaticMethod(); // 输出: This is a child static method
ChildClass.parentStaticMethod(); 

在这个例子中，我们定义了一个父类ParentClass和一个子类ChildClass。父类中有一个静态方法parentStaticMethod()，子类中有一个静态方法childStaticMethod()，并且它调用了父类的静态方法。在调用子类的静态方法时，它将输出两个字符串。

await运算符

在 JavaScript 中，await 运算符用于暂停执行，直到 Promise 被解决（履行或拒绝）。

以前，我们只能在 async 函数中使用此运算符 - 使用 async 关键字声明的函数。我们无法在全球范围内这样做。

function setTimeoutAsync(timeout) {
 return new Promise((resolve) => {
   setTimeout(() => {
     resolve();
   }, timeout);
 });
}
// SyntaxError: await is only valid in async functions
await setTimeoutAsync(3000);

使用 ES13，现在我们可以：

function setTimeoutAsync(timeout) {
 return new Promise((resolve) => {
   setTimeout(() => {
     resolve();
   }, timeout);
 });
}
// Waits for timeout - no error thrown
await setTimeoutAsync(3000);

at() 方法进行索引

我们通常在 JavaScript 中使用方括号 ([]) 来访问数组的第 N 个元素，这通常是一个简单的过程，我们只访问数组的 N - 1 属性。

const arr = ['a', 'b', 'c', 'd'];
console.log(arr[1]); // b

但是，如果我们想使用方括号访问数组末尾的第 N 个项目，我们必须使用 arr.length - N 的索引。

const arr = ['a', 'b', 'c', 'd'];
// 1st element from the end
console.log(arr[arr.length - 1]); // d
// 2nd element from the end
console.log(arr[arr.length - 2]); // c

新的 at() 方法让我们可以更简洁、更有表现力地做到这一点，要访问数组末尾的第 N 个元素，我们只需将负值 -N 传递给 at()。

const arr = ['a', 'b', 'c', 'd'];
// 1st element from the end
console.log(arr.at(-1)); // d
// 2nd element from the end
console.log(arr.at(-2)); // c