优化if-else的使用，你需要更好的选择结构！

不知道大家有没有遇到过像金字塔一样水平摆放的if-else嵌套的情况：

if (true) {
}

if (true) {
}

if (true) {
  if (true) {
    if (true) {
    }
  } else {
  }
} else {
}

如果一段代码中if-else过多，代码的可读性就会迅速下降，后期维护代码也会变得非常困难。接下来我就讲讲如何去除它们。

条件运算符

对于更简单的 if-else 语句，可以很容易地将它们重写为条件运算符：

// Bad 😥
if (true) {
  console.log("Congratutions!")
} else {
  console.warn("Oops, something went wrong!")
}

// Great 🥰
true 
  ? console.log("Congratutions")
  : console.warn("Oops, something went wrong!")

当然，在这一点上，两者的差别还没有那么大。

逻辑与运算符

如果您只是想在满足某个条件时执行某个函数，那么您可以使用逻辑与运算符：

if (true) {
  alert(1)
}

// is equals to:

true && alert(1)

它的使用条件非常严格，只能执行函数，不能使用任何语句，包括“return”。虽然这并不能让代码看起来更合乎逻辑，但在某些情况下还是很有用的。

提前回报

由@Edenn Touitou和@Infinite Table提及。

只需根据条件的复杂性对其进行排序并每次返回：

function handleRequest(req) {
  if (req.code >= 500) {
    return "Server error";
  }
  if (req.code >= 404) {
    return "Cilent error";
  }
  return "Suceess";
}

表驱动方法

对于如下代码，我们通常会使用 switch 语句。但这并非最佳方案，而且如果忘记添加 break; ，代码运行结果可能会超出预期，而且 switch 语句也不太优雅。

// Bad 😥
const weekday = (num) => {
  if (num === 1) {
    return "Monday"
  } else if (num === 2) {
    return "Tuesday"
  } else if (num === 3) {
    return "Wednesday"
  } else if (num === 4) {
    return "Thursday"
  } else if (num === 5) {
    return "Friday"
  } else if (num === 6) {
    return "Saturday"
  } else if (num === 7) {
    return "Sunday"
  } else {
    return "Unknown"
  }
}

console.log(weekday(1)) // Monday

现在是使用表驱动方法的时候了：

// Great 🥰
const weekday = (option) => {
    let obj = {
        1: "Monday",
        2: "Tuesday",
        3: "Wednesday",
        4: "Thursday",
        5: "Friday",
        6: "Saturday",
        0: "Sunday"
    }
    return obj[option] ?? "Unknown"
}

console.log(weekday(1)) // Monday

或者你可以使用 ES6 的 Map：

// Great 🥰
const weekday = (num) => {
  const map = new Map()
    .set(1, "Monday")
    .set(2, "Tuesday")
    .set(3, "Wednesday")
    .set(4, "Thursday")
    .set(5, "Friday")
    .set(6, "Saturday")
    .set(7, "Sunday");
  return map.has(num) ? map.get(num) : "Unknown";
};

console.log(weekday(1));

数组的 include 方法

上一节我们讨论了如何优化一对一的选择结构，这里我们讨论如何优雅地实现一对多的选择结构。

例如以下脚本：

const getContinent = (option) => {
  if (option === "China" || option === "Japan") {
    return "Asia";
  }
  if (option === "Germany" || option === "France") {
    return "Europe";
  }
};

console.log(getContinent("China"));

现在看起来还不错，因为我还没有添加所有国家。这当然是可以优化的，而且可以通过使用数组的 include 方法轻松避免：

const getContinent = (option) => {
  const Asia = ["China", "Japan"];
  const Europe = ["Germany", "Franch"];
  if (Asia.includes(option)) return "Asia";
  if (Europe.includes(option)) return "Europe";
  return "Unknown";
};

console.log(getContinent("China")); // Asia

经过此优化后，即使添加更多国家/地区，代码也不会变得混乱。但它还可以变得更好：

const getContinent = (option) => {
  let [result, setResult] = ["unknown", (str) => (result = str)];
  const Asia = ["China", "Japan"];
  const Europe = ["Germany", "Franch"];
  Asia.includes(option) && setResult("Asia");
  Europe.includes(option) && setResult("Europe");
  return result;
};

console.log(getContinent("China"));

结论

通过本文，我们学习了如何在代码中减少 if-else 语句。如果您觉得这篇文章对您有帮助，请分享给您的朋友们；如果您有任何意见，也请随时留言🙂。

文章来源：https://dev.to/akarachen/reduce-the-use-of-if-else-nesting-you-need-a-better-selective-struct-32ce