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

时间: 2018-07-16阅读: 4605标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

js中delete关键字

delete关键字的作用:删除对象的属性 语法:delete 对象.属性、可以删除没有使用var关键字声明的全局变量(直接定义在window上面的属性)、删除数组元素、不能删除内置对象的属性、不能直接删除从原型上继承的属性

js中void 0 与 undefined

偶然看到一个问题:为什么有的编程规范要求用 void 0 代替 undefined?如果不知道这个答案的小伙伴,第一反应就要问void 0是什么鬼?

浅谈js自记忆函数

最近阅读《JavaScript忍者秘籍》看到了一种有趣的函数:自记忆函数。记忆化(memoization)是一种构建函数的处理过程,能够记住上次计算结果,当函数计算得到结果时,就将该结果按照参数存储起来。

原生js实现数字三位逗号,分隔。js实现支持逗号分割的货币格式表示法总汇

javascript实现数字三位逗号分隔,如把123456.78转换为123,456.78。js实现支持货币格式表示法:toLocaleString在将数字转换为字符串的同时,会使用三位分节法进行显示。slice 方法用于截取字符串中的一部分并返回该部分字符串。match方式代表正则表达式的匹配....

js中的相等性判断

Js提供了三种不同的比较操作符===,==,Object.is。ECMAScript 提供了四种比较操作符:非严格相等(==)、严格相等(===)、零值相等、同值相等。

js词法作用域和作用域的理解_什么是javascript词法作用域?

JavaScript引擎在代码执行前会对其进行编译:第一步编译阶段,第二步运行阶段。词法作用域:定义在词法阶段的作用域,即书写代码时函数声明的位置决定的。词法分析器处理代码时会保持作用域不变

打造自己的JavaScript武器库

作为战斗在业务一线的前端,要想少加班,就要想办法提高工作效率。这里提一个小点,我们在业务开发过程中,经常会重复用到日期格式化、url参数转对象、浏览器类型判断、节流函数等一类函数,这些工具类函数

js可以设置网页默认为横屏状态吗?js设置网页横屏和竖屏切换

打开页面时通过 window.orientation 可以判断网页是横屏还是竖屏,如果是竖屏,给整个页面添加样式 transform: rotate(90deg); 这样,你的页面就显示横屏的效果了。 总的来说,结合window.orientationchange和window.orientation可以灵活的对网页进行变换。

js记录用户行为浏览记录和停留时间

原来是想使用 cookie 来记录,但是考虑到 cookie 所能记录的数据最大为 4k ,可能不够用。于是使用了 HTML5 的 localStorage (最大数据 5M )来存储( IE8 以上浏览器支持)。这里使用到了 jquery.cookie 的插件,所以页面要引入 jquery 和 jquery.cookie 。

JavaScript中的魔幻代理Proxy

什么是 JavaScript 代理?通过 Proxy 我们可以拦截并改变一个对象的几乎所有的根本操作,包括但不限于属性查找、赋值、枚举、函数调用等等。利用 Proxy,我们可以拦截并不存在的属性的读取

点击更多...

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