摘要：語法可以是一個數組或者其他對象，其元素或為鍵值對，或為兩個元素的數組。每個鍵值對都會添加到新的。方法返回鍵對應的值，如果不存在，則返回。返回一個布爾值，表示實例是否包含鍵對應的值。

今天無意間看到一篇文章(- -。忘記哪了..我大概說一下吧,本來可以直接分享的...),對于平時冗長的if else的優化. 平時也是這么處理的 通過object對象的數據結構來實現優雅的判斷條件書寫! 但是看到通過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后續的文章 周一見 !