JavaScript中判斷的優(yōu)雅寫法示例

更新時間：2021年10月17日 11:29:28 作者：冰冰你個小可愛

判斷語句這個我們不陌生,就是判斷是否滿足指定的條件,如果滿足則執(zhí)行一定的代碼,否則跳過,下面這篇文章主要給大家介紹了關于JavaScript中判斷的優(yōu)雅寫法,需要的朋友可以參考下

前言

我們在寫 JavaScript 時經(jīng)常遇到一些邏輯判斷，可以使用 if/else 或者 switch 來實現(xiàn)，但是對于復雜的判斷，過多的條件往往會讓我們的代碼變得冗長，可讀性下降。故我們需要優(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 的鍵名和對應值。

// 將判斷條件放入 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ù) 、正則等也可以作為其鍵或值，這也就大大方便了我們將其作為判斷的操作。具體關于 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("用戶不喜歡王冰冰");
  }
};

// 有重復情況的例子🌰
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)化"有重復情況的例子🌰"
// 可以提取公共函數(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 中

利用正則表達式可以處理相對復雜一點的情況。

// 優(yōu)化"有重復情況的例子🌰"

// 將判斷條件寫成 正則 后再放入 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());
};

結語

我們利用原生 Object 和 Map 對象對判斷進行了優(yōu)化，不過在真正的開發(fā)過程中，我們還是要遵循實用優(yōu)先的原則，避免過度優(yōu)化。

到此這篇關于JavaScript中判斷的優(yōu)雅寫法的文章就介紹到這了,更多相關JavaScript判斷優(yōu)雅寫法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

JS彈出窗口的運用與技巧大全
本篇文章主要介紹了JS彈出窗口的運用與技巧大全,詳解介紹了幾種利用網(wǎng)頁彈出各種形式的窗口，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
2016-11-11
JS實現(xiàn)FLASH幻燈片圖片切換效果的方法
這篇文章主要介紹了JS實現(xiàn)FLASH幻燈片圖片切換效果的方法,實例分析了javascript操作圖片實現(xiàn)Flash幻燈效果的技巧,需要的朋友可以參考下
2015-03-03
微信小程序使用image組件顯示圖片的方法【附源碼下載】
這篇文章主要介紹了微信小程序使用image組件顯示圖片的方法,結合實例形式簡單分析了微信小程序附image組件的相關使用技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下
2017-12-12
瀏覽器環(huán)境下JavaScript腳本加載與執(zhí)行探析之defer與async特性
defer和async特性相信是很多JavaScript開發(fā)者"熟悉而又不熟悉"的兩個特性，從字面上來看，二者的功能很好理解，分別是"延遲腳本"和"異步腳本"的作用
2016-01-01
Javascript中級語法快速入手
本文是一篇關于Javascript的中級進階總結。小編希望大家能夠在30分鐘之內(nèi)閱讀完并認真體會，多敲代碼，多總結，畢竟Javascript本身并不難。
2016-07-07
簡單了解JavaScript彈窗實現(xiàn)代碼
這篇文章主要介紹了簡單了解JavaScript彈窗實現(xiàn)代碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-05-05
javascript運算符——邏輯運算符全面解析
下面小編就為大家?guī)硪黄猨avascript運算符——邏輯運算符詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
JS實現(xiàn)電影票選座的項目示例
電影院選座基本上每個人都用到過，本文主要介紹了JS實現(xiàn)電影票選座的項目示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-04-04
javascript 異步的innerHTML使用分析
利用innerHTML代替createElement來動態(tài)添加網(wǎng)頁內(nèi)容已成為一種普遍的認識。但在商務應用，大數(shù)據(jù)的datagrid屢見不鮮，就算是innerHTML也捉襟見肘，于是人們又開發(fā)了分時加載的技術了（利用setTimeout）。
2009-12-12
基于javascript bootstrap實現(xiàn)生日日期聯(lián)動選擇
這篇文章主要介紹了基于javascript bootstrap實現(xiàn)生日日期聯(lián)動選擇的相關資料,需要的朋友可以參考下
2016-04-04