TypeScript【enum 枚举】

news2024/9/21 22:00:34

导语

在 TypeScript 中,新增了很多具有特性的一些数据类型处理方法,enum 【枚举】就是其中,很具有代表性的一种,所以本章节就来聊聊 在 TypeScript 中如何去运用 enum 【枚举】


在这里插入图片描述

枚举的概念

枚举(Enum)类型用于取值被限定在一定范围内的场景,比如一周只能有七天,颜色限定为红绿蓝等。

枚举使用 enum 关键字来定义:

enum DaysDataType {
    Sun,
    Mon,
    Tue,
    Wed,
    Thu,
    Fri,
    Sat
};
console.log(DaysDataType);

默认赋值【自动赋值】

枚举成员默认值会被赋值为从 0 开始递增的索引数字,同时也会对枚举值到枚举名进行反向映射

上面输出打印 枚举 DaysDataType:

在这里插入图片描述

上面声明的枚举,最后被编译为 JS 后,会呈现以下的样式。

在这里插入图片描述


手动赋值

我们也可以给枚举项手动赋值

enum DaysDataType {
    Sun = 7,
    Mon = 14,
    Tue = 21,
    Wed = 54,
    Thu,
    Fri,
    Sat
};
console.log(DaysDataType);

手动赋值后,再次注意看编译后的内容:
在这里插入图片描述

console.log(DaysDataType["Sun"] == 7); //true
console.log(DaysDataType["Mon"] == 14);//true
console.log(DaysDataType["Tue"] == 21);//true
console.log(DaysDataType["Wed"] == 54);//true
console.log(DaysDataType["Thu"] == 55);//true
console.log(DaysDataType["Fri"] == 56);//true
console.log(DaysDataType["Sat"] == 57);//true

上面案例可以看出,未手动赋值的枚举项会接着上一个枚举项的值进行递增

注意:如果手动赋值的为 number 类型的值,下一位如果没有手动赋值则会在上一次的基础上递增。并且所赋值的数字可以被用做数组的下标索引的方式来读取数据,赋值非number类型的不支持通过下标读取

如:

enum DaysDataType {
    Sun = "789",
    Mon = 4546,
    Tue = "415",
    Wed = "asd",
    Thu = "asdasd",
    Fri = 41,
    Sat = "asddf"
};
console.log(DaysDataType);
console.log(DaysDataType[4546]); //Mon
console.log(DaysDataType[41]); //Fri

截止目前TS 枚举手动赋值仅支持 numberstringnullundefined,不支持 Boolean
在这里插入图片描述


值得注意
如果未手动赋值的枚举项与手动赋值的重复了,TypeScript 是不会察觉到这一点的,它会进行一个 后来居上的覆盖处理:

enum DaysDataType {
    Sun = 7,
    Mon = 14,
    Tue = 21,
    Wed = 54,
    Thu = 13,
    Fri,     //14 根据前枚举项 递增,会覆盖掉前面 Mon 的14。
    Sat  //15
};
console.log(DaysDataType[7] == "Sun"); //true

console.log(DaysDataType[14] == "Mon");        //false  被 Fri  覆盖掉了,丢失了唯一性。

console.log(DaysDataType[21] == "Tue"); //true
console.log(DaysDataType[54] == "Wed"); //true
console.log(DaysDataType[13] == "Thu"); //true
console.log(DaysDataType[14] == "Fri"); //true    // Fri 覆盖掉了 Mon
console.log(DaysDataType[15] == "Sat"); //true

在这里插入图片描述

所以使用的时候需要特别注意,尽量避免出现 数据覆盖的情况。

当然:手动赋值的枚举项不仅仅可以不是数字类型,此时需要使用类型断言来让 tsc 无视类型检查 (编译出的 js 仍然是可用的)

enum DaysDataType {
    Sun = 7,
    Mon = 14,
    Tue = 21,
    Wed = 54,
    Thu = 13,
    Fri,
    Sat = <any>"张三"  //类型断言
};

同时,手动赋值的枚举项也可以为小数或负数此时后续未手动赋值的项的递增步长仍为 1

enum DaysDataType {
    Sun = 1.5,
    Mon,
    Tue,
    Wed,
    Thu,
    Fri,
    Sat 
};
console.log(DaysDataType);

在这里插入图片描述


枚举的常数项和计算所得项

枚举项有两种类型:常数项(constant member)和计算所得项(computed member)

前面我们所举的例子都是 常数项,那么 计算所得项又是什么呢?如下案例:

enum Color {Red, Green, Blue = "blue".length};

案例中 Blue 的值是通过 一个字符串的 length 计算而得来的。这种就被称为计算所得项。

注意
如果紧接在计算所得项后面的是未手动赋值的项,那么它就会因为无法获得初始值而报错


常数枚举:

常数枚举是使用 const enum 定义的枚举类型

const enum Directions {
    Up,
    Down,
    Left,
    Right
}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right]; // let directions = [0 /* Directions.Up */, 1 /* Directions.Down */, 2 /* Directions.Left */, 3 /* Directions.Right */];

常数枚举与普通枚举的区别是,它会在编译阶段被删除,并且不能包含计算所得项的枚举成员。主要作用是在编译阶段进行类型检查。
在这里插入图片描述


外部枚举

外部枚举(Ambient Enums)是使用 declare enum 定义的枚举类型。

declare  enum Directions {
    Up,
    Down,
    Left,
    Right
}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

//let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

declare 定义的类型只会用于编译时的检查,编译结果中会被删除

同时使用 declare const 也是可以被支持的

declare const enum Directions {
    Up,
    Down,
    Left,
    Right
}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

编译后:

var directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];

总结:

本章节,主要介绍了在 TypeScript 中 如何应用 enum 【枚举】的使用场景,以及使用枚举的多种定义方式。提供给大家参考学习。


🚵‍♂️ 博主座右铭:向阳而生,我还在路上!
——————————————————————————————
🚴博主想说:将持续性为社区输出自己的资源,同时也见证自己的进步!
——————————————————————————————
🤼‍♂️ 如果都看到这了,博主希望留下你的足迹!【📂收藏!👍点赞!✍️评论!】
——————————————————————————————

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/834972.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

面试热题(最长回文子串)

给你一个字符串 s&#xff0c;找到 s 中最长的回文子串。 如果字符串的反序与原始字符串相同&#xff0c;则该字符串称为回文字符串 输入&#xff1a;s "babad" 输出&#xff1a;"bab" 最长回文子串以前的博客已经讲过KMP算法以及比较不常见的Manacher算法…

详解Spring中涉及的技术

注解 介绍&#xff1a; 注解(Annotation)很重要&#xff0c;未来的开发模式都是基于注解的&#xff0c;JPA是基于注解的&#xff0c;Spring2.5以上都是基于注解的&#xff0c;Hibernate3.x以后也是基于注解的&#xff0c;现在的Struts2有一部分也是基于注解的了&#xff0c;注…

Matlab滤波、频谱分析

Matlab滤波、频谱分析 滤波&#xff1a; 某目标信号是由5、15、30Hz正弦波混合而成的混合信号&#xff0c;现需要设计一个滤波器滤掉5、30Hz两种频率。 分析&#xff1a;显然我们应该设计一个带通滤波器&#xff0c;通带频率落在15Hz附近。 % 滤波 % 某目标信号是由5、15、3…

Python(六十四)字典元素的遍历

❤️ 专栏简介&#xff1a;本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中&#xff0c;我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 &#xff1a;本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…

Cesium 加载ArcGIS Server切片服务错级问题

1.首先上官方api说明 ArcGisMapServerImageryProvider - Cesium Documentation 里面没有 zoomoffset参数!!! 2.如果按照互联网栅格切片规则 3857、4326、4490常用切片层级参数,则直接加载显示地图 viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerI…

购买阿里云vod视频点播服务流程

引言 在当前数字化时代&#xff0c;视频内容的传播越来越重要&#xff0c;而阿里云视频点播服务作为一种强大的视频存储和分发平台&#xff0c;受到越来越多企业和个人的青睐。但是&#xff0c;对于初次接触阿里云视频点播服务的用户来说&#xff0c;购买流程可能会让人有些困…

“东快西慢”格局被重塑 西安智能网联产业发展明显提速

近年来&#xff0c;全球汽车产业迎来新一轮的变革——智能化。智能化变革可谓是对全球汽车产业的再次重塑&#xff0c;这场变革不仅带来了动力及驱动能源和驾驶方式的转变&#xff0c;还使得汽车工业转向新兴市场&#xff0c;中国成为智能网联汽车产业发展的新高地。 在智能网…

企业架构NOSQL数据库之MongoDB

目录 一、背景描述及其方案设计 (一)业务背景描述 &#xff08;二&#xff09;模拟运维设计方案 二、Mongodb介绍 &#xff08;一&#xff09;nosql介绍 &#xff08;二&#xff09;产品特点 1、存储性 2、 效率性 3、结构 三、安装和配置 &#xff08;一&#xff09…

jmeter 5.1彻底解决中文上传乱码

1.修改源码,然后重新打jar包,就是所有上传文件名重新获取文件名 参考链接:多种Jmeter中文乱码问题处理方法 - 51Testing软件测试网 2.修改Advanced,必须选java

电商系统架构设计系列(七):如何构建一个电商的商品搜索系统?

上篇文章中&#xff0c;我给你留了一个思考题&#xff1a;如何构建一个商品搜索系统&#xff1f; 今天这篇文章&#xff0c;我们来说一下电商的商品搜索系统。 引言 搜索这个特性可以说是无处不在&#xff0c;现在很少有网站或者系统不提供搜索功能了&#xff0c;所以&#xf…

Unity Shader:常用的C#与shader交互的方法

俗话说久病成医&#xff0c;虽然不是专业技术美术&#xff0c;但代码写久了自然会积累一些常用的shader交互方法。零零散散的&#xff0c;总结如下&#xff1a; 1&#xff0c;改变UGUI的材质球属性 有时候我们需要改变ui的一些属性&#xff0c;从而实现想要的效果。通常UGUI上…

GEE:矢量数据去除重复值(输出样本点数据的标签信息)

作者:CSDN @ _养乐多_ 本文记录了在GoogleEarthEngine(GEE)平台上,将样本点数据中某个字段的值去除重复值,并将剩下的值打印到控制台的代码。该代码可以用于快速在GEE平台上查询土地利用分类信息中landcover的类别信息。 矢量数据信息如下所示, 打印结果如下所示, 文章…

【Linux】【docker】安装sonarQube免费社区版9.9

文章目录 sonarQube 镜像容器Linux 安装镜像出现 Permission denied的异常安装sonarQube 中文包重启服务 代码上传到sonarQube扫描配置 JS TS Php Go Python sonarQube 镜像容器 老样子第一步还是打开镜像容器官网https://hub.docker.com搜索sonarqube官方推荐的挂载目录 我就按…

LeetCode 热题 100 JavaScript --226. 翻转二叉树

给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 3&#xff1a; 输入&#xff1a;root [] 输出&#xff1a;[] 提示&#xff1a; 树中节点数目范围在 [0, 100] 内 -100 < Node.val < 100 var invertTree function(root…

使用“纯”Servlet做一个单表的CRUD操作

1. 项目说明 介绍&#xff1a; 这里我们使用 纯粹 的 Servlet 完成单表【对部门的】的增删改查操作。&#xff08;B/S结构的。&#xff09; 结构图 初始的欢迎页面 部门列表页面 部门详情 修改部门 删除部门&#xff1a; 新增部门&#xff1a; 2. 具体对应的功能的代码实现 …

为什么马斯克和奥特曼都想重振加密货币?

1、前言 加密货币已经死了吗&#xff1f;这个问题的答案取决于谁来回答。一个加密爱好者会给你一百个不同的理由来解释为什么加密货币没有死。特斯拉CEO埃隆马斯克和OpenAI CEO 山姆奥特曼都对加密货币及其在塑造未来世界中的潜在作用有着浓厚的兴趣。 在过去很长一段时间里&…

Ubuntu18.04 安装opencv 4.8.0教程

1. 安装准备 安装前需要下载一些必须的依赖项。 不同版本opencv依赖会有不同&#xff0c;具体见官网opencv安装 sudo apt-get install build-essential sudo apt-get install cmake git libgtk2.0-dev pkg-config libavcodec-dev libavformat-dev libswscale-dev sudo apt-…

视频汇聚平台EasyCVR视频广场侧边栏支持拖拽

为了提升用户体验以及让平台的操作更加符合用户使用习惯&#xff0c;我们在EasyCVR v3.3版本中&#xff0c;支持面包屑侧边栏的广场视频、分组列表、收藏这三个模块拖拽排序&#xff0c;并且该操作在视频广场、视频调阅、电子地图、录像回放等页面均能支持。 TSINGSEE青犀视频…

InfluxDB2如何求增量数据

需求 项目中需要接入电表设备&#xff0c;求用电量。 按天和设备统计用电量 按天统计用电量 统计总用电量 存在的问题 difference 函数可以求增量&#xff0c;但是以上计算均存在一个问题&#xff0c;比如xx设备有8.1号和8.2号的数据&#xff0c;我统计每天的用电量&#xf…

单篇笔记曝光248万+,素颜、寸头…小红书女性种草新趋势分析!

最近&#xff0c;小红书上刮起一阵素颜、寸头&#xff0c;拒绝美丽绑架的风潮&#xff0c;他们称之为“脱美役”&#xff0c;即脱离美丽枷锁&#xff0c;做自己&#xff0c;接纳原本的自己。这是女性觉醒的又一阵风&#xff0c;品牌要如何跟上这波种草新趋势呢&#xff1f; 单篇…