• 技术文章 >web前端 >js教程

    一文教你JavaScript如何实现分支优化

    WBOYWBOY2022-11-15 17:00:57转载215
    本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于分支优化的相关内容,如果有许多个判断条件,使用大量的if分支会使整个代码的可读性和可维护都大大降低,下面一起来看一下,希望对大家有帮助。

    大前端零基础入门到就业:进入学习

    【相关推荐:JavaScript视频教程web前端

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

    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 分支,并且可能还具有分支套分支,可以想象到整个代码的可读性和可维护都会大大降低,这在实际开发中,确实是一个比较头疼的问题,那有没有什么办法能够即实现需求又能避免这些问题呢?

    简单分支优化

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

    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对应值,条件与处理函数一一对应,一目了然。

    复杂分支优化

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

    function getUserDescribe(name) {
        if (name.length > 3) {
            console.log("名字太长");
        } else if (name.length < 2) {
            console.log("名字太短");
        } else if (name[0] === "陈") {
            console.log("小陈");
        } else if (name[0] === "李" && name !== "李鹏") {
            console.log("小李");
        } else if (name === "李鹏") {
            console.log("管理员");
        } else {
            console.log("此人比较神秘!");
        }}

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

    function getUserDescribe(name) {
        const describeForNameMap = [
            [
                (name) => name.length > 3, // 判断条件
                () => console.log("名字太长") // 执行函数
            ],
            [
                (name) => name.length < 2, 
                () => 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("此人比较神秘!");}

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

    抽离分支

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

    const describeForNameMap = {
        小刘: () => console.log("刘哥哥"),
        小红: () => console.log("小红妹妹"),
        陈龙: () => console.log("大师"),
        李龙: () => console.log("师傅"),
        大鹏: () => console.log("恶人"),};function getUserDescribe(name) {
        describeForNameMap[name] ? describeForNameMap[name]() : console.log("此人比较神秘!");}
    const describeForNameMap = [
        [
            (name) => name.length > 3, // 判断条件
            () => console.log("名字太长") // 执行函数
        ],
        [
            (name) => name.length < 2, 
            () => 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("此人比较神秘!");}

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

    争议

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

    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("此人比较神秘!");}

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

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

    function getUserDescribe(name) {
        let str; // 存储判断结果
        if (name.length > 3) {
            str = "名字太长";
        } else if (name.length < 2) {
            str = "名字太短";
        } else if (name[0] === "陈") {
            str = "小陈";
        } else if (name[0] === "李" && name !== "李鹏") {
            str = "小李";
        } else if (name === "李鹏") {
            str = "管理员";
        } else {
            str = "此人比较神秘!";
        }
        // 对判断结果str的一些处理
        // ......
        console.log(str);
        return str;}

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

    const describeForNameMap = [
        [(name) => name.length > 3, () => "名字太长"],
        [(name) => name.length < 2, () => "名字太短"],
        [(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;}

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

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

    结语

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

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

    【相关推荐:JavaScript视频教程web前端

    以上就是一文教你JavaScript如何实现分支优化的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:CSDN,如有侵犯,请联系admin@php.cn删除

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:javascript
    上一篇:一文讲解Node+mysql对SQL注入 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• javascript是基于java的吗• 一文带你详细了解JavaScript中的深拷贝• JavaScript更新到了es几• JavaScript普通函数有原型吗• 深入探讨JavaScript中的async函数
    1/1

    PHP中文网