当前位置:首页 > JavaScript

js 枚举实现

2026-02-01 07:57:30JavaScript

枚举的实现方式

在 JavaScript 中,枚举(Enum)可以通过多种方式实现,以下是几种常见的方法:

使用对象字面量

通过对象字面量可以模拟枚举的行为,键作为枚举的名称,值作为枚举的值。

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

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

使用冻结对象

为了防止枚举值被修改,可以使用 Object.freeze 冻结对象。

const Status = Object.freeze({
    PENDING: 'pending',
    APPROVED: 'approved',
    REJECTED: 'rejected'
});

Status.PENDING = 'new'; // 无效,严格模式下会报错
console.log(Status.PENDING); // 输出: 'pending'

使用类实现枚举

通过类可以封装枚举的逻辑,提供更丰富的功能。

class Direction {
    static UP = new Direction('up');
    static DOWN = new Direction('down');
    static LEFT = new Direction('left');
    static RIGHT = new Direction('right');

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

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

使用 Symbol 实现唯一值

使用 Symbol 可以确保枚举值的唯一性,避免命名冲突。

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

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

TypeScript 中的枚举

如果使用 TypeScript,可以直接使用内置的 enum 语法。

enum Role {
    Admin = 'admin',
    User = 'user',
    Guest = 'guest'
}

console.log(Role.Admin); // 输出: 'admin'

枚举的反向映射

在 TypeScript 的数字枚举中,支持通过值反向获取名称。

enum HttpStatus {
    OK = 200,
    NotFound = 404,
    ServerError = 500
}

console.log(HttpStatus[200]); // 输出: 'OK'

使用常量枚举

TypeScript 还支持常量枚举(const enum),在编译时会被内联替换,减少运行时开销。

js 枚举实现

const enum Size {
    Small = 'S',
    Medium = 'M',
    Large = 'L'
}

console.log(Size.Small); // 编译后直接替换为 'S'

以上方法可以根据具体需求选择适合的方式实现枚举功能。

标签: js
分享给朋友:

相关文章

vue实现js休眠

vue实现js休眠

Vue 中实现 JavaScript 休眠 在 Vue 中实现 JavaScript 休眠通常需要使用异步方式,以避免阻塞主线程。以下是几种常见方法: 使用 setTimeout 和 Promise…

js实现轮播

js实现轮播

实现轮播图的基本思路 轮播图的核心逻辑是通过定时切换展示的图片或内容,通常结合左右滑动按钮和指示器(小圆点)增强交互性。以下是基于原生JavaScript的实现方法。 HTML结构 构建轮播图的HT…

js实现拖拽

js实现拖拽

实现拖拽的基本步骤 通过监听鼠标事件(mousedown、mousemove、mouseup)实现拖拽功能。以下是核心代码逻辑: const draggableElement = document.…

js 实现vue

js 实现vue

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

js实现延迟

js实现延迟

实现延迟的方法 在JavaScript中,实现延迟操作有多种方式,以下是几种常见的方法: 使用setTimeout函数 setTimeout是JavaScript中最常用的延迟执行方法。它接受一个回…

js实现百叶窗

js实现百叶窗

使用CSS和JavaScript实现百叶窗效果 通过CSS动画和JavaScript事件监听可以实现百叶窗效果。核心思路是将内容区域分割为多个条状元素,通过控制它们的展开/折叠状态来模拟百叶窗。…