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中文網其他相關文章!