JS条件语句优化

版权声明：本文为博主（风轻云淡）原创文章，未经博主允许不得转载。CSDN https://blog.csdn.net/qq_20343517/article/details/82945080

JS条件语句优化妙招

JavaScript条件语句在我们平时的开发中是不可避免要用到的，但是很多时候我们的代码写的并不好，下面我们就看看几个可以优化的地方(我们优化的目标是嵌套层级更少，代码更简洁和易读)

是否包含

我们经常会判断某个变量等于某些值，于是会写出这样的代码

[code]function sayHi(name){
if(name=='tom'||name=='hxh'||name=='lmly'){
return 'hello'
}
}

如果还要再加值就会显得越来越臃肿了，事实上就是判断该变量是否在某个值的范围中

[code]function sayHi(name){
let names=['tom','hxh','lmly'];
if(names.indexOf(name)>-1){
return 'hello'
}
}

看上去是不是合理多了？我们提出了公共的逻辑，以后只需要维护names这个数组即可，当然也可以用includes()

[code]if(names.includes(name)){
return 'hello'
}

尽早返回

先看代码

[code]function sayHi(name){
if(name){
if(name=='hxh'){
return 'hello';
}
}else{
return 'no';
}
}

这里我们先判断了 name 是否存在，于是出现了嵌套if，但是如果我们一开始就将不存在name的情况直接返回

[code]function sayHi(name){
if(!name){
return 'no';
}
if(name=='hxh'){
return 'hello';
}
}

我们会发现代码少了嵌套层级，可读性提高了。

键值对象

switch...case 想必大家也是经常会用到的句式

[code]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;
}

其实稍微细看一下就会发现，这和对象键值对很像，于是我们改成下面的方式

[code]function sayHi(name){
return {
'tom':'hello1',
'hxh':'hello2',
'lucy':'hello3',
}[name]
}

代码是不是简洁多了？

参数默认值

方法参数为空是我们经常需要处理的，多数情况下是的给一个默认值

[code]function sayHi(name){
if(!name){
name='tom'
}
}

这个时候我们可以使用||来简化代码

[code]function sayHi(name){
name=name||'tom';
}

如果你的代码运行环境支持ES6,那就可以直接使用参数默认值语法

[code]function sayHi(name='tom'){
return name;
}