本文分享一个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); // 红色
