06 # 枚举类型

简介: 06 # 枚举类型

一个角色判断例子

function initByRole(role) {
    if (role === 1 || role === 2) {
        // do sth
    } else if (role === 3 || role === 4) {
        // do sth
    } else if (role === 5) {
        // do sth
    } else {
        // do sth
    }
}


上面的代码存在的问题:

  • 可读性差:很难记住数字的含义
  • 可维护性差:代表角色的数字硬编码了,牵一发动全身

可以使用 ts 里的枚举类型来解决

枚举

枚举:一组有名字的常量集合。(可以理解成手机里的通讯录:姓名-手机号)

数字枚举

默认取值从 0 开始,后面的成员递增。

enum Role {
    Reporter,
    Developer,
    Maintainer,
    Owner,
    Guest
}
console.log(Role);


枚举的实现原理:反向映射:既可以使用 key 索引,也可以使用 value 索引


字符串枚举

字符串枚举不能进行反向映射

enum Message {
    Success = 'success',
    Fail = 'fail'
}
console.log(Message);




异构枚举

数字枚举与字符串枚举混用(不建议使用,容易引起混淆)

enum Status {
    OK = 200,
    Error = 'Error'
}
console.log(Status);



枚举成员

枚举成员的值只读。

Role.Reporter = 2; // 无法为“Reporter”赋值,因为它是只读属性。


枚举成员分类:

  • 常量枚举成员:会在编译的过程中计算出结果,以常量的形式出现在运行时环境
  • 没有初始值
  • 对已有枚举的引用
  • 一些常量表达式
  • 计算枚举成员:非常量的表达式,其值会在运行时环境计算
  • 注意: 计算枚举成员后的枚举成员要赋予初始值
enum Char {
    // const
    a,
    b = Char.a,
    c = 1 + 3,
    // computed
    d = Math.random(),
    e = '123'.length,
    f = 4
}

常量枚举

用 const 声明的枚举就是一个常量枚举。

特性:会在编译阶段被移除。编译后没有任何代码。

作用:当我们不需要一个对象,但需要对象值的时候,可以使用常量枚举。可以减少编译环境的代码。

const enum Month {
    Jan,
    Feb,
    Mar
}
let month = [Month.Jan, Month.Feb, Month.Mar]


枚举类型

enum E {
    a,
    b
}
enum F {
    a = 0,
    b = 1
}
enum G {
    a = "apple",
    b = "banana"
}
let e: E = 1;
let f: F = 1;
// 此比较似乎是无意的,因为类型“E”和“F”没有重叠。
// e === f
let e1: E.a;
let e2: E.b;
let e3: E.a;
let g1: G = G.b;
let g2: G.a = G.a;



目录
相关文章
|
10月前
|
人工智能
论坛24小时智能回帖,宜搭+DeepSeek就该这么玩!
演义云:外事不决问周瑜,内事不决问张昭。2025,万事不决问AI。论坛中常有难题困扰用户,Deepseek的加入让问题迎刃而解。然而,初期由于接口速度慢和超时问题,团队将接口拆分为两个,并采用异步调用方式,最终成功实现了AI智能回复功能,效果非常出色。通过集成自动化和定时触发机制,解决了Deepseek接口响应慢的问题,使论坛问答更加高效智能。
647 79
|
Web App开发 移动开发 前端开发
H5微信外支付(移动端浏览器)
H5微信外支付(移动端浏览器)
512 1
 H5微信外支付(移动端浏览器)
|
开发框架 前端开发 JavaScript
在Vue前端项目中,附件展示的自定义组件开发
在Vue前端项目中,附件展示的自定义组件开发
在Vue前端项目中,附件展示的自定义组件开发
|
11月前
|
前端开发 小程序
uniapp-实现轮播图效果深度总结【建议收藏】
这是一篇关于前端轮播图实现的详细教程,作者通过多个步骤介绍了如何使用 Vue3 和 Swiper 组件创建一个功能丰富的轮播图。
1040 2
|
10月前
|
存储 人工智能 安全
业财一体 ERP 数智化管理系统
业财一体 ERP 数智化管理系统是基于钉钉 + 钉钉低代码构建,作为企业管理体系数字化转型升级的驱动器,目标是将业务管理与财务管理深度融合,帮助企业构建一个集成、高效、智能的管理体系。旨在通过先进的信息技术,打通各业务模块数据传递链路,进行业务财务的一体化管理,采取智能化手段大幅度提升工作效率,逐步实现企业数字化转型和智能化改造。
527 12
|
算法 小程序 Java
java制作海报三:获取微信二维码详情,并改变大小,合成到海报(另一张图片)上
这篇文章介绍了如何使用Java获取微信小程序的二维码,并将其调整大小后合成到海报(另一张图片)上。
251 0
|
JavaScript 前端开发 CDN
vue 生成分享海报、下载图片(含生成二维码qrcodejs2的使用,网页截屏html2canvas的使用)
vue 生成分享海报、下载图片(含生成二维码qrcodejs2的使用,网页截屏html2canvas的使用)
453 0
vue 生成分享海报、下载图片(含生成二维码qrcodejs2的使用,网页截屏html2canvas的使用)
文本,vitepress如何插入图片,做背景图片的设计,Typora如何设置存放图片的位置
文本,vitepress如何插入图片,做背景图片的设计,Typora如何设置存放图片的位置
|
JavaScript 前端开发
若依框架 --- 偶发的el-select无法选择的问题
若依框架 --- 偶发的el-select无法选择的问题
755 0
|
域名解析 存储 网络安全
WordPress外贸建站教程
这篇WordPress外贸建站教程是以实操形式写给没有任何建站基础的新手,不管你是不是技术小白,都可以轻松学会如何使用WordPress来自己建立一个实用的外贸网站,而不需要深入了解复杂的代码编程。梳理了WordPress外贸建站主要步骤,从最初的成本分析开始,然后逐步介绍域名选择和注册、虚拟主机选择、建站程序安装等关键步骤。
775 3