ES13中五个最具变革性的JavaScript特性

ycr28资讯网——每日最新资讯28at.com

ES13包含了许多有价值的特性，彻底改变了我们编写JavaScript的方式。ycr28资讯网——每日最新资讯28at.com

从异步升级到数组语法糖等等，让我们来看看这些特性，看看你是否错过了其中一些。ycr28资讯网——每日最新资讯28at.com

1. 顶级await

在ES13之前，我们永远不能在全局作用域中使用await。ycr28资讯网——每日最新资讯28at.com

❌ 之前：ycr28资讯网——每日最新资讯28at.com

// X 语法错误：await 只在异步函数中有效await setTimeoutAsync(3000);function setTimeoutAsync(timeout) {  return new Promise((resolve) => {    setTimeout(() => {      resolve('codingbeautydev.com');    }, timeout);  });}

我们总是必须将其放在async函数中或创建一个async IIFE（立即执行函数表达式）：ycr28资讯网——每日最新资讯28at.com

// 异步立即执行函数(async () => {  await setTimeoutAsync(3000);})();// 类似 C++async function main() {  await setTimeoutAsync(3000);}

✅ ES13之后：ycr28资讯网——每日最新资讯28at.com

// ✅ 等待超时 - 没有抛出错误await setTimeoutAsync(3000);function setTimeoutAsync(timeout) {  return new Promise((resolve) => {    setTimeout(() => {      resolve('codingbeautydev.com');    }, timeout);  });}

2. 类声明升级

（1）类字段声明

在ES13之前，我们只能在构造函数中声明类字段： 与许多其他语言不同，我们不能在类的最外层作用域中声明或定义它们。ycr28资讯网——每日最新资讯28at.com

❌ 之前：ycr28资讯网——每日最新资讯28at.com

✅ 现在有了ES13： 就像在TypeScript中一样：ycr28资讯网——每日最新资讯28at.com

（2）私有方法和字段

在ES13之前，创建私有方法是不可能的。 我们还必须使用丑陋的下划线hack来表示私有性 — 但那只是一个指示。ycr28资讯网——每日最新资讯28at.com

❌ 之前：ycr28资讯网——每日最新资讯28at.com

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); // Tariconsole.log(person._lastName); // Ibaba// 它们也可以被修改！person._firstName = 'Lionel';person._lastName = 'Messi';console.log(person.name); // Lionel Messi

✅ ES13之后：ycr28资讯网——每日最新资讯28at.com

我们可以通过在字段前加上井号（#）来为类添加私有字段和成员：ycr28资讯网——每日最新资讯28at.com

如果你试图从类外部访问它，你会得到一个语法错误：ycr28资讯网——每日最新资讯28at.com

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);

我们可以从错误消息中看到一些有趣的东西：ycr28资讯网——每日最新资讯28at.com

编译器甚至不期望你从类外部尝试访问私有字段 — 它假设你是在尝试创建一个。ycr28资讯网——每日最新资讯28at.com

（3）静态类字段和静态私有方法

静态字段 — 类本身的属性，而不是任何特定实例的属性。ycr28资讯网——每日最新资讯28at.com

自ES13以来，我们现在可以轻松地为任何类创建它们：ycr28资讯网——每日最新资讯28at.com

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()); // 2

3. 数组升级：新的at()方法

通常我们会使用方括号（[]）来访问数组的第N个元素。ycr28资讯网——每日最新资讯28at.com

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

但从末尾访问第N个项目一直是一个痛点 -- 我们必须使用arr.length - N进行索引：ycr28资讯网——每日最新资讯28at.com

❌ ES13之前：ycr28资讯网——每日最新资讯28at.com

const arr = ['a', 'b', 'c', 'd'];// 倒数第1个元素console.log(arr[arr.length - 1]); // d// 倒数第2个元素console.log(arr[arr.length - 2]); // c

幸运的是，ES13带来了一个新的at()方法，解决了所有这些问题：ycr28资讯网——每日最新资讯28at.com

const str = 'Coding Beauty';console.log(str.at(-1)); // y 倒数第1个字符console.log(str.at(-2)); // t 倒数第2个字符

4. 静态类块

随着静态字段的出现，静态块也来了。 只在类创建时执行一次代码 — 就像C#和Java等OOP语言中的静态构造函数。 所以你可以在类中创建任意多个静态块 — 所有代码都会按你定义的顺序运行：ycr28资讯网——每日最新资讯28at.com

class Vehicle {  static defaultColor = 'blue';}class Car extends Vehicle {  static colors = [];  //  
                
本文链接：http://www.28at.com/showinfo-26-103577-0.htmlES13中五个最具变革性的JavaScript特性
                
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
                
上一篇： 全栈开发要掌握什么技术？
                
下一篇： 抖音新规：整体治理虚假“身份”“内容”“营销”“流量”四类行为