资讯专栏INFORMATION COLUMN

还在写冗长的 if else判断在你的代码中吗?

Lorry_Lu / 3187人阅读

摘要:语法可以是一个数组或者其他对象,其元素或为键值对,或为两个元素的数组。每个键值对都会添加到新的。方法返回键对应的值,如果不存在,则返回。返回一个布尔值,表示实例是否包含键对应的值。

前言
今天无意间看到一篇文章(- -。忘记哪了..我大概说一下吧,本来可以直接分享的...),对于平时冗长的if else优化. 平时也是这么处理的 通过object对象的数据结构来实现优雅的判断条件书写! 但是看到通过map数据结构的利用  感觉适用更广,局限更低了 !一起来看看
首先对于Map数据结构来做个简单介绍:

定义:

Map 对象保存键值对。任何值(对象或者原始值)  都可以作为一个键或一个值。

语法:

new Map([iterable]) Iterable 可以是一个数组或者其他 iterable 对象,其元素或为键值对,或为两个元素的数组。 每个键值对都会添加到新的 Mapnull 会被当做 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后续的文章 周一见 !

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/99075.html

相关文章

  • python---异常处理

    摘要:总结判断式的异常处理只能针对某一段代码,对于不同的代码段的相同类型的错误你需要写重复的来进行处理。提示是基于文件句柄而存在的,因而只能在抛出异常后才可以执行异常类只能用来处理指定的异常情况,如果非指定异常则无法处理。 异常和错误 程序中难免出现错误,而错误分成两种 1.语法错误(这种错误,根本过不了python解释器的语法检测,必须在程序执行前就改正) #语法错误示范一 if #语法...

    Alfred 评论0 收藏0
  • 编写小而美函数艺术

    摘要:函数需要小要避免编写职责冗杂的庞大函数,而需要将它们分离成很多小函数。另一方面小而能够自解释的函数读起来也会让人愉悦,方便开展之后的工作。最终我们最初的庞大函数被拆分成下面这些函数在中尝试这就是编写小而美的函数的艺术。 原文链接:https://dmitripavlutin.com/th...译者:阿里云-也树 随着软件应用的复杂度不断上升,为了确保应用稳定且易拓展,代码质量就变的越来...

    Neilyo 评论0 收藏0
  • 如何提升你javascript代码逼格之简写篇

    摘要:例如可以简写为简写赋值方法如果你正在使用任何流行的框架,那么你很有可能使用数组或以对象本文的形式将数据在组件和之间进行通信。可以简写为以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助 三元运算符 当你想用一行代码来写if...else语句的时候,使用三元操作符是非常好的选择,例如: const x = 20; let answer; if (x > 10...

    FuisonDesign 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<