JS条件语句优化妙招
JavaScript条件语句在我们平时的开发中是不可避免要用到的,但是很多时候我们的代码写的并不好,下面我们就看看几个可以优化的地方(我们优化的目标是嵌套层级更少,代码更简洁和易读)
是否包含
我们经常会判断某个变量等于某些值,于是会写出这样的代码
function sayHi(name){
if(name=='tom'||name=='hxh'||name=='lmly'){
return 'hello'
}
}
如果还要再加值就会显得越来越臃肿了,事实上就是判断该变量是否在某个值的范围中
function sayHi(name){
let names=['tom','hxh','lmly'];
if(names.indexOf(name)>-1){
return 'hello'
}
}
看上去是不是合理多了?我们提出了公共的逻辑,以后只需要维护names这个数组即可,当然也可以用includes()
if(names.includes(name)){
return 'hello'
}
尽早返回
先看代码
function sayHi(name){
if(name){
if(name=='hxh'){
return 'hello';
}
}else{
return 'no';
}
}
这里我们先判断了 name 是否存在,于是出现了嵌套if,但是如果我们一开始就将不存在name的情况直接返回
function sayHi(name){
if(!name){
return 'no';
}
if(name=='hxh'){
return 'hello';
}
}
我们会发现代码少了嵌套层级,可读性提高了。
键值对象
switch...case 想必大家也是经常会用到的句式
function sayHi(name){
let str="";
switch(name){
case 'tom':{ str='hello1'; } break;
case 'hxh':{ str='hello2'; } break;
case 'lucy':{ str='hello3'; } break;
default :{str='no'; }
}
return str;
}
其实稍微细看一下就会发现,这和对象键值对很像,于是我们改成下面的方式
function sayHi(name){
return {
'tom':'hello1',
'hxh':'hello2',
'lucy':'hello3',
}[name]
}
代码是不是简洁多了?
参数默认值
方法参数为空是我们经常需要处理的,多数情况下是的给一个默认值
function sayHi(name){
if(!name){
name='tom'
}
}
这个时候我们可以使用||来简化代码
function sayHi(name){
name=name||'tom';
}
如果你的代码运行环境支持ES6,那就可以直接使用参数默认值语法
function sayHi(name='tom'){
return name;
}