JS中去掉if...else的多种方法
更新时间：2024年09月10日 09:24:13 作者：代码里的小猫咪
在JavaScript编程中,过多的if...elseif...else语句可能导致代码难以维护,可以通过switch语句、对象字面量、函数映射、数组或映射对象分发、提前返回以及使用数组的find方法来优化这种复杂的条件判断,提高代码的可读性和维护性,下面就来介绍一下
在 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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
最近使用echarts做的一个H5的成绩数据报告,里面使用了雷达图已经折线图和柱状图,下面这篇文章主要给大家介绍了关于如何利用echarts画雷达图和折柱混合的相关资料,需要的朋友可以参考下2022-04-04
下面小编就为大家带来一篇老生常谈 js中this的指向。小编觉得挺不错的， 现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
yepnope.js 是一个超高速的按条件异步加载资源的加载器，允许你只加载使用到的资源（css及js）。2014-06-06
这篇文章主要介绍了JavaScript面向对象分层思维，js本身不是面向对象语言,在我们实际开发中其实很少用到面向对象思想。下文关于js面向对象知识给大家介绍的非常详细，感兴趣的朋友一起看看吧2016-11-11
将数据导入Excel的方法有很多，本例介绍的这个是使用js来实现数据的导入，感兴趣的朋友可以了解下2014-09-09
JavaScript之HTMLCollection接口代码，需要的朋友可以参考下。2011-04-04
这篇文章主要介绍了使用二维数组实现的省市联动菜单，通过二维数组存储城市列表项,需要的朋友可以参考下2014-05-05
这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要介绍了微信开发之调起摄像头、本地展示图片、上传下载图片实例，具有一定的参考价值有兴趣的可以了解一下。2016-12-12
本文是笔者看了eventemitter3 和 Node.js 事件模块源码后实现的 EventEmitter 。JavaScript 事件很重要，希望看了这篇文章的你们能有所收获2018-03-03
最新评论