当前位置:首页 > JavaScript

js enum 实现

2026-03-15 01:36:32JavaScript

在 JavaScript 中,原生并不直接支持枚举(enum),但可以通过多种方式模拟枚举的功能。以下是几种常见的实现方法:

使用对象模拟枚举

通过对象字面量定义键值对,实现枚举效果。这种方式简单直观,适合大多数场景。

const Color = {
  RED: 'red',
  GREEN: 'green',
  BLUE: 'blue'
};

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

使用冻结对象防止修改

通过 Object.freeze() 防止枚举值被意外修改,增强代码的健壮性。

const Direction = Object.freeze({
  UP: 'up',
  DOWN: 'down',
  LEFT: 'left',
  RIGHT: 'right'
});

Direction.UP = 'newValue'; // 静默失败(严格模式下报错)
console.log(Direction.UP); // 输出: up

使用类实现枚举

通过类的静态属性和私有特性(ES2022+)实现更复杂的枚举逻辑,例如添加方法或校验。

class Status {
  static PENDING = new Status('pending');
  static APPROVED = new Status('approved');
  static REJECTED = new Status('rejected');

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

  toString() {
    return this.value;
  }
}

console.log(Status.PENDING.toString()); // 输出: pending

使用 TypeScript 的枚举语法

如果项目使用 TypeScript,可以直接使用原生 enum 语法,编译后会生成对应的 JavaScript 代码。

enum LogLevel {
  ERROR = 1,
  WARN = 2,
  INFO = 3,
  DEBUG = 4
}

console.log(LogLevel.ERROR); // 输出: 1

使用 Symbol 实现唯一值

通过 Symbol 确保枚举值的唯一性,避免与其他值冲突。

js enum 实现

const LogLevel = {
  DEBUG: Symbol('debug'),
  INFO: Symbol('info'),
  WARN: Symbol('warn'),
  ERROR: Symbol('error')
};

console.log(LogLevel.DEBUG === Symbol('debug')); // 输出: false

注意事项

  • 如果需要反向映射(通过值获取键),可以手动实现或使用 TypeScript 的数值枚举。
  • 冻结对象或使用 Symbol 可以避免枚举值被修改,但可能增加代码复杂度。
  • 在 TypeScript 中优先使用原生 enum,以获得类型检查和更好的工具支持。

标签: jsenum
分享给朋友:

相关文章

js实现分页

js实现分页

实现分页的基本思路 分页功能通常需要处理数据分割、页码生成和用户交互。核心逻辑包括计算总页数、根据当前页截取数据、渲染页码按钮等。 前端分页实现(静态数据) 假设已有全部数据,仅需前端分页展示:…

js实现图表

js实现图表

在JavaScript中实现图表通常使用流行的图表库,以下是几种常见的方法和工具: 使用Chart.js Chart.js是一个简单灵活的库,适合快速生成响应式图表。安装方式包括CDN引入或npm安…

js实现tab选项卡切换

js实现tab选项卡切换

实现Tab选项卡切换的JavaScript方法 使用纯JavaScript实现Tab切换功能,可以通过监听点击事件动态切换内容显示状态。以下是两种常见实现方式: 基础DOM操作实现 // 获取所有…

js实现vr

js实现vr

使用WebXR API实现VR体验 WebXR是浏览器中实现VR和AR体验的标准API,它取代了早期的WebVR。现代浏览器如Chrome、Edge和Firefox已支持WebXR。 // 初始化W…

js实现菜单

js实现菜单

实现基本HTML结构 使用HTML创建菜单的基本框架,通常包含<ul>和<li>元素。示例结构如下: <ul id="menu"> <li><…

js实现上传图片

js实现上传图片

使用HTML5的File API实现图片上传 HTML5的File API允许通过JavaScript访问用户选择的文件。需要创建一个文件输入元素,并监听其change事件。 <input t…