当前位置:首页 > JavaScript

js enum 实现

2026-04-06 19:18:54JavaScript

枚举的基本概念

JavaScript 本身没有内置的枚举(Enum)类型,但可以通过对象或类模拟枚举的功能。枚举通常用于定义一组命名的常量,提高代码可读性和可维护性。

使用对象模拟枚举

通过冻结对象防止属性被修改,实现最简单的枚举:

const Color = Object.freeze({
  RED: 'red',
  GREEN: 'green',
  BLUE: 'blue'
});

console.log(Color.RED); // 输出: red

使用类模拟枚举(TypeScript风格)

通过类的静态属性和私有构造函数限制实例化,更接近传统枚举:

class Direction {
  static UP = new Direction('up');
  static DOWN = new Direction('down');
  #value;

  constructor(value) {
    this.#value = value;
  }

  toString() {
    return this.#value;
  }
}

console.log(Direction.UP.toString()); // 输出: up

反向映射支持

传统枚举支持通过值反向获取键名,可通过额外逻辑实现:

const Status = (() => {
  const _map = new Map();
  const _reverseMap = new Map();

  function _addEntry(key, value) {
    _map.set(key, value);
    _reverseMap.set(value, key);
  }

  _addEntry('PENDING', 0);
  _addEntry('SUCCESS', 1);

  return {
    getValue: (key) => _map.get(key),
    getKey: (value) => _reverseMap.get(value),
    ...Object.fromEntries(_map)
  };
})();

console.log(Status.getKey(1)); // 输出: SUCCESS

TypeScript中的原生枚举

如果使用TypeScript,可直接使用内置枚举语法:

js enum 实现

enum LogLevel {
  ERROR = 0,
  WARN = 1,
  INFO = 2
}

let level: LogLevel = LogLevel.INFO;

枚举最佳实践

  • 优先使用Object.freeze避免意外修改
  • 需要类型检查时使用TypeScript原生枚举
  • 复杂场景可结合Symbol确保唯一性
  • 大型项目推荐使用工具库(如enumify

标签: jsenum
分享给朋友:

相关文章

js实现vue

js实现vue

Vue.js 简介 Vue.js 是一个渐进式 JavaScript 框架,用于构建用户界面。其核心库专注于视图层,易于与其他库或现有项目整合。 实现 Vue.js 的基本步骤 安装 Vue.j…

js实现轮播图

js实现轮播图

基础轮播图实现 使用HTML、CSS和JavaScript实现一个简单的自动轮播图。HTML结构包含一个容器和多个图片项。 <div class="slider"> <div…

js实现dh

js实现dh

JavaScript 实现 DH(Diffie-Hellman)密钥交换 Diffie-Hellman(DH)密钥交换是一种安全协议,允许双方在不安全的通信信道上建立一个共享密钥。以下是如何在 Jav…

js手势实现

js手势实现

手势识别实现方法 在JavaScript中实现手势识别通常涉及监听触摸事件(touchstart、touchmove、touchend)或鼠标事件(mousedown、mousemove、mouseu…

js实现自举

js实现自举

实现 JavaScript 自举的方法 JavaScript 自举(Bootstrap)通常指通过 JavaScript 动态加载自身或依赖的脚本,实现运行时环境的初始化或扩展。以下是几种常见实现方式…

js钟表实现

js钟表实现

实现JavaScript钟表的基本方法 创建一个简单的JavaScript钟表可以通过以下步骤完成,涵盖数字和模拟两种形式。 数字钟表实现 HTML结构只需一个显示时间的容器: <div i…