JavaScript多条件if语句优化最佳实践

在Angular项目中实现了无需依赖Owl Carousel的每屏多图响应式轮播组件，通过屏幕宽度动态设置每屏展示的图片数量。但CodeMetrics检测显示getCut()函数的圈复杂度为10，需要优化。

原代码 #

imgsHistoria = [
  "../../assets/imgs/historia/hist_01.png",
  "../../assets/imgs/historia/hist_02.png",
  "../../assets/imgs/historia/hist_03.png",
  "../../assets/imgs/historia/hist_04.png",
  "../../assets/imgs/historia/hist_05.png",
  "../../assets/imgs/historia/hist_06.png",
  "../../assets/imgs/historia/hist_07.png",
  "../../assets/imgs/historia/hist_08.png",
  "../../assets/imgs/historia/hist_09.png",
  "../../assets/imgs/historia/hist_10.png",
];

imgsHistoriaArray = [];
resizeCarousel() {
  let images = this.imgsHistory;
  let cut = this.getCut();
  this.imgsHistoryArray = [];

  for (var i = 0; i < images.length; i = i + cut) {
    this.imgsHistoryArray.push(images.slice(i, i + cut));
  }
}

getCut() {
  if (this.getScreenWidth < 480) {
    return 1
  } if (this.getScreenWidth < 576) {
    return 2
  } if (this.getScreenWidth < 768) {
    return 3
  } if (this.getScreenWidth < 992) {
    return 4
  }
  return 6;
}

问题分析 #

原getCut()函数使用多个独立的if分支，每个分支都会被依次判断，导致圈复杂度飙升。CodeMetrics会将每个独立if视为一个分支节点，最终计算出较高的复杂度值。

优化方案 #

方案1：使用配置数组遍历（推荐，可维护性最高）

将屏幕宽度断点与对应图片数封装为配置数组，通过线性遍历匹配条件。这种方式不仅能大幅降低圈复杂度，还能将配置与逻辑分离，后续修改断点或图片数时无需改动判断逻辑。

getCut(): number {
  // 配置数组：[屏幕宽度阈值, 对应每屏图片数]，按从小到大排序
  const breakpoints: [number, number][] = [
    [480, 1],
    [576, 2],
    [768, 3],
    [992, 4],
  ];

  for (const [widthThreshold, imageCount] of breakpoints) {
    if (this.getScreenWidth < widthThreshold) {
      return imageCount;
    }
  }

  // 超出所有阈值时返回默认值
  return 6;
}

方案2：改用链式三元表达式

通过链式三元表达式替代多分支if，代码更简洁，圈复杂度也会显著降低，适合逻辑简单的场景。

getCut(): number {
  return this.getScreenWidth < 480 ? 1 :
         this.getScreenWidth < 576 ? 2 :
         this.getScreenWidth < 768 ? 3 :
         this.getScreenWidth < 992 ? 4 : 6;
}

方案3：替换为else if分支

将原独立if改为else if链式判断，一旦匹配到条件就停止后续判断，能直接降低圈复杂度（原独立if的复杂度为10，改用else if后复杂度会降至5左右）。

getCut(): number {
  if (this.getScreenWidth < 480) {
    return 1;
  } else if (this.getScreenWidth < 576) {
    return 2;
  } else if (this.getScreenWidth < 768) {
    return 3;
  } else if (this.getScreenWidth < 992) {
    return 4;
  } else {
    return 6;
  }
}

总结 #

• 方案1最推荐，兼顾低复杂度与可维护性，后续调整响应式规则只需修改配置数组。
• 方案2适合追求代码简洁的场景，但可读性略低于方案1。
• 方案3是对原代码最小改动的优化，能快速降低复杂度。

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