如何簡化多個if語句的javascript？

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 == true) { 
    //Add icon a 
    } 
    if (b == true) { 
    //Add icon b 
    } 
    if (c == true) { 
    //Add icon c 
    } 
    if (d == true) { 
    //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

你代碼的前半部分看起來很好創建地圖。 對於你的代碼的後半部分，你應該使用switch語句。這些代替你正在使用的if-else語句，並決定在發生某些「事件」時應該怎麼做。例如：

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

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聲明 - >https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/switch

Answer 3

我認爲它是相當不錯的，因爲它是。可以理解的代碼比完成相同事情的複雜代碼更好。

你不必做

if (a === true)

，因爲它是相當於

if (a)

Answer 4

對於狀態變量，你可以使用開關，但對於第一個條件，你必須使用if - 我認爲是這樣的說法。

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

Answer 5

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

和

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

等。

Answer 6

我的想法是：

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 7

你的問題並沒有完全放棄在每種情況下的行動的細節，但如果他們是非常相似的，這裏面的屬性名和任何行動之間的匹配你需要拿，你可以使用循環。

['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); 
  

• 使用對象的屬性（或地圖）將狀態轉換爲顏色

Answer 8

你的意思是「簡化」或你的意思是「縮短」 - 因爲這兩個幾乎是相互排斥的（短的代碼往往不是簡單！）

你的代碼是清楚的，可以理解的。但它有點冗長，隨着事物的增長可能變得更加複雜。有時候是更好的縮短和讓它更難理解的風險。

你可以考慮類似的地位和適當的顏色

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