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