還在寫冗長的 if else判斷在你的代碼中嗎?

前言

今天無心間看到一篇文章(- -。忘記哪了..我大概說一下吧,原本能夠直接分享的...),對於平時冗長的 if else的 優化. 平時也是這麼處理的 經過 object對象的數據結構來實現優雅的判斷條件書寫! 可是看到經過 map數據結構的利用 感受適用更廣,侷限更低了 ！一塊兒來看看

首先對於Map數據結構來作個簡單介紹:

定義:

Map 對象保存鍵值對。 任何值(對象或者原始值) 均可以做爲一個鍵或一個值。

語法:

new Map([iterable]) Iterable 能夠是一個數組或者其餘 iterable 對象，其元素或爲鍵值對，或爲兩個元素的數組。 每一個鍵值對都會添加到新的 Map。 null 會被當作 undefined。

方法:

Map.prototype.get(key) 返回鍵對應的值，若是不存在，則返回 undefined。
Map.prototype.has(key) 返回一個布爾值，表示Map實例是否包含鍵對應的值。
Map.prototype.set(key, value) 設置Map對象中鍵的值。返回該Map對象。
對於Map數據結構來講,不支持 = 號的賦值~~~~~~~

關於Map其餘介紹API,**很少介紹了

正文

對於判斷條件的單一

var status = 8;
        
        // 經常使用的if else 進行 條件判斷來do somethings
        if(status == 1){
            console.log(111111)
        }else if(status == 2){
            console.log(222222)
        }else if(status == 3){
            console.log(333333)
        }else if(status == 4){
            console.log(444444)
        }else if(status == 5){
            console.log(555555)
        }else{
            console.log(status)
        }                      // 8
        
        
        // switch case的寫法 相比if else 是有一些優化了!
        switch (status){
            case 1:
            console.log(status)
            break
            case 2:
            console.log(status)
            break
            case 3:
            console.log(status)
            break
            case 4:
            console.log(status)
            break
            case 5:
            console.log(status)
            break
            default:
            console.log(status)
            break;
        }                            // 8
        
        // 對象object 數據結構的寫法  簡潔了
        var obj = {
            "1":"11111",
            "2":"22222",
            "3":"33333",
            "4":"44444",
            "5":"55555",
        }
        console.log(obj[status] || status)   // 8
        
        // Map數據結構的寫法    和object差很少
        var mMap = new Map([
            ["1","11111"],
            ["2","22222"],
            ["3","33333"],
            ["4","44444"],
            ["5","55555"]
        ])
        console.log(mMap.get(status) || status)  // 8

結果均可以達到預期的效果! 判斷進行的順利 ! 然而條件是個 多個條件呢? 範圍呢? 條件是個運算呢? 怎麼實現? 接着看

var name = "lisi" , status = 1;
       //if else 寫法
       
        if(name == "lisi"){
            if(status == 1){
                console.log("lisi1")
            }else if(status == 2){
                console.log("lisi2")
            }else if(status == 3){
                console.log("lisi3")
            }else if(status == 4){
                console.log("lisi4")
            }else if(status == 5){
                console.log("lisi5")
            }else{
                console.log(status)
            }
        }else if(name == "zhangsan"){
            if(status == 1){
                console.log("zhangsan1")
            }else if(status == 2){
                console.log("zhangsan2")
            }else if(status == 3){
                console.log("zhangsan3")
            }else if(status == 4){
                console.log("zhangsan4")
            }else if(status == 5){
                console.log("zhangsan5")
            }else{
                console.log(status)
            }
        }                                               //lisi1
        
        //swtich case 寫法
        switch (status && name){
            case 1 && "lisi":
            console.log(name + status)
            break
            ...
            default:
            console.log(status)
            break;
        }                                               //lisi1
        
        // 對象數據結構的寫法    //簡潔
        var obj = {
            "lisi_1":"lisi1",
            "lisi_2":"lisi2",
            ...
            "zhangsan_5":"zhangsan5",
        } 
        console.log(obj[name + "_" + status] || status)   // lisi1
        
        // Map數據結構的寫法    和object差很少
        var mMap = new Map([
            ["lisi_1","lisi1"],
            ["lisi_2","lisi2"],
            ...
            ["zhangsan_5","zhangsan5"]
        ])
        console.log(mMap.get(name + "_" +status) || status)  //lisi1

多個條件也進行了對比,均可以完美實現，書寫上相對於來講更爲簡潔 固然可讀性較低一點.. 性能差別確定也存在. 不過對於平日的基礎業務能夠忽略不計.接下來對於 運算,範圍用 Map來實現一下 來了解一下~

var mMap = new Map([
            [162,function(h,a){console.log("he height is" + h + " ,he age is" + a)}],
            [174,function(h,a){console.log("he height is" + h + " ,he age is" + a)}],
            [198,function(h,a){console.log("he height is" + h + " ,he age is" + a)}],
        ]) 
        var height = 150, age = 12;
        mMap.get(height  + age)(height,age)  //he height is150 ,he age is12
        
        //正則
        var mMap = new Map([
            [/^\d{2,5}$/,function(h,a){console.log("位數大於2且小於5")}],
            [/^\d{5,10}$/,function(h,a){console.log("位數大於5且小於10")}],
        ]) 
        var arr = [...mMap].filter(([k,v])=>(k.test(`123`)))
        arr.forEach(([k,v])=>v.call(this))    //位數大於2且小於5

Map結構是支持任何對象任何原始值做爲key|value的,因此大家能夠開動大腦再試試其它,我就不介紹了.明白這樣寫就好, 固然能夠適當封裝,可是這個業務代碼耦合性略高,封裝意義不大,此處就不作說明了!

最後

有小夥伴看過那篇的能夠評論區貼一下,(那篇文章篇幅比我長...比我確定全一些..)我只是簡單的介紹了一下.平日都這麼用.分享給你們.

關於 webpack後續的文章 週一見 !