Question

我有多个条件需要检查。我必须根据条件添加图标，然后我需要根据其他一些条件更改背景颜色。我正在使用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
}

如何简化它？

Answer 1

我的想法是：

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]

Answer 2

无法“简化”它，但您可以尝试使用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声明的更多信息 - ＆gt; https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/switch

Answer 3

我认为这是非常好的。拥有可理解的代码比使用完全相同的复杂代码更好。

你不必做

if (a === true)

因为它相当于

if ( a )

Answer 4

对于Status变量，您可以使用switch但是对于第一个条件，您必须使用if-else语句。

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

Answer 5

你的意思是＆＃34;简化＆＃34;或者你的意思是＆＃34;缩短＆＃34; - 因为这两者几乎互相排斥（较短的代码往往不简单！）

您的代码清晰易懂。但它有点冗长，随着事情的发展会变得更加复杂。有时它会更好地缩短，并且有可能让它变得更难理解。

你可以考虑状态和适当颜色之间的地图

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");

如何简化多个if语句javascript？

5 个答案: