本文主要是介绍告别冗长 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!';
}
总结:
尽量减少链式的 if...else if...else 语句,多多应用这些优化方法,可以让代码变得简洁、可读性更强,同时也易于维护和扩展。
这篇关于告别冗长 if...else 的多种方法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!