js：前端使用枚举enums的实际应用

前端代码中应该避免直接使用接口返回的枚举值：0、1、2、3...

使用语义化的方式来处理枚举值

定义一个枚举对象创建函数

// 创建枚举对象，用于界面显示转换
function createEnumObject(enums) {
  let labels = null
  let values = null

  return {
    getLabels() {
      if (!labels) {
        labels = enums.map((item) => item.label)
      }
      return labels
    },

    getValues() {
      if (!values) {
        values = enums.map((item) => item.value)
      }
      return values
    },

    getLabel(value) {
      let index = this.getValues().indexOf(value)

      if (index > -1) {
        return this.getLabels()[index]
      }
    },

    getValue(label) {
      let index = this.getLabels().indexOf(label)

      if (index > -1) {
        return this.getValues()[index]
      }
    },

    getItem(valueOrLabel) {
      let index = this.getValues().indexOf(valueOrLabel)

      if (index < 0) {
        index = this.getLabels().indexOf(valueOrLabel)
      }

      if (index > -1) {
        return enums[index]
      }
    },
  }
}

           

// 枚举值，用于逻辑判断
const statusEnum = {
  // 待支付
  WaitPay: 0,
  // 已完成
  Success: 1,
  // 已取消
  Cancel: 2,
}

// 枚举值配置，用于属性扩展
const statusEnumConfig = [
  {
    value: statusEnum.WaitPay,
    label: '待支付',
    color: 'yellow',
    // 支付 取消支付
    actions: ['pay', 'cancel'],
  },
  {
    value: statusEnum.Success,
    label: '已完成',
    color: 'green',
    // 查看详情 退款
    actions: ['detail', 'return'],
  },
  {
    value: statusEnum.Cancel,
    label: '已取消',
    color: 'red',
    // 查看详情
    actions: ['detail'],
  },
]

// 枚举值对象，用于数值转换
const statusEnumObj = createEnumObject(statusEnumConfig)
           

console.log(statusEnumObj.getItem(1))
// {
//   value: 1,
//   label: '已完成',
//   color: 'green',
//   actions: [ 'detail', 'return' ]
// }

console.log(statusEnumObj.getValue('已完成'))
// 1

// 没有对应的值返回undefined
console.log(statusEnumObj.getValue(1))
// undefined

// 接口返回的真实数值，转换为显示值
console.log(statusEnumObj.getLabel(1))
// 已完成

// 接口返回的数值，做逻辑判断
console.log(statusEnum.Success == 1);
// true