JavaScript中如何缩短URL匹配场景下的多if条件判断代码

原代码存在的问题：

• 存在多处笔误会导致逻辑失效：page TypeArray变量名含多余空格、正则.*loan. */. *reward.*/否定预查正则中存在不必要的空格，loan reward缺少竖线分隔符，都会导致匹配失败。
• 匹配规则与业务逻辑强耦合，每新增一条规则就要新增一套if判断代码，量大后维护难度极高，且未分类判断的正则需要同步修改，容易出错。

优化核心思路 #

把匹配规则和业务逻辑完全分离，所有匹配规则抽成独立的配置集合，通用匹配逻辑复用，后续新增规则仅需修改配置即可，无需调整逻辑代码。

优化后代码 #

const pageTypeArray = [];
const currentUrl = window.location.href;
// 匹配规则配置，新增规则仅需往该数组加项即可
const matchRules = [
  { regex: /product/, type: 'productDetail' },
  { regex: /login/, type: 'login' },
  { regex: /loan/, type: 'loanDetail' },
  { regex: /reward/, type: 'reward' }
];

// 统一匹配逻辑
matchRules.forEach(rule => {
  if (rule.regex.test(currentUrl)) {
    pageTypeArray.push(rule.type);
  }
});

// 无匹配时添加未分类标识，不需要写复杂正则
if (pageTypeArray.length === 0) {
  pageTypeArray.push('uncategorized');
}

优化点说明 #

• 规则配置化：后续新增匹配条件只需要在matchRules数组中新增{regex: 你的正则, type: 对应的页面类型}结构的项即可，不需要修改其他代码，维护效率提升明显。
• 性能优化：使用正则的test方法替代match，仅判断是否匹配无需返回匹配结果，执行效率更高。
• 未分类逻辑简化：直接判断结果数组是否为空即可判定是否未分类，不再需要维护复杂的否定预查正则，避免新增规则时漏改否定正则的问题。

内容的提问来源于stack exchange，提问作者The Tag Manager