本文分享一个js枚举值enums在业务中的应用
不使用枚举值面临的问题
1、问题1
比如写vue组件的时候，需要多层传递参数，如果是二选一还好，传递一个bool值，true/false。
如果是有很多值，传递0、1、2、3…，过短时间来看代码，不知道什么心情
2、问题2
如果不使用枚举值，代码中到处是字符串 ‘red’， 有一天后端接口说这个枚举值需要修改一下，处处修改代码，稍有不慎，将面临雪崩，导致一些未能及时发现的问题
正常来说，定义好枚举值之后，不应该随意修改，可是接口代码在后端同学手里，你自然无法控制
当然也可以说服后端同学不要改
如何使用枚举值
1、第一步：定义枚举值
// enums.js
// 颜色枚举值，可以是字符串，也可以是数值
export const colorEnum = {
RED: 'red',
GREEN: 'green',
BLUE: 'blue',
}
// 颜色枚举值和显示值对应关系，也可以包含其他字段属性
// 该数据也可以用于select下拉选择
export const colorOptions = [
{
label: '红色',
value: colorEnum.RED,
},
{
label: '绿色',
value: colorEnum.GREEN,
},
{
label: '蓝色',
value: colorEnum.BLUE,
},
]
// 可能在不同的场景下，显示不一样的值，也可支持传递额外参数
export function getColorLabel(colorValue) {
for (let item of colorOptions) {
if (item.value == colorValue) {
return item.label
}
}
}2、第二步：使用枚举值
使用场景一：真实值 和 枚举值 做逻辑判断
import { colorEnum } from './enums.js'
// 可以通过接口返回的 真实值 和 枚举值 做逻辑判断
let res = { color: 'red' }
// 最好使用 ===，减少不必要的错误
console.log(colorEnum.RED == res.color);
// true使用场景二：真实值 转换 显示值
后端接口返回一个list列表，列表没有返回显示值，需要通过真实值进行转换显示
import { getColorLabel } from './enums.js'
// 这个时候，服务端的接口返回了一个值 red
// 通过 值 获取 显示内容，显示到界面
let colorLabel = getColorLabel('red');
console.log(colorLabel);
// 红色
