JS 去除 if...else 链：switch、对象映射与提前返回等 7 种优化方案

在 JavaScript 开发中，处理多条件分支逻辑时，常会见到链式的 if...else if...else 结构。然而，随着分支数量的增加，这种写法会导致代码难以阅读和维护。为此，本文介绍几种有效的优化方案。

if (条件1) {
  // 代码块
} else if (条件2) {
  // 代码块
} else if (条件3) {
  // 代码块
}
//....
else {
  // 以上条件都不满足执行的代码块
}

1. 使用 switch 语句

当判断逻辑基于同一个变量的不同取值时，switch 语句能显著提升代码的可读性。

switch (变量) {
  case 条件1:
    // 代码块
    break;
  case 条件2:
    // 代码块
    break;
  case 条件3:
    // 代码块
    break;
  default:
    // 以上条件都不满足执行的代码块
    break;
}

适用场景：条件由单个变量的多个离散值构成，且逻辑关系简单清晰。

2. 使用对象字面量（推荐）

对于简单的条件判断，推荐使用对象字面量（即对象映射）。这种方式能通过键值对快速查找并执行对应的代码块。

const actions = {
  条件1: () => {
    // 代码块
  },
  条件2: () => {
    // 代码块
  },
  条件3: () => {
    // 代码块
  },
  default: () => {
    // 以上条件都不满足执行的代码块
  },
};
const key = 判断条件的变量 || 'default';
actions[key]();

适用场景：条件值分散，且条件与结果之间的映射关系固定不变。

3. 使用函数映射

若条件逻辑较为复杂，可将不同条件对应到不同的函数中，从而增强代码的模块化程度和可读性。

function handleCondition1() {
  // 代码块
}
function handleCondition2() {
  // 代码块
}
function handleCondition3() {
  // 代码块
}
const actions = {
  条件1: handleCondition1,
  条件2: handleCondition2,
  条件3: handleCondition3,
  default: () => {
    // 以上条件都不满足执行的代码块
  },
};

const key = 判断条件的变量 || 'default';
actions[key]();

适用场景：每个条件需执行不同的复杂操作或逻辑，且需要将具体逻辑封装在独立函数中。

4. 使用数组或映射对象进行分发

当条件连续或可简化为索引时，利用数组或映射对象可简化代码结构：

const conditions = [条件1, 条件2, 条件3];
const actions = [
  () => {
    // 条件1对应的代码块
  },
  () => {
    // 条件2对应的代码块
  },
  () => {
    // 条件3对应的代码块
  },
];

for (let i = 0; i < conditions.length; i++) {
  if (conditions[i]) {
    actions[i]();
    break;
  }
}

// 如果没有匹配条件，可以执行默认行为

5. 提前返回

对于多重条件判断，可在满足条件时直接返回结果或执行代码，避免使用 else。这种方法能减少嵌套层级，使代码更加简洁。

function handleConditions() {
  if (条件1) {
    // 代码块
    return;
  }

  if (条件2) {
    // 代码块
    return;
  }

  if (条件3) {
    // 代码块
    return;
  } // 以上条件都不满足执行的代码块
}

适用场景：逻辑判断较简单，且每个条件仅需执行单一操作。

6. 利用数组的 find 方法

若需找到第一个满足条件的情况，可使用数组的 find 方法：

const conditions = [
  {
    check: 条件1,
    action: () => {
      /* 代码块1 */
    },
  },
  {
    check: 条件2,
    action: () => {
      /* 代码块2 */
    },
  },
  {
    check: 条件3,
    action: () => {
      /* 代码块3 */
    },
  },
];

const result = conditions.find((condition) => condition.check);
if (result) {
  result.action();
} else {
  // 以上条件都不满足执行的代码块
}

适用场景：条件基于复杂逻辑判断，需处理匹配的第一个条件（动态）。

上述方法较为抽象，下面通过一个具体示例展示如何优化。

7. 示例

假设有一个函数，根据用户角色类型显示不同的欢迎信息。使用 if...else 处理的代码如下：

function getWelcomeMessage(userRole) {
  if (userRole === 'admin') {
    return 'Welcome, Administrator!';
  } else if (userRole === 'editor') {
    return 'Welcome, Editor!';
  } else if (userRole === 'viewer') {
    return 'Welcome, Viewer!';
  } else if (userRole === 'guest') {
    return 'Welcome, Guest!';
  } else {
    return 'Welcome, User!';
  }
}

1、使用 switch 语句优化

function getWelcomeMessage(userRole) {
  switch (userRole) {
    case 'admin':
      return 'Welcome, Administrator!';
    case 'editor':
      return 'Welcome, Editor!';
    case 'viewer':
      return 'Welcome, Viewer!';
    case 'guest':
      return 'Welcome, Guest!';
    default:
      return 'Welcome, User!';
  }
}

2、使用对象字面量优化，代码明显变得非常简洁

const messages = {
  admin: 'Welcome, Administrator!',
  editor: 'Welcome, Editor!',
  viewer: 'Welcome, Viewer!',
  guest: 'Welcome, Guest!',
};

function getWelcomeMessage(userRole) {
  return messages[userRole] || 'Welcome, User!';
}

3、使用函数映射优化，适合条件逻辑比较复杂的情况，一般推荐使用方法二。

const roleHandlers = {
  admin: () => 'Welcome, Administrator!',
  editor: () => 'Welcome, Editor!',
  viewer: () => 'Welcome, Viewer!',
  guest: () => 'Welcome, Guest!',
};

function getWelcomeMessage(userRole) {
  const handler = roleHandlers[userRole] || (() => 'Welcome, User!');
  return handler();
}

4、使用数组的 find 方法优化

const roleConditions = [
  { check: (role) => role === 'admin', action: () => 'Welcome, Administrator!' },
  { check: (role) => role === 'editor', action: () => 'Welcome, Editor!' },
  { check: (role) => role === 'viewer', action: () => 'Welcome, Viewer!' },
  { check: (role) => role === 'guest', action: () => 'Welcome, Guest!' },
];

function getWelcomeMessage(userRole) {
  const condition = roleConditions.find((item) => item.check(userRole));
  return condition ? condition.action() : 'Welcome, User!';
}

5、使用提前返回优化

function getWelcomeMessage(userRole) {
  if (userRole === 'admin') {
    return 'Welcome, Administrator!';
  }
  if (userRole === 'editor') {
    return 'Welcome, Editor!';
  }
  if (userRole === 'viewer') {
    return 'Welcome, Viewer!';
  }
  if (userRole === 'guest') {
    return 'Welcome, Guest!';
  }
  return 'Welcome, User!';
}

总结：

应尽量减少链式的 if...else if...else 语句，多多应用这些优化方法，可以让代码变得简洁、可读性更强，同时也易于维护和扩展。

到此这篇关于 JS 中去掉 if...else 的多种方法的文章就介绍到这了，更多相关 JS 去掉 if...else 内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！

JavaScript 中优化 if...else 链的 7 种实用技巧