无论使用if-else，还是switch。当条件多的时候代码显得非常冗长，而且每次添加条件时需要修改主流程的代码，这样就破坏了类的开闭原则。为解决日后的维护可能存在问题，我们可以采用另一种比较优雅的实现方式来替换if-else,switch吗？

数组替代场景

下面以学生成绩为例，根据不同的分值返回对应的结果，使用if...else代码如下:

function getGrades(num){
	let result='';//返回结果
	if(num < 60) {
		result = "不及格";
	}else if(num < 75) {
		result = "一般";
	} else if(num < 90){
		result = "良好";
	}else{
		result = "优秀";
	}
	return result;
}
console.log(getGrades(60))

使用数组代码如下：

function showGrace(grades,results,curr) {
	for(let i in grades){
		if(curr<grades[i]){
			return results[i]
		}
	}
}
let grades=[60,75,90,101],
results=['不及格','一般','良好','优秀'];
showGrace(grades,results,60)

这样做的好处是：如果有需求修改，只需要修改grades，results的值就可以了，业务逻辑不用修改。

对象替代场景

比如后端返回一个状态值，需要对应它显示的结果，如下：

function getStutes(type){
	switch(type){
		case 0:
			return '不及格'
		case 1:
			return '一般'
		case 2:
			return '良好'
		case 3:
			return '优秀'
	}
}
console.log(getStutes(0))

使用对象如下：

let stutes={
	0:'不及格',
	1:'一般',
	2:'良好',
	3:'优秀',
}
console.log(stutes[0])

如果不直接使用状态值作为key,我们可以如下实现：

function getStutes(type){
	let stutes=[
		{type:0,result:'不及格'},
		{type:1,result:'一般'},
		{type:2,result:'良好'},
		{type:3,result:'优秀'},
	]
	for(let i in stutes){
		if(stutes[i].type==type){
			return stutes[i].result
		}	
	}
}
console.log(getStutes(0))

当然这个例子使用数组会更简单，如下：

let stutes=['不及格','一般','良好','优秀']
console.log(stutes[0])

总结

上面简单的介绍了代替if-else和switch的实现方式。可以看出利用数组，或对象的形式来优化代码，把数据业务逻辑进行了分离，使代码更具有可读性，扩展性，方便于后期的维护。

这种替代方式其实就是js中的一种设计模式——策略模式 ，推荐一篇文章介绍什么是策略模式:javascript 策略模式_理解js中的策略模式

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/932