JS中去掉if...else的多種方法

更新時間：2024年09月10日 09:24:13 作者：代碼里的小貓咪

在JavaScript編程中,過多的if...elseif...else語句可能導致代碼難以維護,可以通過switch語句、對象字面量、函數(shù)映射、數(shù)組或映射對象分發(fā)、提前返回以及使用數(shù)組的find方法來優(yōu)化這種復雜的條件判斷,提高代碼的可讀性和維護性,下面就來介紹一下

1. switch 語句

如果條件是基于同一個變量的多個不同值，使用 switch 語句可以提高代碼的可讀性。

switch (變量) {
  case 條件1:
    // 代碼塊
    break;
  case 條件2:
    // 代碼塊
    break;
  case 條件3:
    // 代碼塊
    break;
  default:
    // 以上條件都不滿足執(zhí)行的代碼塊
    break;
}

適用場景：條件是基于單個變量的多個分散數(shù)據(jù)，邏輯簡單清晰。

2. 使用對象字面量（推薦）

對于簡單的條件判斷，可以考慮使用對象字面量（對象映射）。這種方式能夠快速查找并執(zhí)行對應的代碼塊。

const actions = {
  條件1: () => {
    // 代碼塊
  },
  條件2: () => {
    // 代碼塊
  },
  條件3: () => {
    // 代碼塊
  },
  default: () => {
    // 以上條件都不滿足執(zhí)行的代碼塊
  },
};
const key = 判斷條件的變量 || 'default';
actions[key]();

適用場景：條件值是分散的，且條件和結果之間的映射關系是固定的。

3. 使用函數(shù)映射

如果條件邏輯較為復雜，可以將不同的條件對應到不同的函數(shù)中，從而提高代碼的模塊化和可讀性。

function handleCondition1() {
  // 代碼塊
}
function handleCondition2() {
  // 代碼塊
}
function handleCondition3() {
  // 代碼塊
}
const actions = {
  條件1: handleCondition1,
  條件2: handleCondition2,
  條件3: handleCondition3,
  default: () => {
    // 以上條件都不滿足執(zhí)行的代碼塊
  },
};

const key = 判斷條件的變量 || 'default';
actions[key]();

適用場景：需要為每個條件執(zhí)行不同的復雜操作或邏輯，需要封裝具體邏輯到獨立的函數(shù)中。

4. 使用數(shù)組或映射對象進行分發(fā)

當條件是連續(xù)的或者可以簡化為索引，可以用數(shù)組或映射對象來簡化代碼：

const conditions = [條件1, 條件2, 條件3];
const actions = [
  () => {
    // 條件1對應的代碼塊
  },
  () => {
    // 條件2對應的代碼塊
  },
  () => {
    // 條件3對應的代碼塊
  },
];

for (let i = 0; i < conditions.length; i++) {
  if (conditions[i]) {
    actions[i]();
    break;
  }
}

// 如果沒有匹配條件，可以執(zhí)行默認行為

5. 提前返回

對于多重條件判斷，可以在滿足條件時，直接返回結果或執(zhí)行代碼，而不是使用 else。這種方法可以減少嵌套層次，使代碼更加簡潔。

function handleConditions() {
  if (條件1) {
    // 代碼塊
    return;
  }

  if (條件2) {
    // 代碼塊
    return;
  }

  if (條件3) {
    // 代碼塊
    return;
  } // 以上條件都不滿足執(zhí)行的代碼塊
}

適用場景：邏輯判斷較簡單，且每個條件只需要執(zhí)行單一操作。

6. 利用數(shù)組的 find 方法

如果需要找到第一個滿足條件的情況，可以使用數(shù)組的 find 方法：

const conditions = [
  {
    check: 條件1,
    action: () => {
      /* 代碼塊1 */
    },
  },
  {
    check: 條件2,
    action: () => {
      /* 代碼塊2 */
    },
  },
  {
    check: 條件3,
    action: () => {
      /* 代碼塊3 */
    },
  },
];

const result = conditions.find((condition) => condition.check);
if (result) {
  result.action();
} else {
  // 以上條件都不滿足執(zhí)行的代碼塊
}

適用場景：條件基于復雜的邏輯判斷，需要處理匹配的第一個條件（動態(tài)）。

以上講述的比較抽象，下面通過一個具體的 ?? 展示一下如何優(yōu)化。

7. ??

假設我們有一個函數(shù)，它根據(jù)用戶的角色類型來顯示不同的歡迎信息，使用 if...else 處理為：

function getWelcomeMessage(userRole) {
  if (userRole === 'admin') {
    return 'Welcome, Administrator!';
  } else if (userRole === 'editor') {
    return 'Welcome, Editor!';
  } else if (userRole === 'viewer') {
    return 'Welcome, Viewer!';
  } else if (userRole === 'guest') {
    return 'Welcome, Guest!';
  } else {
    return 'Welcome, User!';
  }
}

1、使用 switch

function getWelcomeMessage(userRole) {
  switch (userRole) {
    case 'admin':
      return 'Welcome, Administrator!';
    case 'editor':
      return 'Welcome, Editor!';
    case 'viewer':
      return 'Welcome, Viewer!';
    case 'guest':
      return 'Welcome, Guest!';
    default:
      return 'Welcome, User!';
  }
}

2、使用對象字面量優(yōu)化，明顯變得非常簡潔

const messages = {
  admin: 'Welcome, Administrator!',
  editor: 'Welcome, Editor!',
  viewer: 'Welcome, Viewer!',
  guest: 'Welcome, Guest!',
};

function getWelcomeMessage(userRole) {
  return messages[userRole] || 'Welcome, User!';
}

3、使用函數(shù)映射優(yōu)化，適合條件邏輯比較復雜的情況，一般可以使用方法二。

const roleHandlers = {
  admin: () => 'Welcome, Administrator!',
  editor: () => 'Welcome, Editor!',
  viewer: () => 'Welcome, Viewer!',
  guest: () => 'Welcome, Guest!',
};

function getWelcomeMessage(userRole) {
  const handler = roleHandlers[userRole] || (() => 'Welcome, User!');
  return handler();
}

4、使用數(shù)組的 find 方法優(yōu)化

const roleConditions = [
  { check: (role) => role === 'admin', action: () => 'Welcome, Administrator!' },
  { check: (role) => role === 'editor', action: () => 'Welcome, Editor!' },
  { check: (role) => role === 'viewer', action: () => 'Welcome, Viewer!' },
  { check: (role) => role === 'guest', action: () => 'Welcome, Guest!' },
];

function getWelcomeMessage(userRole) {
  const condition = roleConditions.find((item) => item.check(userRole));
  return condition ? condition.action() : 'Welcome, User!';
}

5、使用提前返回優(yōu)化

function getWelcomeMessage(userRole) {
  if (userRole === 'admin') {
    return 'Welcome, Administrator!';
  }
  if (userRole === 'editor') {
    return 'Welcome, Editor!';
  }
  if (userRole === 'viewer') {
    return 'Welcome, Viewer!';
  }
  if (userRole === 'guest') {
    return 'Welcome, Guest!';
  }
  return 'Welcome, User!';
}

總結：

盡量減少鏈式的 if...else if...else 語句，多多應用這些優(yōu)化方法，可以讓代碼變得簡潔、可讀性更強，同時也易于維護和擴展。

到此這篇關于JS中去掉if...else的多種方法的文章就介紹到這了,更多相關JS去掉if...else內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: