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