如何优化JavaScript多层嵌套if语句？附示例代码

原代码的多层嵌套if会形成“箭头代码”，可读性差且后续维护成本高，下面是两种符合现代JavaScript编码实践的改写方式：

方案一：卫语句（提前返回） #

通过提前返回不满足的条件，把嵌套逻辑扁平化，每个条件的判断与返回都处于同一层级，逻辑直白清晰：

// 依次检查不满足的条件，触发则直接返回
if (!CONDITION1) {
  return 'STOP IN CONDITION1';
}
if (!CONDITION2) {
  return 'STOP IN CONDITION2';
}
if (!CONDITION3) {
  return 'STOP IN CONDITION3';
}
if (!CONDITION4) {
  return 'STOP IN CONDITION4';
}
if (!CONDITION5) {
  return 'STOP IN CONDITION5';
}

// 所有条件都满足时执行的逻辑
// ...

这种方式适合条件数量固定、不需要频繁新增的场景，代码无嵌套，阅读和修改都很直观。

方案二：数组遍历式检查 #

把条件和对应提示封装成数组，通过遍历自动完成检查。这种方式扩展性极强，后续新增条件只需在数组中添加一项，无需修改核心判断逻辑：

// 定义条件与提示的映射数组
const conditions = [
  { check: () => CONDITION1, message: 'STOP IN CONDITION1' },
  { check: () => CONDITION2, message: 'STOP IN CONDITION2' },
  { check: () => CONDITION3, message: 'STOP IN CONDITION3' },
  { check: () => CONDITION4, message: 'STOP IN CONDITION4' },
  { check: () => CONDITION5, message: 'STOP IN CONDITION5' },
];

// 遍历检查，找到第一个不满足的条件就返回对应提示
for (const { check, message } of conditions) {
  if (!check()) {
    return message;
  }
}

// 所有条件都满足时执行的逻辑
// ...

如果CONDITION是静态布尔值，也可以简化为check: CONDITION1，遍历判断时直接用!item.check即可；用函数包裹则适用于需要动态计算的条件表达式，避免提前求值。

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