您好,登錄后才能下訂單哦!
今天小編給大家分享一下如何實(shí)現(xiàn)JavaScript if分支優(yōu)化的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來(lái)了解一下吧。
最近在網(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)需求又能避免這些問題呢?
這就涉及到分支優(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("此人比較神秘!");
}
問題代碼中的判斷都是簡(jiǎn)單的相等判斷,那么我們就可以將這些判斷條件作為一個(gè)屬性寫到對(duì)象describeForNameMap
中去,這些屬性對(duì)應(yīng)的值就是條件成立后的處理函數(shù)。
之后我們就只需通過getUserDescribe
函數(shù)接收到的參數(shù)去獲取describeForNameMap
對(duì)象中對(duì)應(yīng)的值,如果該值存在就運(yùn)行該值(因?yàn)橹凳且粋€(gè)函數(shù))。
這樣一來(lái)原本的 if
分支判斷就轉(zhuǎn)換成了簡(jiǎn)單的key value
對(duì)應(yīng)值,條件與處理函數(shù)一一對(duì)應(yīng),一目了然。
那如果我們的 if
分支中的判斷條件不只是簡(jiǎn)單的相等判斷,還具有一些需要計(jì)算的表達(dá)式時(shí),我們?cè)撛趺崔k呢?(如下所示)
function getUserDescribe(name) {
if (name.length > 3) {
console.log("名字太長(zhǎng)");
} 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ì)象來(lái)進(jìn)行分支優(yōu)化了,我們可以引入二維數(shù)組來(lái)進(jìn)行分支優(yōu)化:
function getUserDescribe(name) {
const describeForNameMap = [
[
(name) => name.length > 3, // 判斷條件
() => console.log("名字太長(zhǎng)") // 執(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ù)組即可。
上面例子中我們定義的這個(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ǎng)") // 執(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)入即可。
這樣一來(lái)整個(gè)getUserDescribe
函數(shù)就變得非常簡(jiǎn)潔,有的同學(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é)果來(lái)執(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 = "名字太長(zhǎng)";
} 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, () => "名字太長(zhǎng)"],
[(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, "名字太長(zhǎng)"]
,但為了整體代碼的可擴(kuò)展性,推薦還是使用函數(shù),因?yàn)楹瘮?shù)可以接收參數(shù),方便應(yīng)對(duì)之后更復(fù)雜的場(chǎng)景。
以上就是“如何實(shí)現(xiàn)JavaScript if分支優(yōu)化”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。