JavaScript中判斷的優(yōu)雅寫法示例
前言
我們在寫 JavaScript 時經(jīng)常遇到一些邏輯判斷,可以使用 if/else 或者 switch 來實現(xiàn),但是對于復(fù)雜的判斷,過多的條件往往會讓我們的代碼變得冗長,可讀性下降。故我們需要優(yōu)化我們的代碼,使之更優(yōu)雅💎。
一、一元判斷
1.1 舉個例子🌰
我們寫一個常見的 if/else 判斷的函數(shù),然后對他進行優(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ù)字類型,后續(xù)操作也僅僅是用到了一個字符串,這時我們就可以創(chuàng)建一個對象,把所用到的數(shù)字和字符串分別作為 Object 的鍵名和對應(yīng)值。
// 將判斷條件放入 Object 中 const statusObj = { 1: "status1", 2: "status2", 3: "status3", }; // 優(yōu)化后函數(shù)💎 const myFunction = (status) => { console.log(statusObj[status]); };
1.3 放入 Map 中
除了原始對象以外,我們還可以使用 Map 對象。我們來看下 MDN 對其的描述:
Map 對象保存鍵值對,并且能夠記住鍵的原始插入順序。任何值(對象或者原始值) 都可以作為一個鍵或一個值。
不難看出,Map 對象其實就是普通對象的加強版,特別是任何值都可以作為其鍵值對,這意味著 函數(shù) 、 正則 等也可以作為其鍵或值,這也就大大方便了我們將其作為判斷的操作。具體關(guān)于 Map 對象的細節(jié)此處不再展開。
// 將判斷條件放入 Map 中 const statusMap = new Map([ [1, "status1"], [2, "status2"], [3, "status3"], ]); // 優(yōu)化后函數(shù)💎 const myFunction = (status) => { console.log(statusMap.get(status)); };
二、多元判斷
2.1 舉個例子🌰
既然一元判斷可以優(yōu)化,那么多元判斷也可以進行優(yōu)化,下面是有兩種判斷條件的案例。
// 舉個例子🌰 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 進行優(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",以下幾種情況類似,不再贅述🥕 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ù),以下幾種情況類似,不再贅述🍓 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 對象。我們把兩個條件存成字符串。
// 優(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 將判斷條件寫成 正則 后再放入 Map 中
利用正則表達式可以處理相對復(fù)雜一點的情況。
// 優(yōu)化"有重復(fù)情況的例子🌰" // 將判斷條件寫成 正則 后再放入 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é)語
我們利用原生 Object 和 Map 對象對判斷進行了優(yōu)化,不過在真正的開發(fā)過程中,我們還是要遵循 實用優(yōu)先 的原則,避免過度優(yōu)化。
到此這篇關(guān)于JavaScript中判斷的優(yōu)雅寫法的文章就介紹到這了,更多相關(guān)JavaScript判斷優(yōu)雅寫法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
再談javascript圖片預(yù)加載技術(shù)(詳細演示)
由于javascript無法獲取img文件頭數(shù)據(jù),必須等待其加載完畢后才能獲取真實的大小,所以lightbox類效果為了讓圖片居中顯示,導(dǎo)致其速度體驗要比直接輸出的差很多。2011-03-03defer屬性導(dǎo)致引用JQuery的頁面報“瀏覽器無法打開網(wǎng)站xxx,操作被中止”錯誤的解決方法
defer屬性導(dǎo)致引用JQuery的頁面報“瀏覽器無法打開網(wǎng)站xxx,操作被中止”錯誤2010-04-04iframe如何動態(tài)創(chuàng)建及釋放其所占內(nèi)存
一個項目后期測試發(fā)現(xiàn)瀏覽器內(nèi)存一直居高不下,而且打開iframe頁面越多內(nèi)存占用越大,在IE系列瀏覽器中尤其明顯,下面與大家分享下iframe動態(tài)創(chuàng)建及釋放內(nèi)存2014-09-09JavaScript中判斷函數(shù)是new還是()調(diào)用的區(qū)別說明
具名函數(shù)的各種調(diào)用方式 在之前篇幅中已經(jīng)介紹過了。這篇看看如何判斷一個函數(shù)是被new調(diào)用的,還是被其它方式調(diào)用的。2011-04-04JS數(shù)組方法shift()、unshift()用法實例分析
這篇文章主要介紹了JS數(shù)組方法shift()、unshift()用法,結(jié)合實例形式分析了JavaScript數(shù)組shift()與unshift()方法功能、用法及相關(guān)操作注意事項,需要的朋友可以參考下2020-01-01js 實現(xiàn)css風(fēng)格選擇器(壓縮后2KB)
近日在做一些OA前端界面,為了更好管理頁面代碼想寫個js選擇器,寫著寫著發(fā)現(xiàn)很費力,索性在網(wǎng)上找找看,功夫不負有心人, 找到一個mini css選擇器,且性能不凡:以下代碼是壓縮后的,僅2KB2012-01-01