当前位置:首页 > 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实现文件下载

使用 a 标签下载文件 通过动态创建 a 标签并设置 download 属性实现文件下载。适用于已知文件 URL 或 Blob 数据的情况。 function downloadFile(url, f…

js 实现vue

js 实现vue

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

js 实现滚动

js 实现滚动

实现滚动的方法 使用 window.scrollTo() window.scrollTo() 方法可以滚动到文档中的特定位置。可以指定 x 和 y 坐标,或者使用平滑滚动的选项。 // 滚动到指定位…

js实现菜单

js实现菜单

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

js实现上传图片

js实现上传图片

使用HTML5的File API实现图片上传 HTML5的File API允许通过JavaScript访问用户选择的文件。需要创建一个文件输入元素,并监听其change事件。 <input t…

js实现左右滑动

js实现左右滑动

实现左右滑动的 JavaScript 方法 监听触摸事件 通过 touchstart、touchmove 和 touchend 事件来检测用户的手势操作。记录触摸的起始位置和移动距离,判断滑动方向。…