还在写冗长的 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后续的文章 周一见 !