JavaScript | 1000个判断条件难道要写了1000个 if ? 一文教你如何实现分支优化-Toy模板网

这篇具有很好参考价值的文章主要介绍了JavaScript | 1000个判断条件难道要写了1000个 if ? 一文教你如何实现分支优化。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

JavaScript | 1000个判断条件难道要写了1000个 if ? 一文教你如何实现分支优化

🧑‍💼 个人简介：一个不甘平庸的平凡人🍬
🖥️ Nodejs专栏：Node.js从入门到精通
🖥️ TS知识总结：十万字TS知识点总结
👉 你的一键三连是我更新的最大动力❤️！
📢 欢迎私信博主加入前端交流群🌹

🔽 前言

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

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

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 分支中的判断条件不只是简单的相等判断，还具有一些需要计算的表达式时，我们该怎么办呢？（如下所示）

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数组中符合判断条件的子数组即可。

3️⃣ 抽离分支

上面例子中我们定义的这个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文件，之后在需要使用的地方导入即可。

4️⃣ 争议

这样一来整个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获取了一个值赋值给了str（describeForNameMap是如何返回值的我们并不关心），之后对str作了一些处理。这就突出了getUserDescribe函数的重点（对判断结果str进行处理）。