前端 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

相关推荐
Eliauk__5 分钟前
深入浅出聊聊跨域:它到底是个啥,怎么破?
前端·javascript·面试
行星飞行7 分钟前
Review-Gate MCP,让你的 cursor request 次数翻 5 倍
前端
小磊哥er9 分钟前
【前端AI实践】DeepSeek:开源大模型的使用让开发过程不再抓头发
前端·vue.js·ai编程
Vesper6318 分钟前
【Vue】Vue2/3全局属性配置全攻略
前端·javascript·vue.js
伍哥的传说19 分钟前
React Toast组件Sonner使用详解、倒计时扩展
前端·javascript·react.js·前端框架·ecmascript
徐志伟啊23 分钟前
ElTree组件可以带线了?
前端·vue.js·前端框架
&白帝&23 分钟前
Vue 3 常用响应式数据类型详解:ref、reactive、toRef 和 toRefs
前端·javascript·vue.js
Hanbox24 分钟前
从零开始:React+ECharts动态地理数据可视化
前端
邹荣乐25 分钟前
Vue3中Sass的安装与使用指南:轻松上手CSS预处理器
前端·javascript·vue.js
电商API_1800790524725 分钟前
淘宝天猫商品数据爬取方案:官方API与非官方接口对比
linux·服务器·开发语言·前端·爬虫·python·数据挖掘