站長資訊網(wǎng)
1000個(gè)判斷條件難道要寫了1000個(gè) if ？要怎么優(yōu)化if分支語句？下面本篇文章就來帶大家聊聊怎么實(shí)現(xiàn)分支優(yōu)化，希望對(duì)大家有所幫助！
最近在網(wǎng)上沖浪時(shí)看到了這樣一段代碼：
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個(gè)判斷條件，按照這種寫法難不成要寫1000個(gè) if 分支？
如果寫了大量的 if 分支，并且可能還具有分支套分支，可以想象到整個(gè)代碼的可讀性和可維護(hù)都會(huì)大大降低，這在實(shí)際開發(fā)中，確實(shí)是一個(gè)比較頭疼的問題，那有沒有什么辦法能夠即實(shí)現(xiàn)需求又能避免這些問題呢？【推薦學(xué)習(xí)：javascript視頻教程】
1️⃣ 簡單分支優(yōu)化
這就涉及到分支優(yōu)化，讓我們轉(zhuǎn)換思維，去優(yōu)化一下上面的代碼結(jié)構(gòu)：
function getUserDescribe(name) { const describeForNameMap = { 小劉: () => console.log("劉哥哥"), 小紅: () => console.log("小紅妹妹"), 陳龍: () => console.log("大師"), 李龍: () => console.log("師傅"), 大鵬: () => console.log("惡人"), }; describeForNameMap[name] ? describeForNameMap[name]() : console.log("此人比較神秘！"); }
問題代碼中的判斷都是簡單的相等判斷，那么我們就可以將這些判斷條件作為一個(gè)屬性寫到對(duì)象describeForNameMap 中去，這些屬性對(duì)應(yīng)的值就是條件成立后的處理函數(shù)。
之后我們就只需通過getUserDescribe函數(shù)接收到的參數(shù)去獲取describeForNameMap對(duì)象中對(duì)應(yīng)的值，如果該值存在就運(yùn)行該值（因?yàn)橹凳且粋€(gè)函數(shù)）。
這樣一來原本的 if 分支判斷就轉(zhuǎn)換成了簡單的key value對(duì)應(yīng)值，條件與處理函數(shù)一一對(duì)應(yīng)，一目了然。
2️⃣ 復(fù)雜分支優(yōu)化
那如果我們的 if 分支中的判斷條件不只是簡單的相等判斷，還具有一些需要計(jì)算的表達(dá)式時(shí)，我們?cè)撛趺崔k呢？（如下所示）
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("此人比較神秘！"); } }
對(duì)于這種結(jié)構(gòu)的代碼就不能引入對(duì)象來進(jìn)行分支優(yōu)化了，我們可以引入二維數(shù)組來進(jìn)行分支優(yōu)化：
function getUserDescribe(name) { const describeForNameMap = [ [ (name) => name.length > 3, // 判斷條件 () => console.log("名字太長") // 執(zhí)行函數(shù) ], [ (name) => name.length < 2, () => console.log("名字太短") ], [ (name) => name[0] === "陳", () => console.log("小陳") ], [ (name) => name === "大鵬", () => console.log("管理員") ], [ (name) => name[0] === "李" && name !== "李鵬", () => console.log("小李"), ], ]; // 獲取符合條件的子數(shù)組 const getDescribe = describeForNameMap.find((item) => item[0](name)); // 子數(shù)組存在則運(yùn)行子數(shù)組中的第二個(gè)元素（執(zhí)行函數(shù)） getDescribe ? getDescribe[1]() : console.log("此人比較神秘！"); }
上面我們定義了一個(gè)describeForNameMap數(shù)組，數(shù)組內(nèi)的每一個(gè)元素代表一個(gè)判斷條件與其執(zhí)行函數(shù)的集合（也是一個(gè)數(shù)組），之后我們通過數(shù)組的find方法查找describeForNameMap數(shù)組中符合判斷條件的子數(shù)組即可。
3️⃣ 抽離分支
上面例子中我們定義的這個(gè)describeForNameMap對(duì)象是一個(gè)獨(dú)立的結(jié)構(gòu)，我們完全可以將它抽離出去：
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("名字太長") // 執(zhí)行函數(shù) ], [ (name) => name.length < 2, () => console.log("名字太短") ], [ (name) => name[0] === "陳", () => console.log("小陳") ], [ (name) => name === "大鵬", () => console.log("管理員") ], [ (name) => name[0] === "李" && name !== "李鵬", () => console.log("小李"), ], ]; function getUserDescribe(name) { // 獲取符合條件的子數(shù)組 const getDescribe = describeForNameMap.find((item) => item[0](name)); // 子數(shù)組存在則運(yùn)行子數(shù)組中的第二個(gè)元素（執(zhí)行函數(shù)） getDescribe ? getDescribe[1]() : console.log("此人比較神秘！"); }
通過模塊化的開發(fā)也可以將這個(gè)
map對(duì)象寫進(jìn)一個(gè)單獨(dú)的js文件，之后在需要使用的地方導(dǎo)入即可。
4️⃣ 爭議
這樣一來整個(gè)getUserDescribe函數(shù)就變得非常簡潔，有的同學(xué)可能會(huì)問這有什么用呢？這不是更加麻煩了嗎？如果真的嫌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函數(shù)中有1000個(gè)判斷分支，并且還具有大量的根據(jù)判斷結(jié)果來執(zhí)行的處理代碼，并且getUserDescribe函數(shù)會(huì)返回這個(gè)處理后的判斷結(jié)果的值。
這時(shí)getUserDescribe函數(shù)的重點(diǎn)在于對(duì)判斷結(jié)果的處理，而不在于這個(gè)結(jié)果是通過什么分支獲取的，例如：
function getUserDescribe(name) { let str; // 存儲(chǔ)判斷結(jié)果 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 = "此人比較神秘！"; } // 對(duì)判斷結(jié)果str的一些處理 // ...... console.log(str); return str; }
如果你不進(jìn)行分支優(yōu)化，getUserDescribe函數(shù)就會(huì)被大量的 if 分支搶占空間，使得getUserDescribe函數(shù)的重點(diǎn)迷失（getUserDescribe函數(shù)重點(diǎn)在于對(duì)判斷結(jié)果的處理，而不在于這個(gè)結(jié)果是通過什么分支獲取的），這時(shí)你再看一下我們優(yōu)化后的代碼：
const describeForNameMap = [ [(name) => name.length > 3, () => "名字太長"], [(name) => name.length < 2, () => "名字太短"], [(name) => name[0] === "陳", () => "小陳"], [(name) => name === "大鵬", () => "管理員"], [(name) => name[0] === "李" && name !== "李鵬", () => "小李"], ]; function getUserDescribe(name) { let str; // 存儲(chǔ)判斷結(jié)果 const getDescribe = describeForNameMap.find((item) => item[0](name)); if (getDescribe) { str = getDescribe[1](); } else { str = "此人比較神秘！"; } // 對(duì)判斷結(jié)果str的一些處理 // ...... console.log(str); return str; }
查看優(yōu)化后的getUserDescribe函數(shù)我們能夠知道，它從describeForNameMap獲取了一個(gè)值賦值給了str（describeForNameMap是如何返回值的我們并不關(guān)心），之后對(duì)str作了一些處理。這就突出了getUserDescribe函數(shù)的重點(diǎn)（對(duì)判斷結(jié)果str進(jìn)行處理）。
在這個(gè)例子中
describeForNameMap子數(shù)組的第二個(gè)元素完全可以直接使用一個(gè)值：[(name) => name.length > 3, "名字太長"]，但為了整體代碼的可擴(kuò)展性，推薦還是使用函數(shù)，因?yàn)楹瘮?shù)可以接收參數(shù)，方便應(yīng)對(duì)之后更復(fù)雜的場景。
? 結(jié)語
分支優(yōu)化在各種語言中都有不同的實(shí)現(xiàn)方式和應(yīng)用場景，本篇通過JavaScript介紹了兩種代碼分支優(yōu)化的思想，代碼的實(shí)現(xiàn)非常簡單，重點(diǎn)在于這種思想的應(yīng)用。
其實(shí)關(guān)于分支優(yōu)化這個(gè)問題一直存在爭議，目前存在兩種觀點(diǎn)：
- 觀點(diǎn)1：壓根不需要多此一舉去優(yōu)化它，并且優(yōu)化后的代碼因?yàn)槎鄤?chuàng)建了一個(gè)
對(duì)象/數(shù)組，對(duì)對(duì)象/數(shù)組進(jìn)行檢索反而比單純的if else還是廢性能。 - 觀點(diǎn)2：分支優(yōu)化后的代碼
可讀性/可維護(hù)性更好，并且引入對(duì)象/數(shù)組所帶來的性能問題在當(dāng)今時(shí)代根本不值一提。
你是什么觀點(diǎn)呢？
