如何优雅地在JS中使用枚举定义
时间:2022-07-25
本文章向大家介绍如何优雅地在JS中使用枚举定义,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Contents
如何优雅地在JS中使用枚举
为什么使用枚举
- 去魔法数字
- 枚举语义化
- 定义一体化:枚举值和枚举描述写在了一起,不分散
- 使用方便:无需额外的过滤器
如何解释
- 去魔法数字
看如下代码
// bad
<span v-if="status == 0">审核中</span>
<span v-else-if="status == 1">审核通过</span>
<span v-else-if="status == 2">审核不通过</span>
// bad
if(status===1 || status === 2){
console.log('statu',status)
}
这种代码,后人维护根本无非理解 1
,2
这种数字代表的是什么意义,导致维护困难,难于理解业务逻辑等
- 枚举语义化
我们对此加以改造
const STATUS = {
"WAIT":1,
"ERROR":2
}
if(status===STATUS.WAIT || status === STATUS.ERROR){
console.log('statu',status)
}
通过简单的改造,我们有了一种新的使用方式,事先定义一个对象,每个键对应相关的值,在代码书写中我们可以轻易的理解是状态等于WAIT
,ERROR
,即等待或失败
但是这样还不够简洁方便,例如:我们需要获取状态为1
时的描述
我们可以这样做:
const STATUS_CONFIG = {
[STATUS.WAIT]:'审核中',
[STATUS.ERROR]:'审核失败'
}
具体使用
<span>STATUS_CONFIG[status]</span>
但是这样就又面临一个新问题,每一个定义的值与描述都要分开重写,这样造成大量的重复性工作
- 使用方便:无需额外的过滤器
我们自定义一个createEnum
方法
/**
* 枚举定义工具
* 示例:
* const STATUS = createEnum({
* AUDIT_WAIT: [1, '审核中'],
* AUDIT_PASS: [2, '审核通过']
* })
* 获取枚举值:STATUS.AUDIT_WAIT
* 获取枚举描述:STATUS.getDesc('AUDIT_WAIT')
* 通过枚举值获取描述:STATUS.getDescFromValue(STATUS.WAIT)
*
*/
export default function createEnum(definition) {
const strToValueMap = {}
const numToDescMap = {}
for (const enumName of Object.keys(definition)) {
const [value, desc] = definition[enumName]
strToValueMap[enumName] = value
numToDescMap[value] = desc
}
return {
...strToValueMap,
getDesc(enumName) {
return (definition[enumName] && definition[enumName][1]) || ''
},
getDescFromValue(value) {
return numToDescMap[value] || ''
}
}
}
下面我们用工具类重写上述的案例
const STATUS = createEnum({
AUDIT_WAIT: [1, '审核中'],
AUDIT_PASS: [2, '审核通过']
})
if(status===STATUS.WAIT || status === STATUS.ERROR){
console.log('statu',status)
}
<p>当前状态:{STATUS.getDescFromValue(status)}</p>
<p>也可用通过枚举名称获取描述:{STATUS.getDesc('AUDITING')}</p>
关于
由于js
没有枚举这一概念,借助JAVA
思想,我们编写创建枚举方法
本文首发于:如何在JS中使用枚举定义
- 美女程序媛发福利,读懂ANR的trace文件So easy
- Openshift高阶探索实验
- 卡卡卡!小萝莉告诉你开发iOS应用如何避免卡顿
- Bugly即将支持的ANR,精神哥告诉你是个什么鬼?
- Go语言Goroutine与Channel内存模型
- 手把手教 | 深度学习库PyTorch(附代码)
- 如何定位Obj-C野指针随机Crash(一):先提高野指针Crash率
- 如何定位Obj-C野指针随机Crash(二):让非必现Crash变成必现
- 六种开发环境部署大全:基于Openshift
- 手把手教你由TensorFlow上手PyTorch(附代码)
- 如何定位Obj-C野指针随机Crash(三):如何让Crash自报家门
- 【MIG专项测试组】腾讯手机管家实战分析:内存突增是为神马?
- 全系统栈崩溃是什么鬼?手机管家高级工程师 jaylin,教你如何抓鬼!
- 【团队分享】苍翼之刃:论File Descriptor泄漏如何导致Crash?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 一天一大 leet(除数博弈)难度:简单-Day20200724
- 一天一大 leet(不同路径 II)难度:中等-Day20200706
- Helm部署应用时RBAC权限报错“secrets is forbidden: User "system:...”
- 原来Python自带了数据库,用起来真方便!
- 一天一大 leet(路径总和)难度:简单-Day20200707
- 一天一大 leet(无重复字符的最长子串)难度:中等-more-001
- 一天一大 leet(交错字符串)难度:困难-Day20200718
- 我把公司 10 年老系统改造 Maven,真香!!
- 一天一大 leet(恢复空格)难度:中等-Day20200709
- 一天一大 leet(旋转数组的最小数字)难度:简单-Day20200721
- 一天一大 leet(最佳买卖股票时机含冷冻期)难度:中等-Day20200710
- 一天一大 leet(戳气球)难度:困难-Day20200719
- 一天一大 leet(不同的二叉搜索树 II)难度:中等-Day20200721
- 组合游戏系列5: 井字棋、五子棋AlphaGo Zero 算法实战
- 一天一大 leet(最小路径和)难度:中等-Day20200723