j3f28資訊網——每日最新資訊28at.com

ES13包含了許多有價值的特性，徹底改變了我們編寫JavaScript的方式。j3f28資訊網——每日最新資訊28at.com

從異步升級到數組語法糖等等，讓我們來看看這些特性，看看你是否錯過了其中一些。j3f28資訊網——每日最新資訊28at.com

1. 頂級await

在ES13之前，我們永遠不能在全局作用域中使用await。j3f28資訊網——每日最新資訊28at.com

? 之前：j3f28資訊網——每日最新資訊28at.com

// X 語法錯誤：await 只在異步函數中有效await setTimeoutAsync(3000);function setTimeoutAsync(timeout) {  return new Promise((resolve) => {    setTimeout(() => {      resolve('codingbeautydev.com');    }, timeout);  });}

我們總是必須將其放在async函數中或創建一個async IIFE（立即執行函數表達式）：j3f28資訊網——每日最新資訊28at.com

// 異步立即執行函數(async () => {  await setTimeoutAsync(3000);})();// 類似 C++async function main() {  await setTimeoutAsync(3000);}

? ES13之后：j3f28資訊網——每日最新資訊28at.com

// ? 等待超時 - 沒有拋出錯誤await setTimeoutAsync(3000);function setTimeoutAsync(timeout) {  return new Promise((resolve) => {    setTimeout(() => {      resolve('codingbeautydev.com');    }, timeout);  });}

2. 類聲明升級

（1）類字段聲明

在ES13之前，我們只能在構造函數中聲明類字段： 與許多其他語言不同，我們不能在類的最外層作用域中聲明或定義它們。j3f28資訊網——每日最新資訊28at.com

? 之前：j3f28資訊網——每日最新資訊28at.com

? 現在有了ES13： 就像在TypeScript中一樣：j3f28資訊網——每日最新資訊28at.com

（2）私有方法和字段

在ES13之前，創建私有方法是不可能的。 我們還必須使用丑陋的下劃線hack來表示私有性 — 但那只是一個指示。j3f28資訊網——每日最新資訊28at.com

? 之前：j3f28資訊網——每日最新資訊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之后：j3f28資訊網——每日最新資訊28at.com

我們可以通過在字段前加上井號（#）來為類添加私有字段和成員：j3f28資訊網——每日最新資訊28at.com

如果你試圖從類外部訪問它，你會得到一個語法錯誤：j3f28資訊網——每日最新資訊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);

我們可以從錯誤消息中看到一些有趣的東西：j3f28資訊網——每日最新資訊28at.com

編譯器甚至不期望你從類外部嘗試訪問私有字段 — 它假設你是在嘗試創建一個。j3f28資訊網——每日最新資訊28at.com

（3）靜態類字段和靜態私有方法

靜態字段 — 類本身的屬性，而不是任何特定實例的屬性。j3f28資訊網——每日最新資訊28at.com

自ES13以來，我們現在可以輕松地為任何類創建它們：j3f28資訊網——每日最新資訊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個元素。j3f28資訊網——每日最新資訊28at.com

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

但從末尾訪問第N個項目一直是一個痛點 -- 我們必須使用arr.length - N進行索引：j3f28資訊網——每日最新資訊28at.com

? ES13之前：j3f28資訊網——每日最新資訊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()方法，解決了所有這些問題：j3f28資訊網——每日最新資訊28at.com

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

4. 靜態類塊

隨著靜態字段的出現，靜態塊也來了。 只在類創建時執行一次代碼 — 就像C#和Java等OOP語言中的靜態構造函數。 所以你可以在類中創建任意多個靜態塊 — 所有代碼都會按你定義的順序運行：j3f28資訊網——每日最新資訊28at.com

class Vehicle {  static defaultColor = 'blue';}class Car extends Vehicle {  static colors = [];  //  
                
本文鏈接：http://m.www897cc.com/showinfo-26-103577-0.htmlES13中五個最具變革性的JavaScript特性
                
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
                
上一篇： 全棧開發要掌握什么技術？
                
下一篇： 抖音新規：整體治理虛假“身份”“內容”“營銷”“流量”四類行為