JavaScript中判斷的優(yōu)雅寫(xiě)法示例
前言
我們?cè)趯?xiě) JavaScript 時(shí)經(jīng)常遇到一些邏輯判斷，可以使用 if/else 或者 switch 來(lái)實(shí)現(xiàn)，但是對(duì)于復(fù)雜的判斷，過(guò)多的條件往往會(huì)讓我們的代碼變得冗長(zhǎng)，可讀性下降。故我們需要優(yōu)化我們的代碼，使之更優(yōu)雅💎。
一、一元判斷
1.1 舉個(gè)例子🌰
我們寫(xiě)一個(gè)常見(jiàn)的 if/else 判斷的函數(shù)，然后對(duì)他進(jìn)行優(yōu)化。
const myFunction = (status) => {
if (status === 1) {
console.log("status1");
} else if (status === 2) {
console.log("status2");
} else if (status === 3) {
console.log("status3");
}
};
1.2 放入 Object 中
我們知道， JavaScript 的 Object 其實(shí)就是一些 鍵值對(duì) 的無(wú)序集合，正因如此我們可以借助其存放判斷的條件。例如上述情況，判斷條件是一個(gè)數(shù)字類(lèi)型，后續(xù)操作也僅僅是用到了一個(gè)字符串，這時(shí)我們就可以創(chuàng)建一個(gè)對(duì)象，把所用到的數(shù)字和字符串分別作為 Object 的鍵名和對(duì)應(yīng)值。
// 將判斷條件放入 Object 中
const statusObj = {
1: "status1",
2: "status2",
3: "status3",
};
// 優(yōu)化后函數(shù)💎
const myFunction = (status) => {
console.log(statusObj[status]);
};
1.3 放入 Map 中
除了原始對(duì)象以外，我們還可以使用 Map 對(duì)象。我們來(lái)看下 MDN 對(duì)其的描述：
Map 對(duì)象保存鍵值對(duì)，并且能夠記住鍵的原始插入順序。任何值(對(duì)象或者原始值) 都可以作為一個(gè)鍵或一個(gè)值。
不難看出，Map 對(duì)象其實(shí)就是普通對(duì)象的加強(qiáng)版，特別是任何值都可以作為其鍵值對(duì)，這意味著 函數(shù) 、 正則 等也可以作為其鍵或值，這也就大大方便了我們將其作為判斷的操作。具體關(guān)于 Map 對(duì)象的細(xì)節(jié)此處不再展開(kāi)。
// 將判斷條件放入 Map 中
const statusMap = new Map([
[1, "status1"],
[2, "status2"],
[3, "status3"],
]);
// 優(yōu)化后函數(shù)💎
const myFunction = (status) => {
console.log(statusMap.get(status));
};
二、多元判斷
2.1 舉個(gè)例子🌰
既然一元判斷可以?xún)?yōu)化，那么多元判斷也可以進(jìn)行優(yōu)化，下面是有兩種判斷條件的案例。
// 舉個(gè)例子🌰
const myFunction = (right, status) => {
if (right === "administrator" && status === 1) {
console.log("管理員喜歡王冰冰");
} else if (right === "administrator" && status === 2) {
console.log("管理員不喜歡王冰冰");
} else if (right === "user" && status === 1) {
console.log("用戶喜歡王冰冰");
} else if (right === "user" && status === 2) {
console.log("用戶不喜歡王冰冰");
}
};
// 有重復(fù)情況的例子🌰
const myFunction = (right, status) => {
if (right === "administrator" && status === 1) {
console.log("管理員喜歡王冰冰");
} else if (right === "administrator" && status === 2) {
console.log("管理員喜歡王冰冰");
} else if (right === "user" && status === 1) {
console.log("用戶喜歡王冰冰");
} else if (right === "user" && status === 2) {
console.log("用戶喜歡王冰冰");
}
};
2.2 將判斷條件拼成字符串放入 Object 中
兩種情況也同樣可以用 Object 進(jìn)行優(yōu)化。
// 優(yōu)化"例子🌰"
// 將判斷條件放入 Object 中
const actionsObj = {
"administrator-1": "管理員喜歡王冰冰",
"administrator-2": "管理員不喜歡王冰冰",
"user-1": "用戶喜歡王冰冰",
"user-2": "用戶不喜歡王冰冰",
};
// 優(yōu)化后函數(shù)💎
const myFunction = (right, status) => {
console.log(actionsObj[`${right}-${status}`]);
};
// 可以將函數(shù)作為"value",以下幾種情況類(lèi)似,不再贅述🥕
const actionsObj = {
"administrator-1": () => console.log("管理員喜歡王冰冰"),
"administrator-2": () => console.log("管理員喜歡王冰冰"),
"user-1": () => console.log("管理員喜歡王冰冰"),
"user-2": () => console.log("管理員喜歡王冰冰"),
};
// 優(yōu)化后函數(shù)💎
const myFunction = (right, status) => {
actionsObj[`${right}-${status}`]();
};
// 優(yōu)化"有重復(fù)情況的例子🌰"
// 可以提取公共函數(shù),以下幾種情況類(lèi)似,不再贅述🍓
const actions = () => {
const f1 = () => console.log("管理員喜歡王冰冰");
const f2 = () => console.log("用戶喜歡王冰冰");
return {
"administrator-1": f1,
"administrator-2": f1,
"user-1": f2,
"user-2": f2,
};
};
// 優(yōu)化后函數(shù)💎
const myFunction = (right, status) => {
actions()[`${right}-${status}`]();
};
2.3 將判斷條件拼成字符串放入 Map 中
同樣的，我們也可以用 Map 對(duì)象。我們把兩個(gè)條件存成字符串。
// 優(yōu)化"例子🌰"
// 將判斷條件放入 Map 中
const actionsMap = new Map([
['administrator-1', '管理員喜歡王冰冰'],
['administrator-2', '管理員不喜歡王冰冰'],
['user-1', '用戶喜歡王冰冰'],
['user-2', '用戶不喜歡王冰冰']
]);
// 優(yōu)化后函數(shù)💎
const myFunction = (right, status) => {
console.log(actionsMap.get(`${right}-${status}`));
};
2.4 將判斷條件放入 Object 后再放入 Map 中
// 優(yōu)化"例子🌰"
// 將判斷條件放入 Map 中
const actionsMap = new Map([
[{ right: 'administrator', status: 1 }, () => console.log('管理員喜歡王冰冰')],
[{ right: 'administrator', status: 2 }, () => console.log('管理員不喜歡王冰冰')],
[{ right: 'user', status: 1 }, () => console.log('用戶喜歡王冰冰')],
[{ right: 'user', status: 2 }, () => console.log('用戶不喜歡王冰冰')]
]);
// 優(yōu)化后函數(shù)💎
const myFunction = (right, status) => {
const action = [...actionsMap].filter(([e]) => (e.right === right && e.status === status));
action.forEach(([_, index]) => index.call());
};
2.5 將判斷條件寫(xiě)成 正則 后再放入 Map 中
利用正則表達(dá)式可以處理相對(duì)復(fù)雜一點(diǎn)的情況。
// 優(yōu)化"有重復(fù)情況的例子🌰"
// 將判斷條件寫(xiě)成 正則 后再放入 Map 中
const actions = () => {
const f1 = () => console.log('管理員喜歡王冰冰');
const f2 = () => console.log('用戶喜歡王冰冰');
return new Map([
[/^administrator-[1-2]/, f1],
[/^user-[1-2]/, f2]
]);
};
// 優(yōu)化后函數(shù)💎
const myFunction = (right, status) => {
const action = [...actions()].filter(([e]) => e.test(`${right}-${status}`));
action.forEach(([_, index]) => index.call());
};
結(jié)語(yǔ)
我們利用原生 Object 和 Map 對(duì)象對(duì)判斷進(jìn)行了優(yōu)化，不過(guò)在真正的開(kāi)發(fā)過(guò)程中，我們還是要遵循 實(shí)用優(yōu)先 的原則，避免過(guò)度優(yōu)化。
到此這篇關(guān)于JavaScript中判斷的優(yōu)雅寫(xiě)法的文章就介紹到這了,更多相關(guān)JavaScript判斷優(yōu)雅寫(xiě)法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了JS彈出窗口的運(yùn)用與技巧大全,詳解介紹了幾種利用網(wǎng)頁(yè)彈出各種形式的窗口，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2016-11-11
JS實(shí)現(xiàn)FLASH幻燈片圖片切換效果的方法
這篇文章主要介紹了JS實(shí)現(xiàn)FLASH幻燈片圖片切換效果的方法,實(shí)例分析了javascript操作圖片實(shí)現(xiàn)Flash幻燈效果的技巧,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了微信小程序使用image組件顯示圖片的方法,結(jié)合實(shí)例形式簡(jiǎn)單分析了微信小程序附image組件的相關(guān)使用技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
瀏覽器環(huán)境下JavaScript腳本加載與執(zhí)行探析之defer與async特性
defer和async特性相信是很多JavaScript開(kāi)發(fā)者"熟悉而又不熟悉"的兩個(gè)特性，從字面上來(lái)看，二者的功能很好理解，分別是"延遲腳本"和"異步腳本"的作用2016-01-01
本文是一篇關(guān)于Javascript的中級(jí)進(jìn)階總結(jié)。小編希望大家能夠在30分鐘之內(nèi)閱讀完并認(rèn)真體會(huì)，多敲代碼，多總結(jié)，畢竟Javascript本身并不難。2016-07-07
簡(jiǎn)單了解JavaScript彈窗實(shí)現(xiàn)代碼
這篇文章主要介紹了簡(jiǎn)單了解JavaScript彈窗實(shí)現(xiàn)代碼,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
javascript運(yùn)算符——邏輯運(yùn)算符全面解析
下面小編就為大家?guī)?lái)一篇javascript運(yùn)算符——邏輯運(yùn)算符詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
JS實(shí)現(xiàn)電影票選座的項(xiàng)目示例
電影院選座基本上每個(gè)人都用到過(guò)，本文主要介紹了JS實(shí)現(xiàn)電影票選座的項(xiàng)目示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
利用innerHTML代替createElement來(lái)動(dòng)態(tài)添加網(wǎng)頁(yè)內(nèi)容已成為一種普遍的認(rèn)識(shí)。但在商務(wù)應(yīng)用，大數(shù)據(jù)的datagrid屢見(jiàn)不鮮，就算是innerHTML也捉襟見(jiàn)肘，于是人們又開(kāi)發(fā)了分時(shí)加載的技術(shù)了（利用setTimeout）。2009-12-12
基于javascript bootstrap實(shí)現(xiàn)生日日期聯(lián)動(dòng)選擇
這篇文章主要介紹了基于javascript bootstrap實(shí)現(xiàn)生日日期聯(lián)動(dòng)選擇的相關(guān)資料,需要的朋友可以參考下2016-04-04