在日常中经常遇到 大量的 if 分支,并且可能还具有分支套分支,可以想象到整个代码的可读性和可维护都会大大降低 ,记录对多if判断优化
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("此人比较神秘!");
}
}
对以上代码进行优化 如下:
function getUserDescribe(name) {
const describeForNameMap = {
"小刘": () => console.log("刘哥哥"),
"小红": () => console.log("小红妹妹"),
"陈龙": () => console.log("大师"),
"李龙": () => console.log("师傅"),
"大鹏": () => console.log("恶人"),
};
describeForNameMap[name] ? describeForNameMap[name]() : console.log("此人比较神秘!");
}
getUserDescribe("小红") // => 结果 "小红妹妹"
将原本的 if 分支判断就转换成了简单的key value对应值,条件与处理函数一一对应,一目了然
如果包含复杂的计算判断 如下:
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数组中符合判断条件的子数组即可。
对于判断结果需要进行处理的 如下:
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;
}
优化如下:
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;
}
摘自网络 侵权立删