如何利用对象和数组提升if / else的嵌套代码？

2023-10-03 13:09:27

日常生活开发经常会遇到复杂的条件判断，一般做法就是用if / else，或者优雅一点用switch来实现多个条件的判断。然而，当条件越来越多时，会导代码越来越臃肿。这时，为了避免使用重复的代码，如何使用更优雅的方式来实现呢？

为了解决上述问题，JavaScript提供了一种使用对象和数组来实现条件判断的方式。这种方式更加灵活，可以使代码更加易于理解和维护。下面，我们来看一个具体示例。

示例：根据状态发送日志和跳转页面

function processStatus(status) {
  if (status === 'success') {
    sendSuccessLog();
    redirectToSuccessPage();
  } else if (status === 'error') {
    sendErrorLog();
    redirectToErrorPage();
  } else if (status === 'warning') {
    sendWarningLog();
    redirectToWarningPage();
  } else {
    sendUnknownStatusLog();
    redirectToUnknownStatusPage();
  }
}

这个函数的作用是根据status状态的不同，发送日志和跳转页面。这个函数有多个条件判断，因此代码很容易变得臃肿和难以维护。

为了重构这个函数，我们可以使用对象和数组来实现。首先，我们定义一个对象来存储不同的状态及其对应的日志和跳转页面：

const statusMap = {
  success: {
    log: sendSuccessLog,
    page: redirectToSuccessPage,
  },
  error: {
    log: sendErrorLog,
    page: redirectToErrorPage,
  },
  warning: {
    log: sendWarningLog,
    page: redirectToWarningPage,
  },
  unknown: {
    log: sendUnknownStatusLog,
    page: redirectToUnknownStatusPage,
  },
};

然后，我们可以使用数组来存储所有的状态：

const statuses = ['success', 'error', 'warning', 'unknown'];

接下来，我们可以使用循环来遍历数组，并根据不同的状态调用相应的方法：

function processStatus(status) {
  const statusInfo = statusMap[status];
  if (statusInfo) {
    statusInfo.log();
    statusInfo.page();
  } else {
    sendUnknownStatusLog();
    redirectToUnknownStatusPage();
  }
}

这个函数更加简洁和易于理解，同时还避免了重复代码。此外，通过将判断条件与代码逻辑分离，我们可以在需要的时候轻松地修改或扩展条件判断。