TypeScript枚举映射查找函数：遍历两次返回undefined问题排查

这种情况大概率是因为你使用的TypeScript枚举在编译后会生成双向映射，导致枚举对象中同时包含正向（枚举键→枚举值）和反向（枚举值→枚举键）的键值对，遍历的时候会把这8个键都扫一遍。

举个例子，假设你的枚举定义是：

enum LookupEnum {
  Option1 = 'opt1',
  Option2 = 'opt2',
  Option3 = 'opt3',
  Option4 = 'opt4'
}

编译后的JavaScript代码会自动添加反向映射：

var LookupEnum;
(function (LookupEnum) {
    LookupEnum["Option1"] = "opt1";
    LookupEnum["Option2"] = "opt2";
    LookupEnum["Option3"] = "opt3";
    LookupEnum["Option4"] = "opt4";
    LookupEnum["opt1"] = "Option1";
    LookupEnum["opt2"] = "Option2";
    LookupEnum["opt3"] = "Option3";
    LookupEnum["opt4"] = "Option4";
})(LookupEnum || (LookupEnum = {}));

当你遍历这个枚举的所有键时，会同时拿到Option1、Option2、Option3、Option4和opt1、opt2、opt3、opt4这8个键。如果你的映射函数只处理正向的枚举键，那处理反向键时就会返回undefined，最终数组就会出现前4个undefined、后4个正确对象的情况。

你需要在遍历的时候过滤掉反向映射的键，只保留正向的枚举键。常见的过滤方式有三种：

• 判断键是否为枚举的原始成员
  如果是字符串枚举，反向键是枚举值（字符串），可以通过判断键是否无法转换为数字来过滤：

  const enumToArray = (enumObj) => {
    return Object.keys(enumObj)
      .filter(key => isNaN(parseInt(key)))
      .map(key => ({
        label: key,
        value: enumObj[key]
      }));
  };
  

• 使用Object.values结合Set去重
  如果只需要枚举的实际值，可以先取所有值再去重，之后再映射：

  const enumToArray = (enumObj) => {
    return [...new Set(Object.values(enumObj))]
      .filter(value => typeof value === 'string')
      .map(value => ({
        label: value,
        value: value
      }));
  };
  

• TypeScript环境下用类型约束提取成员
  直接用keyof typeof获取枚举的原始键，避免遍历到反向映射：

  type LookupKeys = keyof typeof LookupEnum;
  const enumToArray = () => {
    return (Object.keys(LookupEnum) as LookupKeys[])
      .map(key => ({
        label: key,
        value: LookupEnum[key]
      }));
  };
  

内容的提问来源于stack exchange，提问作者Sean