一文教你实现JavaScript if分支优化

1000个判断条件难道要写了1000个 if ?要怎么优化if分支语句?下面本篇文章就来带大家聊聊怎么实现分支优化,希望对大家有所帮助!

一文教你实现JavaScript if分支优化

最近在网上冲浪时看到了这样一段代码:

  1. function getUserDescribe(name) {    if (name === "小刘") {        console.log("刘哥哥");    } else if (name === "小红") {        console.log("小红妹妹");    } else if (name === "陈龙") {        console.log("大师");    } else if (name === "李龙") {        console.log("师傅");    } else if (name === "大鹏") {        console.log("恶人");    } else {        console.log("此人比较神秘!");    }}

登录后复制

咋一看没感觉有什么异常,但如果有1000个判断条件,按照这种写法难不成要写1000个 if 分支?

如果写了大量的 if 分支,并且可能还具有分支套分支,可以想象到整个代码的可读性和可维护都会大大降低,这在实际开发中,确实是一个比较头疼的问题,那有没有什么办法能够即实现需求又能避免这些问题呢?【推荐学习:javascript视频教程】

立即学习“Java免费学习笔记(深入)”;

1️⃣ 简单分支优化

这就涉及到分支优化,让我们转换思维,去优化一下上面的代码结构:

  1. function getUserDescribe(name) {    const describeForNameMap = {        小刘: () => console.log("刘哥哥"),        小红: () => console.log("小红妹妹"),        陈龙: () => console.log("大师"),        李龙: () => console.log("师傅"),        大鹏: () => console.log("恶人"),    };    describeForNameMap[name] ? describeForNameMap[name]() : console.log("此人比较神秘!");}

登录后复制

问题代码中的判断都是简单的相等判断,那么我们就可以将这些判断条件作为一个属性写到对象describeForNameMap 中去,这些属性对应的值就是条件成立后的处理函数。

之后我们就只需通过getUserDescribe函数接收到的参数去获取describeForNameMap对象中对应的值,如果该值存在就运行该值(因为值是一个函数)。

这样一来原本的 if 分支判断就转换成了简单的key value对应值,条件与处理函数一一对应,一目了然。

2️⃣ 复杂分支优化

那如果我们的 if 分支中的判断条件不只是简单的相等判断,还具有一些需要计算的表达式时,我们该怎么办呢?(如下所示)

  1. function getUserDescribe(name) {    if (name.length > 3) {        console.log("名字太长");    } else if (name.length 

    对于这种结构的代码就不能引入对象来进行分支优化了,我们可以引入二维数组来进行分支优化:

    function getUserDescribe(name) {    const describeForNameMap = [        [            (name) => name.length > 3, // 判断条件            () => console.log("名字太长") // 执行函数        ],        [            (name) => name.length  console.log("名字太短")        ],        [            (name) => name[0] === "陈",             () => console.log("小陈")        ],        [            (name) => name === "大鹏",             () => console.log("管理员")        ],        [            (name) => name[0] === "李" && name !== "李鹏",            () => console.log("小李"),        ],    ];    // 获取符合条件的子数组    const getDescribe = describeForNameMap.find((item) => item[0](name));    // 子数组存在则运行子数组中的第二个元素(执行函数)    getDescribe ? getDescribe[1]() : console.log("此人比较神秘!");}
  2. 登录后复制

  3. 上面我们定义了一个describeForNameMap数组,数组内的每一个元素代表一个判断条件与其执行函数的集合(也是一个数组),之后我们通过数组的find方法查找describeForNameMap数组中符合判断条件的子数组即可。

  4. 3️⃣ 抽离分支

  5. 上面例子中我们定义的这个describeForNameMap对象是一个独立的结构,我们完全可以将它抽离出去:

  6. const describeForNameMap = {    小刘: () => console.log("刘哥哥"),    小红: () => console.log("小红妹妹"),    陈龙: () => console.log("大师"),    李龙: () => console.log("师傅"),    大鹏: () => console.log("恶人"),};function getUserDescribe(name) {    describeForNameMap[name] ? describeForNameMap[name]() : console.log("此人比较神秘!");}
  7. 登录后复制

  8. const describeForNameMap = [    [        (name) => name.length > 3, // 判断条件        () => console.log("名字太长") // 执行函数    ],    [        (name) => name.length  console.log("名字太短")    ],    [        (name) => name[0] === "陈",         () => console.log("小陈")    ],    [        (name) => name === "大鹏",         () => console.log("管理员")    ],    [        (name) => name[0] === "李" && name !== "李鹏",        () => console.log("小李"),    ],];    function getUserDescribe(name) {    // 获取符合条件的子数组    const getDescribe = describeForNameMap.find((item) => item[0](name));    // 子数组存在则运行子数组中的第二个元素(执行函数)    getDescribe ? getDescribe[1]() : console.log("此人比较神秘!");}
  9. 登录后复制

  10. 通过模块化的开发也可以将这个map对象写进一个单独的js文件,之后在需要使用的地方导入即可。

  11. 4️⃣ 争议

  12. 这样一来整个getUserDescribe函数就变得非常简洁,有的同学可能会问这有什么用呢?这不是更加麻烦了吗?如果真的嫌if else不好看,那我就使用if return不用else就好了:

  13. function getUserDescribe(name) {    if (name === "小刘") {        console.log("刘哥哥");        return;    }    if (name === "小红") {        console.log("小红妹妹");        return;    }    if (name === "陈龙") {        console.log("大师");        return;    }    if (name === "李龙") {        console.log("师傅");        return;    }    if (name === "大鹏") {        console.log("恶人");        return;    }    console.log("此人比较神秘!");}
  14. 登录后复制

  15. 试想一下,如果你getUserDescribe函数中有1000个判断分支,并且还具有大量的根据判断结果来执行的处理代码,并且getUserDescribe函数会返回这个处理后的判断结果的值。

  16. 这时getUserDescribe函数的重点在于对判断结果的处理,而不在于这个结果是通过什么分支获取的,例如:

  17. function getUserDescribe(name) {    let str; // 存储判断结果    if (name.length > 3) {        str = "名字太长";    } else if (name.length 

    如果你不进行分支优化,getUserDescribe函数就会被大量的 if 分支抢占空间,使得getUserDescribe函数的重点迷失(getUserDescribe函数重点在于对判断结果的处理,而不在于这个结果是通过什么分支获取的),这时你再看一下我们优化后的代码:

    const describeForNameMap = [    [(name) => name.length > 3, () => "名字太长"],    [(name) => name.length  "名字太短"],    [(name) => name[0] === "陈", () => "小陈"],    [(name) => name === "大鹏", () => "管理员"],    [(name) => name[0] === "李" && name !== "李鹏", () => "小李"],];function getUserDescribe(name) {    let str; // 存储判断结果    const getDescribe = describeForNameMap.find((item) => item[0](name));    if (getDescribe) {        str = getDescribe[1]();    } else {        str = "此人比较神秘!";    }    // 对判断结果str的一些处理    // ......    console.log(str);    return str;}
  18. 登录后复制

  19. 查看优化后的getUserDescribe函数我们能够知道,它从describeForNameMap获取了一个值赋值给了strdescribeForNameMap是如何返回值的我们并不关心),之后对str作了一些处理。这就突出了getUserDescribe函数的重点(对判断结果str进行处理)。

  20. 在这个例子中describeForNameMap子数组的第二个元素完全可以直接使用一个值:[(name) => name.length > 3,  "名字太长"],但为了整体代码的可扩展性,推荐还是使用函数,因为函数可以接收参数,方便应对之后更复杂的场景。

  21. ? 结语

  22. 分支优化在各种语言中都有不同的实现方式和应用场景,本篇通过JavaScript介绍了两种代码分支优化的思想,代码的实现非常简单,重点在于这种思想的应用。

  23. 其实关于分支优化这个问题一直存在争议,目前存在两种观点:

  24. 观点1:压根不需要多此一举去优化它,并且优化后的代码因为多创建了一个对象/数组,对对象/数组进行检索反而比单纯的if else还是废性能。观点2:分支优化后的代码可读性/可维护性更好,并且引入对象/数组所带来的性能问题在当今时代根本不值一提。

  25. 你是什么观点呢?

  26. 更多编程相关知识,请访问:编程教学!!

  27. 以上就是一文教你实现JavaScript if分支优化的详细内容,更多请关注【创想鸟】其它相关文章!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

点点赞赏,手留余香

给TA打赏
共0人
还没有人赞赏,快来当第一个赞赏的人吧!
    编程技术

    5个实用TypeScript操作符,助你提升开发能力!

    2025-3-7 18:30:04

    编程技术

    【整理分享】6款好用的油猴脚本,快来看看!

    2025-3-7 18:30:12

    0 条回复 A文章作者 M管理员
    欢迎您,新朋友,感谢参与互动!
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    私信列表
    搜索