🙅你真的懂enum吗,详细介绍enum的坑点

1. 编译方式

  • 普通 enum

    编译时会生成一个运行时对象,将枚举名称和值双向映射。例如:

    typescript 复制代码
    enum Direction {
      Up = 'UP',
      Down = 'DOWN',
    }

    编译为:

    javascript 复制代码
    var Direction;
    (function (Direction) {
      Direction["Up"] = "UP";
      Direction["Down"] = "DOWN";
    })(Direction || (Direction = {}));

    运行时可以通过 Direction.UpDirection["Up"] 访问值。

  • const enum

    完全在编译阶段被内联替换,不会生成任何运行时对象。例如:

    typescript 复制代码
    const enum Direction {
      Up = 'UP',
      Down = 'DOWN',
    }
    console.log(Direction.Up);

    编译为:

    javascript 复制代码
    console.log("UP"); // 直接替换为字面量

    若启用 preserveConstEnums 选项,会生成对象但不影响内联行为。


2. 运行时存在性

  • 普通 enum
    生成的枚举对象在运行时存在,支持动态访问(如 Object.keys(Direction))。
  • const enum
    默认不存在于运行时(除非启用 preserveConstEnums),无法动态访问或反射。

3. 性能

  • 普通 enum
    运行时需查找对象,可能存在轻微性能开销。
  • const enum
    直接替换为字面量,无运行时开销,适合高频使用的场景。

4. 成员值的限制

  • 普通 enum

    • 允许常量成员(如字符串、数字字面量)和计算成员(如函数返回值)。

    • 支持延迟求值(引用其他成员):

      typescript 复制代码
      enum NormalEnum {
        A = 1,
        B = A * 2, // 允许,B = 2
      }
  • const enum

    • 所有成员必须是常量表达式(无法使用计算值):

      typescript 复制代码
      const enum ConstEnum {
        A = 1,
        B = A * 2, // 允许,因为 A 是常量
        // C = Math.random(), // 错误:必须是常量
      }

5. 使用场景

  • 普通 enum

    • 需要运行时动态访问或反射(如遍历成员)。
    • 需要跨模块或环境声明。
    • 支持声明合并(多次声明合并为一个)。
  • const enum

    • 追求极致性能或减少代码体积。
    • 无需运行时枚举对象(如仅静态类型检查)。

6. 调试

  • 普通 enum
    运行时对象可见于调试工具,便于检查。
  • const enum
    被内联为字面量,调试时无法查看原始枚举结构。

7. 跨模块与编译选项

  • 普通 enum

    无需特殊处理即可跨文件使用。

  • const enum

    • 若跨模块使用,需确保编译配置正确(如 isolatedModules 下可能需启用 preserveConstEnums)。
    • 内联值的替换依赖编译时的类型信息。

8. 示例对比

  • 普通 enum 的灵活性:

    typescript 复制代码
    enum LogLevel {
      Error = 0,
      Warn = 1,
      Info = calculateInfoLevel(), // 允许计算成员
    }
  • const enum 的内联优化:

    typescript 复制代码
    const enum HttpCode {
      OK = 200,
      NotFound = 404,
    }
    // 编译后:console.log(200);
    console.log(HttpCode.OK);

总结表格

特性 普通 enum const enum
运行时对象 生成 默认不生成(可配置保留)
性能 动态查找,稍慢 内联替换,更快
成员类型 允许常量和计算值 仅允许常量表达式
动态访问 支持(如 Object.keys() 不支持
跨模块/文件 直接支持 需配置支持
调试友好性 否(仅见字面量)
适用场景 需要运行时逻辑或反射 高频使用、追求性能与代码简洁

何时选择?

  • 普通 enum:需要运行时枚举对象、动态访问、计算成员或环境声明。
  • const enum:追求性能优化、代码精简,且无需运行时枚举逻辑。
相关推荐
崔庆才丨静觅10 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby606111 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了11 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅11 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅11 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅12 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment12 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅12 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊12 小时前
jwt介绍
前端
爱敲代码的小鱼12 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax