前端业务常量的快捷使用方案:value=>label映射

在前端开发时，经常会使用到业务常量

如下：

const fieldType = [
  { value: 1, label: '文本' },
  { value: 2, label: '数字' },
  { value: 3, label: '视频' },
]

1. 当做表单输入的可选项被遍历

作为select、radio、checkbox等的选项值

<el-select v-model="type">
  <el-option
    v-for="item in fieldType"
    :key="item.value"
    :label="item.label"
    :value="item.value"
  >
  </el-option>
</el-select>

这是常量最普遍被使用的方式，所以大多数常量都被存储为数组，并且包含value、label两个字段

2. 把value转为label显示

有时后端提供的数据的是value，那么前端显示时需要把数字转化为文字。这个过程在实践中，是很重复、繁琐的：

enumsFilter(value) {
  if (!value) {
    return ''
  }
  const item = fieldType.find(item => item.value === value)
  return item ? item.label : ''
}

这段逻辑无处不在，很恶心。

最终解决方案

export const fieldType = createEnum([
  { value: 1, label: '文本'},
  { value: 2, label: '数字' },
  { value: 3, label: '视频'}
])
fieldType()  // list
fieldType(1)  // '文本'
fieldType('文本')  // 1

createEnum返回的是函数，通过传参来获取不同的数据，类似于枚举的效果。

全部代码

 const source = [
        { value: 1, label: "test1" },
        { value: 2, label: "test2" },
        { value: 3, label: "test3" },
      ];
      function createEnum(source) {
        const enumMap = new Map();
        source.map((item) => {
          enumMap.set(item.label, item.value);
          enumMap.set(item.value, item.label);
        });

        return function (key) {
          if (key !== undefined) {
            return enumMap.get(key) || "";
          } else {
            return source;
          }
        };
      }