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

时间: 2018-07-16阅读: 4414标签: 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记录用户行为浏览记录和停留时间

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

Js实现点击查看全文(类似今日头条、知乎日报效果)

这篇文章主要为大家详细介绍了原生JS+css仿QQ今日头条、知乎日报点击查看全文的效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下.

(...)这三个点在JavaScript中意味着什么?

解释JavaScript中三个点的作用:数组/对象扩展运算符、rest运算符(使用函数的参数时,无论是完全替换参数还是与函数的参数一起替换参数,这三个点也称为rest运算符)

JavaScript中变量提升和函数提升的意义理解

在ES6之前,Js中是没有块级作用域的,只存在全局作用域和函数作用域。变量提升即将变量声明提升到它所在作用域的最开始的部分;函数提升只有函数声明中才发生。

Javascript实现模仿接口的3种方式

Javascript模仿接口可以有三种方式:1.注释法,此方法属于程序文档范畴,对接口的继承实现完全依靠程序员自觉 2.检查属性法,把要实现的接口方法添加到类属性列表里,通过定义好的检测反复检查是否已经实现了那些方法 3.鸭式辨形法

JavaScript 进阶问题列表

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

js的解析的两个阶段_预解析阶段、执行阶段

js不像C语言那样只要编译一次之后成.exe文件之后就不用在编译可以直接使用了,js是一种解释型语言,js同理是边解析边执行。js的解析分为两个阶段 1.预解析阶段 2.执行阶段。

js不同数据类型下的toString()与toLocaleString()的输出差异

toString()与toLocaleString()方法主要针对对象Object转换为字符串,如果是基本类型调用它们的时候,先会把基本类型实例化为对应的对象类型,然后在转换为字符串。这篇文章主要讲解不同数据类型下的toString()与toLocaleString()的输出差异。

instanceof与constructor的区别

instanceof 的作用是判断实例对象是否为构造函数的实例,实际上判断的是实例对象的__proto__属性与构造函数的prototype属性是否指向同一引用;constructor 的作用是返回实例的构造函数,即返回创建此对象的函数的引用

10个JavaScript难点:能够读懂这篇博客的JavaScript开发者,运气不会太差…

10个JavaScript难点包括:立即执行函数,闭包,使用闭包定义私有变量,prototype,模块化,变量提升,柯里化,apply, call与bind方法,Memoization,函数重载

点击更多...

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