告别冗长 if...else 的多种方法

本文主要是介绍告别冗长 if...else 的多种方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在 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!';
}