当前位置:首页 > JavaScript

js实现枚举

2026-03-13 18:53:07JavaScript

枚举的概念

在JavaScript中,枚举(Enum)是一种常见的数据结构,用于定义一组命名的常量值。虽然JavaScript原生不直接支持枚举,但可以通过对象或类模拟实现。

使用对象模拟枚举

通过冻结对象防止属性被修改,确保枚举值的不可变性。

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

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

使用类模拟枚举

通过静态属性和私有构造函数实现更严格的枚举模式。

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

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

console.log(Status.PENDING.name); // 输出: pending

使用TypeScript的枚举语法

如果项目基于TypeScript,可直接使用内置的枚举语法,编译后会转换为JavaScript代码。

enum Direction {
    Up = 'UP',
    Down = 'DOWN',
    Left = 'LEFT',
    Right = 'RIGHT'
}

console.log(Direction.Up); // 输出: UP

枚举的反向映射

TypeScript的数字枚举支持通过值反向获取键名,但字符串枚举不支持此特性。

enum NumericEnum {
    A = 1,
    B = 2
}
console.log(NumericEnum[NumericEnum.A]); // 输出: "A"

实际应用场景

枚举常用于状态管理、配置选项或消除魔法字符串,提升代码可读性和维护性。例如,在Redux中定义Action类型时使用枚举。

js实现枚举

const ActionTypes = Object.freeze({
    ADD_TODO: 'ADD_TODO',
    DELETE_TODO: 'DELETE_TODO'
});

标签: js
分享给朋友:

相关文章

js实现图

js实现图

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

js实现密码

js实现密码

密码强度验证 使用正则表达式验证密码强度是一种常见方法。以下代码检查密码是否包含大小写字母、数字和特殊字符,且长度至少为8位: function checkPasswordStrength(pass…

js实现视口

js实现视口

js实现视口检测的方法 使用JavaScript检测元素是否进入视口(viewport)可以通过Intersection Observer API或手动计算元素位置实现。以下是两种常见方法: Int…

js实现路由

js实现路由

js实现路由的方法 在JavaScript中实现路由功能可以通过多种方式完成,以下是几种常见的方法: 使用原生JavaScript实现路由 通过监听window.onhashchange事件来实现基…

js进度条实现

js进度条实现

使用HTML和CSS创建基础结构 在HTML中创建一个容器元素用于显示进度条,通常使用<div>元素。CSS用于设置进度条的样式,包括宽度、高度、颜色和圆角等属性。 <div cl…

js实现菜单

js实现菜单

实现基本HTML结构 使用HTML创建菜单的基本框架,通常包含<ul>和<li>元素。示例结构如下: <ul id="menu"> <li><…