千万不要在JavaScript中使用If-Else和Switch。 建议用Object Literals

用Object Literals意义在JavaScript中写出更好的条件语句

在JavaScript中编写复杂的条件语句，总是有可能产生一些相当混乱的代码。长长的if/else语句或switch case列表会很快变得臃肿。

当有多个条件时，我发现Object Literals是最易读的代码结构方式。让我们来看看它们是如何工作的。

作为一个例子，假设我们有一个函数，它接收一个押韵的俚语并返回其含义。使用if/else语句，它看起来会是这样。

function getTranslation(rhyme) {
  if (rhyme.toLowerCase() === "苹果和梨") {
    return "📢";
  } else if (rhyme.toLowerCase() === "清泉山庄") {
    return "🦷";
  } else if (rhyme.toLowerCase() === "面包") {
    return "🍊";
  } else if (rhyme.toLowerCase() === "猪肉馅饼") {
    return "❎";
  } else if (rhyme.toLowerCase() === "哨子和笛子") {
    return "🦵🏻";
  }

  return "未找到以上内容";
}

这并不是很好。它不仅可读性不强，而且我们还在为每个语句重复toLowerCase()。

我们可以通过在函数开始时将小写的韵律分配给一个变量来避免这种重复，或者使用开关语句，这样就可以了。

function getTranslation(rhyme) {
  switch (rhyme.toLowerCase()) {
    case "苹果和梨":
      return "📢";
    case "清泉山庄":
      return "🦷";
    case "面包":
      return "🍊";
    case "猪肉馅饼":
      return "❎";
    case "哨子和笛子":
      return "🦵";
    default:
      return "未找到以上内容";
  }
}

我们现在只调用了一次toLowerCase()，但这仍然感觉不那么可读。 switch语句也容易出错。在这种情况下，我们只是返回一个值，但当你有更复杂的功能时，很容易错过break语句而引入错误。

另一种选择

你可以使用一个对象，以更整齐的方式实现与上述相同的功能。让我们来看看一个例子。

function getTranslationMap(rhyme) {
  const rhymes = {
    "苹果和梨": "📢";
    "清泉山庄": "🦷";
    "面包": "🍊";
    "猪肉馅饼": "❎";
    "哨子和笛子": "🦵";
  };
  
  return rhymes[rhyme.toLowerCase()] ?? "未找到以上内容";

我们有一个对象，其中的键是条件，值是反应。然后我们可以使用方括号符号，从传入的韵律中选择对象的正确值。

第10行的最后部分(?? "Rhyme not found")使用nullish coalescing来指定一个默认响应。这意味着如果韵律[hyme.toLowercase()]是空的或未定义的（但不是false或0），那么将返回默认的字符串 "Rhyme not found"。这一点很重要，因为我们可能合法地想从我们的条件中返回false或0。比如说。

function stringToBool(str) {
  const boolStrings = {
    "true": true,
    "false": false,
  };

  return boolStrings[str] ?? "字符串不是一个布尔值";
}

这是一个非常矫揉造作的例子，但希望它能说明偏空凝聚是如何帮助避免引入bug的。

更复杂的逻辑

有些时候，你可能需要在你的条件中做一些更复杂的逻辑。为了实现这一点，你可以将一个函数作为值传递给你的对象键，并执行响应。

function calculate(num1, num2, action) {
  const actions = {
    add: (a, b) => a + b,
    subtract: (a, b) => a - b,
    multiply: (a, b) => a * b,
    divide: (a, b) => a / b,
  };

  return actions[action]?.(num1, num2) ?? "计算方式不被认可";
}

我们正在选择我们想做的计算并执行响应，传递两个数字。你可以使用可选的链（最后一行代码中的?.），只在响应被定义的情况下执行它。否则，落到默认的返回字符串。

结论

编写条件语句永远是一个品味问题，某些情况需要不同的方法。然而，我发现当我有几个条件要检查时，对象字面是最可读和可维护的方式。