摘要：語(yǔ)法可以是一個(gè)數(shù)組或者其他對(duì)象，其元素或?yàn)殒I值對(duì)，或?yàn)閮蓚€(gè)元素的數(shù)組。每個(gè)鍵值對(duì)都會(huì)添加到新的。方法返回鍵對(duì)應(yīng)的值，如果不存在，則返回。返回一個(gè)布爾值，表示實(shí)例是否包含鍵對(duì)應(yīng)的值。

今天無(wú)意間看到一篇文章(- -。忘記哪了..我大概說(shuō)一下吧,本來(lái)可以直接分享的...),對(duì)于平時(shí)冗長(zhǎng)的if else的優(yōu)化. 平時(shí)也是這么處理的 通過(guò)object對(duì)象的數(shù)據(jù)結(jié)構(gòu)來(lái)實(shí)現(xiàn)優(yōu)雅的判斷條件書(shū)寫(xiě)! 但是看到通過(guò)map數(shù)據(jù)結(jié)構(gòu)的利用  感覺(jué)適用更廣,局限更低了 ！一起來(lái)看看

定義:
Map 對(duì)象保存鍵值對(duì)。任何值(對(duì)象或者原始值)  都可以作為一個(gè)鍵或一個(gè)值。
語(yǔ)法:
new Map([iterable]) Iterable 可以是一個(gè)數(shù)組或者其他 iterable 對(duì)象，其元素或?yàn)殒I值對(duì)，或?yàn)閮蓚€(gè)元素的數(shù)組。 每個(gè)鍵值對(duì)都會(huì)添加到新的 Map。null 會(huì)被當(dāng)做 undefined。
方法:
Map.prototype.get(key) 返回鍵對(duì)應(yīng)的值，如果不存在，則返回undefined。
Map.prototype.has(key) 返回一個(gè)布爾值，表示Map實(shí)例是否包含鍵對(duì)應(yīng)的值。
Map.prototype.set(key, value) 設(shè)置Map對(duì)象中鍵的值。返回該Map對(duì)象。
對(duì)于Map數(shù)據(jù)結(jié)構(gòu)來(lái)說(shuō),不支持  =   號(hào)的賦值~~~~~~~

關(guān)于Map其他介紹API,**不多介紹了

對(duì)于判斷條件的單一

        var status = 8;
        
        // 常用的if else 進(jìn)行 條件判斷來(lái)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的寫(xiě)法 相比if else 是有一些優(yōu)化了!
        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
        
        // 對(duì)象object 數(shù)據(jù)結(jié)構(gòu)的寫(xiě)法  簡(jiǎn)潔了
        var obj = {
            "1":"11111",
            "2":"22222",
            "3":"33333",
            "4":"44444",
            "5":"55555",
        }
        console.log(obj[status] || status)   // 8
        
        // Map數(shù)據(jù)結(jié)構(gòu)的寫(xiě)法    和object差不多
        var mMap = new Map([
            ["1","11111"],
            ["2","22222"],
            ["3","33333"],
            ["4","44444"],
            ["5","55555"]
        ])
        console.log(mMap.get(status) || status)  // 8
        

結(jié)果都可以達(dá)到預(yù)期的效果! 判斷進(jìn)行的順利 ! 然而條件是個(gè)多個(gè)條件呢? 范圍呢? 條件是個(gè)運(yùn)算呢? 怎么實(shí)現(xiàn)? 接著看

       var name = "lisi" , status = 1;
       //if else 寫(xiě)法
       
        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 寫(xiě)法
        switch (status && name){
            case 1 && "lisi":
            console.log(name + status)
            break
            ...
            default:
            console.log(status)
            break;
        }                                               //lisi1
        
        // 對(duì)象數(shù)據(jù)結(jié)構(gòu)的寫(xiě)法    //簡(jiǎn)潔
        var obj = {
            "lisi_1":"lisi1",
            "lisi_2":"lisi2",
            ...
            "zhangsan_5":"zhangsan5",
        } 
        console.log(obj[name + "_" + status] || status)   // lisi1
        
        // Map數(shù)據(jù)結(jié)構(gòu)的寫(xiě)法    和object差不多
        var mMap = new Map([
            ["lisi_1","lisi1"],
            ["lisi_2","lisi2"],
            ...
            ["zhangsan_5","zhangsan5"]
        ])
        console.log(mMap.get(name + "_" +status) || status)  //lisi1
        

多個(gè)條件也進(jìn)行了對(duì)比,都可以完美實(shí)現(xiàn)，書(shū)寫(xiě)上相對(duì)于來(lái)說(shuō)更為簡(jiǎn)潔 當(dāng)然可讀性較低一點(diǎn).. 性能差異肯定也存在. 不過(guò)對(duì)于平日的基礎(chǔ)業(yè)務(wù)可以忽略不計(jì).接下來(lái)對(duì)于運(yùn)算,范圍用Map來(lái)實(shí)現(xiàn)一下 來(lái)了解一下~

        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("位數(shù)大于2且小于5")}],
            [/^d{5,10}$/,function(h,a){console.log("位數(shù)大于5且小于10")}],
        ]) 
        var arr = [...mMap].filter(([k,v])=>(k.test(`123`)))
        arr.forEach(([k,v])=>v.call(this))    //位數(shù)大于2且小于5
        
        
        

Map結(jié)構(gòu)是支持任何對(duì)象任何原始值作為key|value的,所以你們可以開(kāi)動(dòng)大腦再試試其它,我就不介紹了.明白這樣寫(xiě)就好, 當(dāng)然可以適當(dāng)封裝,但是這個(gè)業(yè)務(wù)代碼耦合性略高,封裝意義不大,此處就不做說(shuō)明了!

有小伙伴看過(guò)那篇的可以評(píng)論區(qū)貼一下,(那篇文章篇幅比我長(zhǎng)...比我肯定全一些..)我只是簡(jiǎn)單的介紹了一下.平日都這么用.分享給大家.

關(guān)于webpack后續(xù)的文章 周一見(jiàn) !