js使用經驗--if...else簡化 js使用經驗-- 簡化 if else 語句

js使用經驗-- 簡化 if else 語句

目的

在項目中，if else語句如果用得很多，特別是嵌套，代碼不美觀，閱讀性不好。所以的話，用其他的方式簡化替換if...else...就很有必要。

簡化的作用就是贈人玫瑰，手留餘香。對自己對項目對別人都是好事。

if else語句是啥？好比下圖。

如何簡化

一、 藉助短路運算符 && ||

這兩個是啥？就是大學時代學習數電的與或。短路邏輯就是說是否執行第二個語句（操作數）取決與第一個操作數的結果。

我們可以用 && 來決定是否執行一段代碼或者 || 設置默認值。

// && || 經典模式
if (foo) bar(); ==> foo&&bar(); 
if (!foo) bar(); ==> foo||bar(); 
//&& 別人博客例子
function getInfoFromStorageBydid(key, did, success, error) {
  wx.getStorage({
    key: key,
    success: function (res) {
      var data = res.data[did];
      if (data) {
        typeof success === 'function' && success(data);
        wx.hideToast();
      } else {
        typeof error === 'function' && error();
      }
    },
    fail: function () {
      typeof error === 'function' && error();
    }
  });
}

//|| 
if(a){a = a} else {a = b} ==> a = a || b;

二、使用三元表達式

平時開發中使用率很高，特別是在頁面數組渲染是根據一個字段的值來判斷給哪個單位，或者中文描述等等。只要是2選一的，就無腦用唄。

if (foo) bar(); else baz(); ==> foo?bar():baz(); 
if (!foo) bar(); else baz(); ==> foo?baz():bar(); 
if(a == b ){ a = c }else { a = d } ==> a = (a==b)?c:d;

注意，三元表達式（操作符）不能使用return語句。

三、switch/case

如果if else的數量很大，分支很多，而且不僅僅是需要返回字段，需要乾點什麼。就用switch case吧。

例如

xxx.done(function(data){
  switch(data.status){
     case 'success':
       //TODO
       break;
     case 'fail':
       //TODO
       break;
     default:
      //TODO
  }
});

四、hase表(推薦)

hash表是什麼？鍵值對的集合。對象就是hash表

這個東西就類似映射那樣。如果if else的數量很大，分支很多，而且就是讓你返回一個字段。

就是上個月啊，和一個後臺搞圖片的功能。圖片的待上傳列表是那後臺返回來的數組。寫的時候，需要搞隱射，發現不好搞：一個頁面，拿到SPECIAL_FATE_STORE_HEADER字段給後臺specialFateStoreHeaderId字段；另外一個地方同理：specialFateStoreHeaderId->STORE_HEADER。爲什麼這麼麻煩？後臺小子邏輯差，經驗不足，沒處理好。一開始我使用switch case。搞了不少行代碼，維護性也不好，因爲有兩套，改其中一個，另外一個也得跟着改。這時候，上面的那些數組遍歷和對象遍歷的內容就可以用進來了。再一次證明會js真的可以爲所欲爲，呵呵。代碼如下。

let valueMap = {
    SPECIAL_FATE_STORE_HEADER: 'specialFateStoreHeaderId'//值1：值2
    //...這裏省略了15行
}
//獲取值的值 
function getValueName(type) {
    return valueMap[type] ? valueMap[type] : valueMap['SPECIAL_FATE_STORE_HEADER'];
}
//獲取鍵的值
function getKeyName(targetValue){
    let targetArr =  Object.keys(valueMap).filter((key) => { return valueMap[key] == targetValue });
    return targetArr.length === 0 ? 'STORE_HEADER' :  targetArr[0].split('FATE_')[1]
}
console.log(getValueName('SPECIAL_FATE_STORE_HEADER'),'valueMap')
console.log(getKeyName('specialFateStoreHeaderId'),'valueMap')

以後再次來需求，我就在valueMap對象裏面加。萬一再來需求，後臺小子還要值3，值4怎麼辦？難不到我。我修改valueMap的結構。再改下邏輯就行。

let valueMap = {
    SPECIAL_FATE_STORE_HEADER: 'specialFateStoreHeaderId&&值3&&值4'//值1：值2 && 值3 && 值4
    //...這裏省略了15行
}

就拿我在項目中的遇到的一個問題吧，有個搜索框，是很多頁面共用的，可以查詢客戶經理，銀行，分行等等。不同接口的方法類型和需要的數值不一樣，情況就7到8種。我那個同事啊，寫了很多if-else。看起來很麻煩，瞬間就不想再看。其實這時候可以使用hash來，結合反引號可以動態引入變量值。代碼如下，注意啊，每個鍵值對都要加雙引號（除非是數字），不能是單引號，否則JSON.parse會出現報錯。

let mapObj = {
    1:`{
         "data": {"name": "${value}","branchId": ${this.id}},
         "type": "get"
       }`,
    2:`{
         "data": {"name": "${value}"},
         "type": "post"
       }`
}
data = JSON.parse(mapObj[this.type]).data

五、省略括號

如果能省略括號就直接省略括號吧，閱讀起來特別直觀。

//省略前
if(a > b){
  console.log('a大');
}else{
  console.log('b大');
};

//省略後
if(a > b) console.log('a大');
else console.log('b大');

最後，歡迎關注我的公衆號。