当前位置:首页 > JavaScript

js enum 实现

2026-04-06 19:18:54JavaScript

枚举的基本概念

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

使用对象模拟枚举

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

js enum 实现

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

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

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

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

js enum 实现

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,可直接使用内置枚举语法:

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

let level: LogLevel = LogLevel.INFO;

枚举最佳实践

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

标签: jsenum
分享给朋友:

相关文章

js 实现vue模板

js 实现vue模板

实现 Vue 模板的 JavaScript 方法 通过原生 JavaScript 可以实现类似 Vue 的模板渲染功能,主要包括数据绑定、指令处理和模板解析。以下是核心实现思路: 数据绑定与…

js实现打印

js实现打印

使用window.print()方法实现打印 在JavaScript中,可以通过调用window.print()方法直接触发浏览器的打印功能。这会打开系统的打印对话框,用户可以选择打印机和设置打印选项…

js 实现继承

js 实现继承

原型链继承 通过让子类的原型对象指向父类的实例来实现继承。子类实例可以访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Par…

js实现乘

js实现乘

JavaScript 实现乘法运算 在 JavaScript 中实现乘法运算可以通过多种方式完成,包括基本运算符、函数封装以及高级算法(如大数乘法)。以下是几种常见方法: 使用基本乘法运算符 Jav…

js图片轮播的实现

js图片轮播的实现

基础图片轮播实现 使用HTML、CSS和JavaScript实现一个简单的图片轮播效果。HTML部分定义轮播容器和图片,CSS负责样式和过渡效果,JavaScript处理逻辑。 <div cl…

js实现滑动

js实现滑动

实现滑动效果的方法 在JavaScript中实现滑动效果可以通过多种方式完成,以下是几种常见的实现方法: 使用CSS过渡和JavaScript触发 通过CSS定义过渡效果,JavaScript控制触…