1.概述
枚举用于定义数据集合,使用枚举可以定义一些带名字的常量,有普通枚举、字符串枚举和常量枚举等类型。
2.示例
- 普通枚举:初始值默认为 0,其余的属性按顺序依次递增。
enum Color {
Red,
Blue,
Green
}
console.log(Color.Red); //0
// const red:Color=Color.Red;
// console.log(red);
复制代码
也可手动设置初始值(其余的属性依旧按顺序递增):
enum Color {
Red=3,
Blue,
Green
}
console.log(Color.Red); //3
复制代码
- 字符串枚举:
enum Color {
Red='红色',
Blue='蓝色',
Green='绿色'
}
console.log(Color.Blue); //蓝色
复制代码
- 常量枚举:使用 const 关键字修饰的枚举
const enum Color {
Red,
Blue,
Green
}
console.log(Color.Red,Color.Blue,Color.Green); //0 1 2
复制代码
3.枚举的实际应用
//enum.ts
/** 登录状态 */
export enum LoginStatus { //普通枚举
Login,
Register,
}
//LoginStatus[0]---'Login'
//index.vue
<template>
<el-button color="#4A52FF" class="w-284px h-54px rounded-6px text-20px font-light" type="primary"
@click="userLogin">
登录
</el-button>
</template>
<script setup lang='ts'>
import { LoginStatus } from '~/types';
</script>
复制代码
可修改为:
//enum.ts
/** 登录状态 */
export enum LoginStatus { //中文的字符串枚举
'登录',
'注册',
}
//LoginStatus['登录']---0
//LoginStatus[0]---登录
//index.vue
<template>
<el-button color="#4A52FF" class="w-284px h-54px rounded-6px text-20px font-light" type="primary"
@click="userLogin">
{{ LoginStatus[0] }} //登录
</el-button>
</template>
<script setup lang='ts'>
import { LoginStatus } from '~/types';
</script>
复制代码
英文的普通枚举
只有一种作用:只能通过数组下标读出枚举里的属性,不便于代码的理解。
LoginStatus[0]---'Login'
中文的字符串枚举
有两种作用:
1.当用中文形式时,可以显示出对象属性的索引。LoginStatus['登录']---0
2.当用数组下标形式时,可以显示出中文,以便提高代码的可读性与理解。LoginStatus[0]---登录文章来源:https://www.toymoban.com/news/detail-602240.html
所以,项目中建议使用中文的字符串枚举。
参考:https://juejin.cn/post/7137982601481945102
文章来源地址https://www.toymoban.com/news/detail-602240.html
到了这里,关于TS—枚举Enum用法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!