首页 > 网络编程 > JavaScript > javascript技巧 > JS去掉if...else

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

2024-09-10 09:24:13 作者：代码里的小猫咪

在JavaScript编程中,过多的if...elseif...else语句可能导致代码难以维护,可以通过switch语句、对象字面量、函数映射、数组或映射对象分发、提前返回以及使用数组的find方法来优化这种复杂的条件判断,提高代码的可读性和维护性,下面就来介绍一下

在 JavaScript 中，代码中有一个常见的情景，链式的 if...else if...else 语句用来处理多条件分支逻辑。然而，当分支较多时，这种结构会变得难以维护和阅读。针对这种情况，有几种优化方式。

if (条件1) {
  // 代码块
} else if (条件2) {
  // 代码块
} else if (条件3) {
  // 代码块
}
//....
else {
  // 以上条件都不满足执行的代码块
}

1. switch 语句

如果条件是基于同一个变量的多个不同值，使用 switch 语句可以提高代码的可读性。

switch (变量) {
  case 条件1:
    // 代码块
    break;
  case 条件2:
    // 代码块
    break;
  case 条件3:
    // 代码块
    break;
  default:
    // 以上条件都不满足执行的代码块
    break;
}

适用场景：条件是基于单个变量的多个分散数据，逻辑简单清晰。

2. 使用对象字面量（推荐）

对于简单的条件判断，可以考虑使用对象字面量（对象映射）。这种方式能够快速查找并执行对应的代码块。

const actions = {
  条件1: () => {
    // 代码块
  },
  条件2: () => {
    // 代码块
  },
  条件3: () => {
    // 代码块
  },
  default: () => {
    // 以上条件都不满足执行的代码块
  },
};
const key = 判断条件的变量 || 'default';
actions[key]();

适用场景：条件值是分散的，且条件和结果之间的映射关系是固定的。

3. 使用函数映射

如果条件逻辑较为复杂，可以将不同的条件对应到不同的函数中，从而提高代码的模块化和可读性。

function handleCondition1() {
  // 代码块
}
function handleCondition2() {
  // 代码块
}
function handleCondition3() {
  // 代码块
}
const actions = {
  条件1: handleCondition1,
  条件2: handleCondition2,
  条件3: handleCondition3,
  default: () => {
    // 以上条件都不满足执行的代码块
  },
};

const key = 判断条件的变量 || 'default';
actions[key]();

适用场景：需要为每个条件执行不同的复杂操作或逻辑，需要封装具体逻辑到独立的函数中。

4. 使用数组或映射对象进行分发

当条件是连续的或者可以简化为索引，可以用数组或映射对象来简化代码：

const conditions = [条件1, 条件2, 条件3];
const actions = [
  () => {
    // 条件1对应的代码块
  },
  () => {
    // 条件2对应的代码块
  },
  () => {
    // 条件3对应的代码块
  },
];

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

// 如果没有匹配条件，可以执行默认行为

5. 提前返回

对于多重条件判断，可以在满足条件时，直接返回结果或执行代码，而不是使用 else。这种方法可以减少嵌套层次，使代码更加简洁。

function handleConditions() {
  if (条件1) {
    // 代码块
    return;
  }

  if (条件2) {
    // 代码块
    return;
  }

  if (条件3) {
    // 代码块
    return;
  } // 以上条件都不满足执行的代码块
}

适用场景：逻辑判断较简单，且每个条件只需要执行单一操作。

6. 利用数组的 find 方法

如果需要找到第一个满足条件的情况，可以使用数组的 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 {
  // 以上条件都不满足执行的代码块
}

适用场景：条件基于复杂的逻辑判断，需要处理匹配的第一个条件（动态）。

以上讲述的比较抽象，下面通过一个具体的 🌰 展示一下如何优化。

7. 🌰

假设我们有一个函数，它根据用户的角色类型来显示不同的欢迎信息，使用 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、使用对象字面量优化，明显变得非常简洁

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

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

3、使用函数映射优化，适合条件逻辑比较复杂的情况，一般可以使用方法二。

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、使用数组的 find 方法优化

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、使用提前返回优化

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 语句，多多应用这些优化方法，可以让代码变得简洁、可读性更强，同时也易于维护和扩展。

到此这篇关于JS中去掉if...else的多种方法的文章就介绍到这了,更多相关JS去掉if...else内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！