您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)JavaScript中如何實(shí)現(xiàn)判斷,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
我們寫一個(gè)常見的 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"); } };
我們知道, JavaScript 的 Object 其實(shí)就是一些 鍵值對(duì) 的無(wú)序集合,正因如此我們可以借助其存放判斷的條件。例如上述情況,判斷條件是一個(gè)數(shù)字類型,后續(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]); };
除了原始對(duì)象以外,我們還可以使用 Map 對(duì)象。我們來看下 MDN 對(duì)其的描述:
Map 對(duì)象保存鍵值對(duì),并且能夠記住鍵的原始插入順序。任何值(對(duì)象或者原始值) 都可以作為一個(gè)鍵或一個(gè)值。
不難看出,Map 對(duì)象其實(shí)就是普通對(duì)象的加強(qiáng)版,特別是任何值都可以作為其鍵值對(duì),這意味著 函數(shù) 、 正則 等也可以作為其鍵或值,這也就大大方便了我們將其作為判斷的操作。具體關(guān)于 Map 對(duì)象的細(xì)節(jié)此處不再展開。
// 將判斷條件放入 Map 中 const statusMap = new Map([ [1, "status1"], [2, "status2"], [3, "status3"], ]); // 優(yōu)化后函數(shù)? const myFunction = (status) => { console.log(statusMap.get(status)); };
既然一元判斷可以優(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("用戶喜歡王冰冰"); } };
兩種情況也同樣可以用 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",以下幾種情況類似,不再贅述? 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}`](); };
同樣的,我們也可以用 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}`)); };
// 優(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()); };
利用正則表達(dá)式可以處理相對(duì)復(fù)雜一點(diǎn)的情況。
// 優(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()); };
關(guān)于“JavaScript中如何實(shí)現(xiàn)判斷”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(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)容。