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