当前位置:首页 > 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休眠

实现 JavaScript 休眠的方法 在 Vue 中实现 JavaScript 休眠(延迟执行)可以通过以下方式实现。由于 JavaScript 本身没有内置的 sleep 函数,通常使用 Prom…

js节流实现

js节流实现

节流的概念 节流(Throttle)是一种限制函数执行频率的技术,确保函数在一定时间间隔内只执行一次。常用于滚动事件、窗口调整等高频触发的场景。 基础实现方法 使用时间戳判断是否执行函数: fun…

js实现 功能

js实现 功能

在 JavaScript 中实现功能通常涉及多个关键步骤,具体取决于功能需求。以下是常见功能的实现方法和示例: 基本功能实现 使用函数封装逻辑是最直接的方式。例如,实现一个计算两数之和的函数: f…

js实现的游戏

js实现的游戏

JavaScript 游戏开发基础 JavaScript 是开发网页游戏的流行选择,因其无需插件即可在浏览器中运行。以下是一些关键技术和资源: HTML5 Canvas Canvas 提供了绘制图形…

js实现乘法

js实现乘法

实现乘法运算的方法 在JavaScript中实现乘法运算可以通过多种方式完成,以下列举几种常见方法: 基础运算符 直接使用乘法运算符*是最简单的方式: let result = 3 * 5; //…

vue js 实现排序

vue js 实现排序

Vue.js 实现排序的方法 在 Vue.js 中实现排序可以通过多种方式完成,包括使用计算属性、方法或直接操作数据。以下是几种常见的实现方式: 使用计算属性排序 计算属性可以自动响应数据变化并重新…