JavaScript 1000个判断条件难道要写了1000个 if 一文教你如何实现分支优化_js if太多了(1)

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

} 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] ? describeForNameMapname : 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) => item0);
// 子数组存在则运行子数组中的第二个元素（执行函数）
getDescribe ? getDescribe1 : console.log(“此人比较神秘！”);
}

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


## 3️⃣ 抽离分支


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

const describeForNameMap = {
小刘: () => console.log(“刘哥哥”),
小红: () => console.log(“小红妹妹”),
陈龙: () => console.log(“大师”),
李龙: () => console.log(“师傅”),
大鹏: () => console.log(“恶人”),
};

function getUserDescribe(name) {
describeForNameMap[name] ? describeForNameMapname : 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) => item0);
// 子数组存在则运行子数组中的第二个元素（执行函数）
getDescribe ? getDescribe1 : 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`函数的**重点**在于**对判断结果的处理**，而不在于这个结果是通过什么分支获取的，例如：

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取