如何简化JavaScript中的多个if语句？

Question

我可以帮你进行翻译。这段内容与IT技术有关，涉及多个条件的检查和基于条件添加图标以及根据另一组条件更改背景颜色等操作。在代码中使用if语句实现。以下是代码：

JSON:

{
  "date": "2017-05-12",  
  "a": false,
  "b": true,
  "c": true,  
  "d": false,
  "status": "active"
}

Javascript:

 if (date != -1) {
  //do something
  if (a) {
    //Add icon a
  }
  if (b) {
    //Add icon b
  }
  if (c) {
    //Add icon c
  }
  if (d) {
    //Add icon d
  }
}

if(status == "active"){
  //Background Green
}
else if (status == "onhold"){
  //Background Yellow
}
else if (status == "inactive"){
  //Background Red
}
else{
  //Backgeound Grey
}

我该如何简化它？

- Aasim Hussain Khan

---

你可以使用 Switch 语句代替 if - else。 - Khanjan Bhatt

还可以看看AND、OR和其他逻辑运算符。它们也有助于将不同的if-else条件组合成一个单一的条件。 - abhit

条件语句如 if (a == true) 可以简化为 if (a)。 - Lennholm

if (a) someExpression 可以简化为 a && someExpression。 - glhrmv

Answer 1

你的代码前半部分看起来不错。对于后半部分，你应该使用switch语句。它们可以替换你正在使用的if-else语句，并在出现特定“case”时决定要执行什么操作。例如：

switch(status) {
    case 'active':
        //background green
        break;
    case 'onhold':
        //background yellow
        break;
    case 'inactive':
        //background red
        break;
    default:
        //background grey
        break;
}

- Roars

---

我的if-else代码减少了2/3。非常好的方法。 - Neil_Tinkerer

Answer 2

我的想法是：

var icons = {
    a: 'a.png',
    b: 'b.png',
    c: 'c.png',
    d: 'd.png',
}

if (date != -1) {
    Object.keys(icons).forEach(function(key) {
        if (data[key]) {
            //Add icon icons[key]
        }
    });
}

var statusColors = {
    active: 'Green',
    onhold: 'Yellow',
    inactive: 'Grey',
}

//Background statusColors[status]

- zswang

---

我正在输入同样的东西..而你非常快 +1 - Pankaj Parkar

比交换机更快？ - Daniel Cooke

Answer 3

我认为现在的代码已经很好了。比起功能相同但复杂的代码，易于理解的代码更好。

您不必写 if (a === true) 因为它等价于 if ( a )

- Johannes Andersen

Answer 4

没有办法“简化”它，但你可以尝试使用switch语句代替：

switch (status) {
  case 'active':
    // active
    break;
  case 'onhold':
    // onhold
    break;
  case 'inactive':
    // inactive
    break;
  default:
    console.log('default');
}

你甚至可以“分组”一些条件：

switch (status) {
  case 'active':
  case 'onhold':
    // active AND onhold case
    break;
  case 'inactive':
    // inactive
    break;
  default:
    console.log('default');
}

更多关于 switch 语句的信息 -> https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/switch

- errata

Answer 5

对于状态变量，您可以使用switch语句，但我认为对于第一个条件，您必须使用if-else语句。

switch (status) {
        case "active":
            //Background Green
            break;
        case "onhold":
            //Background Yellow
            break;
        case "inactive":
            //Background Red
            break;
        default:
            //Backgeound Grey
    }

- Khanjan Bhatt

Answer 6

根据你的问题描述，无法确定每种情况下的具体操作细节。但是，如果这些操作非常相似，并且属性名与需要执行的动作匹配，则可以使用循环。

['a','b','c','d'].forEach(function (k)
{
    if (objectFromJSON[k])
    {
       addIcon(k);
    }
});

对于第二部分，这稍微复杂一些，因为状态名称与颜色不匹配。你可以选择以下方式之一：

• 使用这些状态名称定义CSS类，并使用状态名称设置类:

  CSS:

  .status-active
  {
      background: green;
  }
  .status-onhold
  {
      background: yellow;
  }
  .status-inactive
  {
      background: red;
  }
  

  JS:

  theHTMLobject.classList.addClass('status-' + objectFromJSON.status);
  

• 使用对象的属性（或Map）将状态转换为颜色。

- jcaron

Answer 7

你是指“简化”还是指“缩短”-因为两者几乎是互相排斥的（代码越短未必越简单）

你的代码很清晰易懂。但有些啰嗦，并且随着事物的增长，它可能变得更加复杂。有时候，缩短代码风险更大，使其有点难以理解。

你可以考虑像状态与适当颜色之间的映射这样的东西。

var backgroundStatusMap = {
    "active":"green",
    "onhold": "yellow",
    "inactive": "red"
};

var backgroundColor = backgroundStatusMap[json.status];

如果您添加新状态，可以更轻松地添加此类内容 - 而无需搜寻放置新if..条件的正确位置。

同样，您可以为布尔值到图标创建映射。

var iconMap = {
    "a":"icon_a.png",
    "b": "icon_b.png"
};

function getIcon(json, prop){
    if(json[prop])
      return iconMap[prop];
    return null;
}

var iconA = getIcon(json,"a");
var iconB = getIcon(json,"b");

- Jamiec

Answer 8

a?setIconA():b?setIconB:c?setIconC;d?setIconD

以及

status == "active" ? setGreen() : status == "onhold": setYellow()

等等。

- Dishonered