1000個判斷條件難道要寫了1000個 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("此人比较神秘！");
}
}咋一看沒感覺有什麼異常，但如果有1000個判斷條件，依照這種寫法難不成要寫1000個if 分支？
如果寫了大量的if 分支，並且可能還具有分支套分支，可以想像到整個程式碼的可讀性和可維護都會大大降低，這在實際開發中，確實是個比較頭痛的問題，那有沒有什麼辦法能夠即實現需求又能避免這些問題呢？ 【推薦學習：javascript影片教學】
這就涉及到分支優化，讓我們轉換思維，去優化一下上面的程式碼結構：
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取得了一個值賦值給了str（describeForNameMap 是如何傳回值的我們並不在乎），之後對str作了一些處理。這就突顯了getUserDescribe函數的重點（對判斷結果str進行處理）。
在這個範例中
describeForNameMap子陣列的第二個元素完全可以直接使用一個值：[(name) => name.length > 3 , "名字太長"]，但為了整體程式碼的可擴展性，推薦還是使用函數，因為函數可以接收參數，方便應對之後更複雜的場景。
分支優化在各種語言中都有不同的實作方式和應用場景，本篇透過JavaScript 介紹了兩種程式碼分支優化的思想，程式碼的實作非常簡單，重點在於這種思想的應用。
其實關於分支優化這個問題一直存在爭議，目前存在著兩種觀點：
物件/陣列，對物件/陣列進行檢索反而比單純的if else還是廢性能。 可讀性/可維護性更好，並且引入物件/陣列所帶來的性能問題在當今時代根本不值一提。 你是什麼觀點呢？
更多程式相關知識，請造訪：程式設計教學！ ！
以上是一文教你實作JavaScript if分支優化的詳細內容。更多資訊請關注PHP中文網其他相關文章！
