多條件判斷下的代碼優化解決方案

對於if-else想必大家都不會陌生，通常用於多條件判斷，當判斷條件過多時，大家可能會想到用switch-case（條件分支語句）來優化；

溫馨提示：多條件判斷的時候要遵循白名單規則！！！

盡管用到了條件分支語句優化了代碼，但依然是有繼續優化的空間的，無論是在代碼執行效率上還是在后期項目管理上。

一、ES6的Map和原生object對象的異同點

ES6中引入了Map數據結構，對於Map，寫過java的應該不陌生→java數據結構之集合；

object和Map存儲的都是鍵值對組合。但是：

object的鍵的類型是 字符串；

map的鍵的類型是 可以是任意類型；

另外，object獲取鍵值使用Object.keys（返回數組）；

Map獲取鍵值使用 map變量.keys() (返回迭代器)。

    <script>
        var map = new Map();
        map.set(1,()=>{console.log(111)});
        map.set('1',()=>{console.log('111')});


        var obj = {};
        obj[2] = ()=>{console.log(222)};
        obj['2'] = ()=>{console.log('222')};
        
        console.log(map,obj);
    </script>

控制台打印：

二、傳統if-else實現多條件判斷

    <script>
        function test(num) {
            if(num == 1){
                console.log(num + 1);
            }else if (num == 2){
                console.log(num - 2);
            }else if (num == 3){
                console.log(num * 3);
            }else if (num == 4){
                console.log(num / 4);
            }
        }
        test(3);
    </script>

如果要繼續添加條件怎么辦，只能繼續在原函數上添加條件else if（switch-case同理），不僅看上去不美觀，條件越多，代碼拖得越長，而且后期也不易維護。

三、Map實現多條件判斷

    <script>
        var map2 = new Map();
        map2.set(1,(num)=>{console.log(num + 1);});
        map2.set(2,(num)=>{console.log(num - 2);});
        map2.set(3,(num)=>{console.log(num * 3);});
        map2.set(4,(num)=>{console.log(num / 4);});
        function test2(num){
            map2.get(num)(num);
        }
        test2(4);
    </script>

對於這個map2，我們還可以在上述基礎上，利用模塊化將其獨立出來，作為一個配置文件單獨維護。

 

下面是es6的語法，我倒騰半天，最后發現應該是chrome（66）不支持，於是直接寫在之前的vue項目里，因為該項目有babel依賴，所以es6的語法會給你轉成es5的。

map2.js

let map2 = new Map();
map2.set(1,(num)=>{console.log(num + 1);});
map2.set(2,(num)=>{console.log(num - 2);});
map2.set(3,(num)=>{console.log(num * 3);});
map2.set(4,(num)=>{console.log(num / 4);});
export { map2 }

demo.vue

<script>
import {map2} from '../../map2'
export default {
...
  mounted () {
      this.test2(2);//控制台打印0
  },
  methods : {
    test2(num){
        map2.get(num)(num);
    }
  }
}
</script>

這樣一來要想繼續添加/刪除條件的話，只需要維護map2.js這個文件就可以了。