当前位置:首页 > JavaScript

js实现枚举

2026-04-05 13:09:16JavaScript

实现枚举的几种方法

JavaScript 本身没有内置的枚举类型,但可以通过多种方式模拟枚举行为。

使用对象常量

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

function getColorName(color) {
  switch(color) {
    case Color.RED: return '红色';
    case Color.GREEN: return '绿色';
    case Color.BLUE: return '蓝色';
    default: throw new Error('未知颜色');
  }
}

使用冻结对象

防止枚举值被意外修改:

js实现枚举

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

使用类实现

更接近传统语言的枚举实现:

js实现枚举

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

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

  toString() {
    return `Status.${this.name}`;
  }
}

使用Symbol实现

确保枚举值唯一:

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

TypeScript中的枚举

如果使用TypeScript,有原生枚举支持:

enum Response {
  No = 0,
  Yes = 1
}

function respond(recipient: string, message: Response): void {
  // ...
}

枚举的最佳实践

  • 使用大写字母命名枚举值,遵循常量命名惯例
  • 考虑使用Object.freeze防止意外修改
  • 为枚举添加文档说明每个值的含义
  • 在需要唯一性时考虑使用Symbol
  • 在大型项目中考虑使用TypeScript以获得更好的类型安全

枚举的常见用途

  • 状态管理(如加载状态、表单状态)
  • 配置选项(如主题、语言)
  • 有限的选择集合(如用户角色、权限级别)
  • 替代魔术字符串/数字,提高代码可读性

标签: js
分享给朋友:

相关文章

js实现分页

js实现分页

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

js 实现vue

js 实现vue

Vue.js 的基本实现 在 JavaScript 中实现 Vue.js 的核心功能,可以通过数据绑定、响应式系统和虚拟 DOM 来实现。以下是实现 Vue.js 核心功能的简化版本。 数据响应式系…

js实现类

js实现类

JavaScript 实现类的几种方式 JavaScript 是一种基于原型的语言,但在 ES6 之后引入了 class 语法糖,使得实现类更加直观。以下是几种常见的实现方式: 使用构造函数 传统的…

js实现复制到剪贴板

js实现复制到剪贴板

使用document.execCommand方法(传统方式,已废弃但部分浏览器仍支持) 该方法适用于旧版浏览器,但已被标记为废弃。执行前需确保文本已被选中: function copyToClipb…

js实现列表

js实现列表

使用 JavaScript 实现列表 JavaScript 提供了多种方式来实现列表功能,包括数组操作、DOM 元素动态生成等。以下是几种常见的实现方法: 使用数组存储列表数据 数组是 JavaSc…

js画图实现

js画图实现

使用Canvas API绘制图形 Canvas是HTML5提供的绘图API,通过JavaScript操作Canvas元素可以绘制各种图形。以下是一个简单的示例: <canvas id="myC…