当前位置:首页 > 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
分享给朋友:

相关文章

js 实现vue模板

js 实现vue模板

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

js实现报表

js实现报表

使用JavaScript实现报表 在JavaScript中实现报表功能可以通过多种方式完成,常见的方法包括使用原生JavaScript、第三方库(如Chart.js、D3.js)或结合后端数据渲染。以…

js实现瀑布流

js实现瀑布流

实现瀑布流布局 瀑布流布局是一种常见的网页布局方式,常用于图片展示、商品列表等场景。以下是使用 JavaScript 实现瀑布流布局的几种方法。 纯 JavaScript 实现 通过计算元素的位置和…

js实现预览

js实现预览

文件上传预览实现 使用JavaScript实现文件上传预览功能,可以通过FileReader对象读取文件内容并显示预览。以下代码支持图片、文本和PDF文件的预览: // HTML部分需要包含inpu…

js实现点击显示和隐藏

js实现点击显示和隐藏

实现点击显示和隐藏的JavaScript方法 使用classList.toggle切换类名 通过添加/移除CSS类控制元素的显示与隐藏,需提前在CSS中定义隐藏样式(如display: none)。…

js实现图

js实现图

JavaScript 实现图的常用方法 在 JavaScript 中,图(Graph)可以通过多种方式实现,常见的包括邻接表(Adjacency List)和邻接矩阵(Adjacency Matrix…