前端 TS 快速入门之六:枚举 enum

1. 数字枚举

枚举类型的值是数字类型,因此它们被称为数字类型枚举,成员的值可以不用初始化,因为具有自增行为。

javascript 复制代码
// 默认自增
enum Person {
  name,
  age,
}
Person.name; // 0
Person.age; // 1

// 可人为自行修改
enum Person {
  name = 2,
  age = 1,
}
Person.name; // 2
Person.age; // 1

2. 数字枚举的反向映射

数字枚举成员还具有 反向映射 的特性,从枚举值到枚举名字,要注意的是 不会为字符串枚举成员生成反向映射。

javascript 复制代码
enum Person {
  name,
  age,
}
Person; // { '0': 'name', '1': 'age', name: 0, age: 1 }
Person[1]; // age

enum Person {
  name = "名字",
  age = "年龄",
}
Person; // { name: '名字', age: '年龄' }

3. 字符串枚举

在一个字符串枚举里,每个成员都必须用字符串字面量,或另外一个字符串枚举成员进行初始化。

javascript 复制代码
enum Person {
  name = "名字",
  age = "年龄",
}
Person.name; // 名字
Person.age; // 年龄

4. 异构枚举

枚举可以混合字符串和数字成员,但一般没必要这么做。

javascript 复制代码
enum Person {
  name = 1,
  age = 2,
  man = "男",
  wuman = "女",
}
Person.name; // 1
Person.man; // 男

5. 常量枚举

用 const 修饰符来定义,常量枚举不同于常规的枚举,他们会在编译阶段被删除。

因此常量枚举会带来一个对性能的提升。

javascript 复制代码
const enum Size {
  WIDTH = 10,
  HEIGHT = 20,
}
const area = Size.WIDTH * Size.HEIGHT; // 200
Size; // 'const' enums can only be used in property or index access expressions or the right hand side of an import declaration or export assignment or type query

上一章:前端 TS 快速入门之五:泛型 T

相关推荐
xkxnq7 分钟前
第二阶段:Vue 组件化开发(第 17天)
javascript·vue.js·ecmascript
豆苗学前端12 分钟前
你所不知道的前端知识,html篇(更新中)
前端·javascript·面试
一 乐13 分钟前
绿色农产品销售|基于springboot + vue绿色农产品销售系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·后端·宠物
zzjyr14 分钟前
Webpack 生命周期原理深度解析
前端
xiaohe060116 分钟前
💘 霸道女总裁爱上前端开发的我
前端·游戏开发·trae
sophie旭19 分钟前
内存泄露排查之我的微感受
前端·javascript·性能优化
k***19527 分钟前
Spring 核心技术解析【纯干货版】- Ⅶ:Spring 切面编程模块 Spring-Instrument 模块精讲
前端·数据库·spring
rgeshfgreh1 小时前
Spring事务传播机制深度解析
java·前端·数据库
Hilaku2 小时前
我用 Gemini 3 Pro 手搓了一个并发邮件群发神器(附源码)
前端·javascript·github