60 views

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;

}

Share
Go Top