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

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

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

在 JavaScript 中，代碼中有一個(gè)常見(jiàn)的情景，鏈?zhǔn)降?nbsp;if...else if...else 語(yǔ)句用來(lái)處理多條件分支邏輯。然而，當(dāng)分支較多時(shí)，這種結(jié)構(gòu)會(huì)變得難以維護(hù)和閱讀。針對(duì)這種情況，有幾種優(yōu)化方式。

if (條件1) {
  // 代碼塊
} else if (條件2) {
  // 代碼塊
} else if (條件3) {
  // 代碼塊
}
//....
else {
  // 以上條件都不滿足執(zhí)行的代碼塊
}

1. switch 語(yǔ)句

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

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

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

2. 使用對(duì)象字面量（推薦）

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

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

適用場(chǎng)景：條件值是分散的，且條件和結(jié)果之間的映射關(guān)系是固定的。

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

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

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

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

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

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

當(dāng)條件是連續(xù)的或者可以簡(jiǎn)化為索引，可以用數(shù)組或映射對(duì)象來(lái)簡(jiǎn)化代碼：

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

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

// 如果沒(méi)有匹配條件，可以執(zhí)行默認(rèn)行為

5. 提前返回

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

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

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

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

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

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

如果需要找到第一個(gè)滿足條件的情況，可以使用數(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í)行的代碼塊
}

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

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

7. ??

假設(shè)我們有一個(gè)函數(shù)，它根據(jù)用戶的角色類型來(lái)顯示不同的歡迎信息，使用 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、使用對(duì)象字面量?jī)?yōu)化，明顯變得非常簡(jiǎn)潔

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)化，適合條件邏輯比較復(fù)雜的情況，一般可以使用方法二。

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!';
}

總結(jié)：

盡量減少鏈?zhǔn)降?nbsp;if...else if...else 語(yǔ)句，多多應(yīng)用這些優(yōu)化方法，可以讓代碼變得簡(jiǎn)潔、可讀性更強(qiáng)，同時(shí)也易于維護(hù)和擴(kuò)展。

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

您可能感興趣的文章: