问题代码中的判断都是简单的相等判断,那么我们就可以将这些判断条件作为一个属性写到对象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 !== "李鹏", () => "小李"],
];
![img](https://img-blog.csdnimg.cn/img_convert/fb7ca734ff07eed28e81c4373d8db2e5.png)
![img](https://img-blog.csdnimg.cn/img_convert/f5facc087acc7da7ba8cd0a450123bda.png)
![img](https://img-blog.csdnimg.cn/img_convert/17caf390cc3b3c928794019e1b60e6b8.png)
**既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!**
**由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新**
**[需要这份系统化资料的朋友,可以戳这里获取](https://bbs.csdn.net/topics/618545628)**
14235665172)]
**既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!**
**由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新**
**[需要这份系统化资料的朋友,可以戳这里获取](https://bbs.csdn.net/topics/618545628)**