TS中的enum变量和普通object区别

吃杠碰小鸡

已于 2025-01-03 14:50:28 修改

阅读量374

点赞数 7

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript 前端 typescript

于 2025-01-02 20:10:16 首次发布

本文链接：https://blog.csdn.net/hole_diss/article/details/144893234

前端专栏收录该内容

37 篇文章

订阅专栏

文章目录

这两种数据经常混用，但是也有一定区别

一、定义

enum变量通常用使用常量
object则没有限制值的类型

// 案例
enum Direction {
    Up,
    Down,
    Left,
    Right
}
const direction = {
    Up: 'UP',
    Down: 'DOWN',
    Left: {},
    Right: []
};

二、编译后的输出

enum变量编译后时向映射，会默认添加数字索引，其次是自定义枚举的索引
enum变量读取属性的时候，可以使用两种索引
普通object，不变；典型key：value结构

var Direction;
(function (Direction) {
    Direction[Direction["Up"] = 0] = "Up";
    Direction[Direction["Down"] = 1] = "Down";
    Direction[Direction["Left"] = 2] = "Left";
    Direction[Direction["Right"] = 3] = "Right";
})(Direction || (Direction = {}));
// 等同于
{
    "0": "Up",
    "1": "Down",
    "2": "Left",
    "3": "Right",
    "Up": 0,
    "Down": 1,
    "Left": 2,
    "Right": 3
}
console.log(Direction[0]); // "Up"
console.log(Direction.Up); // 0
// 普通object，不变
const direction = {
    Up: 'UP',
    Down: 'DOWN',
    Left: {},
    Right: []
};

三、类型安全

enum变量定义的变量，值会被检测，超出enum所有枚举值以外的赋值会报错
普通object，没有检验，赋值、读取、删除都不受限制（一般如此，可以通过Object.definePropertype配置，或使用Proxy 对象增加限制）

let dir: Direction = Direction.Up; // 正确
dir = 5; // 错误：不能将类型 '5' 分配给类型 'Direction'

四、使用场景

enum变量常使用于固定场合，其中的枚举值不会动态改变（可以理解为前端可以写死的数据）
普通object可以更加方便的扩展和存储数据