js中减少使用不必要的if-else或switch_利用数组/对象代替if-else,switch

更新日期: 2018-07-16阅读量: 4982标签: js知识

无论使用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中的策略模式


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

数字在JavaScript中是如何编译的

JavaScript中的所有数字都是浮点数。这篇博客文章解释了这些浮点数如何在64位二进制内部表示。浮点数并不一定等于小数,定点数也并不一定就是整数。所谓浮点数就是小数点在逻辑上是不固定的,而定点数只能表示小数点固定的数值

Js中的命名空间(namespace)

全局变量应该由有系统范围相关性的对象们保留,并且它们的命名应该避免含糊并尽量减少命名冲突的风险。在实践中,这意味着你应该避免创建全局对象,除非它们是绝对必须的。 所以你对此是怎么做的?传统方法告诉我们,最好的消除全局策略是创建少数作为潜在模块和子系统的实际命名空间的全局对象。

JavaScript中的循环和作用域

JavaScript有一个特点,也许会让开发者头痛, 是与循环和作用域相关的.const。最简单的方案是用 let 声明、另外一个非常普遍的解决这个问题是使用pre-ES6代码, 同时它被称作即时调用函数表达式(IIFE)

适配器在JavaScript中的体现

适配器设计模式在JavaScript中非常有用,在处理跨浏览器兼容问题、整合多个第三方SDK的调用,都可以看到它的身影。适配器模式是一种软件设计模式,允许从另一个接口使用现有类的接口。它通常用于使现有的类与其他类一起工作,而无需修改其源代码。

JS的变量作用域问题,理解js全局变量和局部变量问题

js的变量分为2种类型:局部变量和全局变量。主要区别在于:局部变量是指只能在变量被声明的函数内部调用,全局变量在整个代码运行过程中都可以调用。值得注意的js中还可以隐式声明变量,而隐式声明的变量千万不能当做全局变量来使用。

JavaScript中的特殊运算,一些有趣的js等式

JavaScript中的特殊运算,字符,true,false参与运算结果会怎么样?打开控制台。这会允许你再你的浏览器里输入下面所有的代码,所以你可以实时的看到发生什么了。

JavaScript中的行为委托

行为委托简单来说就是一种设计模式,不同于传统的构造函数的类式设计。这里每个例子会通过构造函数,class和行为委托来不同实现,不过不会评论class,是否使用class取决于你的观点。

为什么JavaScript开发如此疯狂

Web开发中其他一切对你而言都是小菜一碟,但当你深入探究JavaScript的时候,不免有一种“众人皆醒你独醉”的悲壮——好像其他人都知道你不知道的一些大的基础的知识内容,并且这些内容可以帮助你理解所有知识

javascript中的依赖注入

使用没有依赖的模块,显然这是很难实现的。即使你创建了很好的像黑盒一样的组件,但总有个将所有部分合并起来的地方。这就是依赖注入起作用的地方,当前来看,高效管理依赖的能力是迫切需要的,本文总结了原作者对这个问题的看法。

JavaScript 进阶问题列表

我在我的 Instagram 上每天都会发布 JavaScript 的选择题,并且同时也会在这个仓库中发布。从基础到进阶,测试你有多了解 JavaScript,刷新你的知识,或者帮助你的 coding 面试!

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!