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;
}