JavaScript >> Javascript 文檔 >  >> Tags >> TypeScript

如何在 JavaScript(不是 TypeScript)中創建和使用枚舉

本文將向您展示如何在 JavaScript 中創建和使用枚舉。不幸的是,javascript 包括對 Enums 的本機支持,但您可以自己添加類似的功能。

請注意,TypeScript,一種基於 JavaScript 構建的語言,確實 包括對原生枚舉的支持。所以我們在這裡只關注純 JavaScript,而不是 TypeScript。

什麼是枚舉 ?

一個枚舉 (枚舉 erated Type) 是一個包含多個值的數據結構。每個值都分配給一個標識符 - 並且可以通過該標識符訪問。

枚舉 包含預期不會更改的預定義常量(在編寫應用程序和運行應用程序時它們將是相同的,以便您始終可以通過相同的標識符引用枚舉中的數據並獲得相同的值)。

JavaScript Object.freeze() 方法

那麼,如果沒有對 Enums 的原生支持,我們如何使用 Enums?

鑑於枚舉是什麼——一組不變的鍵/值對,我們可以創建一個對象(它可以包含一組鍵值對)——然後使用 Object.freeze 凍結它 (使其不變)。因此,枚舉的兩個主要屬性都得到滿足!

// Declare a constant called Month, containing our Enum
const Month = {
    JAN: 1,
    FEB: 2,
    MAR: 3
};

// Freeze it! It now can't be changed
Object.freeze(Month);

// Assign a value from the Enum to a variable to test it
let thisMonth = Month.MAR;
console.log(thisMonth); # Outputs 3 - the value of MAR in the Enum

// Trying to add a new member to the Enum will fail - but no error is produced.  The object is just frozen and won't be modified.
Month.APR = 4;
console.log(Month) # Will return the original frozen Month Enum - APR will not be included

簡單的!枚舉可以包含任何值——任何變量——字符串、數字、對象、布爾值等。

您可以通過屬性名稱訪問枚舉中的值,就像使用任何其他類型的一樣 JavaScript 對象。

為什麼要使用枚舉 ?

您可能想要這樣做的原因有幾個:

  • 由於 Enum 的值是預定義的,因此您可以強制執行某些值的值。如果該值是從 Enum 分配的,則它只能是預先批准的值之一。
    • 在處理用戶輸入並希望確保用戶選擇了有效選項時特別有用
  • 減少存儲在文件或數據庫中的數據大小。例如,你的 Enum 可能包含複雜或冗長的數據——但因為它不會改變,你可以將 Enum 成員的名稱存儲在數據庫中,而不是存儲整個值——然後當你的應用程序下次加載時,它只需要讀取名稱,然後可以在 Enum 中查找以獲取完整值。
  • 一旦你開始構建自己的應用程序,你可能會想出自己使用它的理由——我不知道你會做什麼!

Tutorial JavaScript 教程
  1. 如何在 Next.js 中將 SVG 作為組件導入,而不使用任何庫

  2. 更新反應嵌套狀態屬性

  3. 如何在 React 18 中運行 Google Maps API?

  4. 用於管理 Node 包的 Electron 應用程序

  5. 使用 localCompare 在 JavaScript 中對字符串進行排序

  6. 在您的視頻通話 Web 應用程序中構建實時翻譯的轉錄服務

  7. 小部件:Flutter 應用程序的構建塊

  1. React Native 應用程序中的單元測試

  2. 任何人都可以映射!靈感和對地圖世界的介紹

  3. 開始使用我們的 PostgreSQL 數據庫

  4. 將 NgRx 與 Angular 一起使用

  5. 1行代碼:如何按升序對數組進行排序

  6. three.js 在懸停 LineSegmentsGeometry 上突出顯示立方體的邊緣

  7. 擴展運算符和剩餘參數

  1. 使用 Knex.js 查詢數據庫

  2. 沒有名稱的 Cookie 集

  3. Stack Overflow Dashboard – 檢查參與度、指標等

  4. 你必須看到的 10 個 Javascript 教程