如何简化JavaScript多条件if-else代码并使用枚举优化性能？

问题分析 #

你这段代码的核心痛点是多分支if-else维护成本高，尤其是Font Awesome样式类的判断逻辑重复冗余。我们可以用键值映射表（对应枚举的设计思路）替代多分支判断，同时优化字符串替换逻辑提升可靠性。

优化方案 #

1. 用样式映射表替代多分支判断

先定义一个映射对象，把props中的属性名和对应的Font Awesome类名一一对应，后续扩展或修改样式类只需更新这个表即可：

// 定义样式映射表，模拟枚举的键值对应关系
const STYLE_CLASSES = {
  brand: 'fab',
  fab: 'fab',
  regular: 'far',
  far: 'far',
  light: 'fal',
  fal: 'fal',
  old: 'fa',
  fa: 'fa'
};

通过遍历映射表，找到第一个为true的props属性，获取对应的类名（和原if-else的优先级逻辑完全一致）：

options.class.push(`fa-${iconName}`);

let styleClass = 'fas'; // 默认样式类
// 遍历映射表，找到第一个匹配的属性后立即终止
for (const [key, cls] of Object.entries(STYLE_CLASSES)) {
  if (props[key]) {
    styleClass = cls;
    break;
  }
}
options.class.push(styleClass);

2. 优化focusable字符串替换逻辑

原代码的固定字符串匹配<svg 不够鲁棒，遇到<svg （多个空格）会匹配失败，改用正则表达式可以适配各种空格场景：

if (!props.focusable) {
  // 正则匹配<svg标签后的任意空格，替换时添加focusable属性
  svg = svg.replace(/<svg\s+/i, '<svg focusable="false" ');
}

完整优化代码 #

const STYLE_CLASSES = {
  brand: 'fab',
  fab: 'fab',
  regular: 'far',
  far: 'far',
  light: 'fal',
  fal: 'fal',
  old: 'fa',
  fa: 'fa'
};

// 处理focusable属性
if (!props.focusable) {
  svg = svg.replace(/<svg\s+/i, '<svg focusable="false" ');
}
options.domProps = { innerHTML: svg };
} else {
  options.class.push(`fa-${iconName}`);
  
  let styleClass = 'fas';
  for (const [key, cls] of Object.entries(STYLE_CLASSES)) {
    if (props[key]) {
      styleClass = cls;
      break;
    }
  }
  options.class.push(styleClass);
}

优势说明 #

• 简洁性：新增或修改样式类仅需更新STYLE_CLASSES，无需调整条件判断逻辑，代码结构更清晰，可读性更强。
• 性能：遍历映射表的时间复杂度和原if-else一致，但避免了多层嵌套的代码冗余，扩展成本极低。
• 可靠性：正则替换能适配<svg标签后不同数量空格的情况，比固定字符串匹配更鲁棒。

TypeScript下的枚举实现 #

如果用TypeScript开发，可以用enum约束样式类型，获得类型检查的优势：

enum IconStyle {
  Brand = 'fab',
  Fab = 'fab',
  Regular = 'far',
  Far = 'far',
  Light = 'fal',
  Fal = 'fal',
  Old = 'fa',
  Fa = 'fa',
  Solid = 'fas'
}

// 遍历枚举查找匹配的样式
let styleClass = IconStyle.Solid;
for (const key of Object.keys(IconStyle)) {
  const propKey = key.toLowerCase();
  if (props[propKey as keyof typeof props]) {
    styleClass = IconStyle[key as keyof typeof IconStyle];
    break;
  }
}

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