我該如何重構這一堆if語句？

Question

想象一下，我有一個名爲incomingValue變量，我從API得到一個數，因爲它的價值。值介於0到1之間，我使用一堆if語句來設置兩個其他變量，具體取決於此值，如下所示。

var incomingValue; // Set by an API 
var setValueName; 
var setValueIcon; 
if (incomingValue < 0.10) { 
    setValueName = 'something'; 
    setValueIcon = 'something.png' 
} 
if (incomingValue > 0.09 && incomingValue < 0.20) { 
    setValueName = 'somethingElse'; 
    setValueIcon = 'somethingElse.png'; 
} 

在實際執行中，我身邊有10 if語句爲特定的時間間隔檢查，直到。 例如如果它大於0.10但小於0.16等，請執行此操作。

作爲一個JavaScript初學者感覺這是不是做的事情，即使它可以完成工作的正確途徑。我將如何重構此代碼？

更新：根據要求，我加入了全套的是在原來的代碼中使用的間隔。我之前沒有列入完整列表，因爲間隔不符合某種模式。

• 0〜0.09
• 0.09〜0.20
• 0.20〜0.38
• 0.38-0.48
• 0.48至0.52
• 0.52〜0.62
• 0.61〜0.80
• 0.80到1

Answer 1

請記住單一責任原則。採取這一代碼出來，像這樣一個單獨的函數：

function determineNameAndIcon(incomingValue) { 
    if (incomingValue < 0.10) { 
    return { 
     name: "something", 
     icon: "something.png" 
    }; 
    } 
    if (incomingValue < 0.20) { 
    return { 
     name: "somethingElse", 
     icon: "somethingElse.png" 
    }; 
    } 
    // etc 
    return { 
    name: "somethingDefault", 
    icon: "somethingDefault.png" 
    }; 
} 

// ... 

var incomingValue; // Set by an API 
const { 
    name: setValueName, 
    icon: setValueIcon 
} = determineNameAndIcon(incomingValue); 

注意determineNameAndIcon仍然有重複的部分很長的功能。這可以進一步重構爲數據驅動版本：

const nameAndIconList = [ 
    { 
    maxValue: 0.10, 
    name: "something", 
    icon: "something.png" 
    }, 
    { 
    maxValue: 0.20, 
    name: "somethingElse", 
    icon: "somethingElse.png" 
    }, 
    // ... 
]; 

const nameAndIconDefault = { 
    name: "somethingDefault", 
    icon: "somethingDefault.png" 
}; 

function determineNameAndIcon(incomingValue) { 
    for (let item of nameAndIconList) { 
    if (incomingValue < item.maxValue) { 
     return item; 
    } 
    } 
    return nameAndIconDefault; 
} 

Answer 2

使用你設置的範圍你的結果陣列的解決方案：

var categories = [{something: [0, 0.1]}, 
 
        {somethingElse: [0.1, 0.2]}, 
 
        {somethingElse2: [0.2, 0.3]}, 
 
        {anotherSomething: [0.3, 1]}]; 
 

 
function res(number){ return Object.keys(categories.filter(function(elem) { 
 
    var key = elem[Object.keys(elem)]; 
 
    return number >= key[0] && number < key[1] 
 
})[0])[0]}; 
 

 
var incomingValue = 0.12; 
 

 
var setValueName = res(incomingValue); 
 
var setValueIcon = res(incomingValue) + ".png"; 
 
console.log(setValueName, setValueIcon);

Answer 3

MB我會重構這個代碼，類似這樣的，但它不是真正的標準圖案：

var incomingValue=0.08; // Set by an API 
var setValueName; 
var setValueIcon; 

switch(true) { 
    case incomingValue < 0.10 : 
     setValueName = "something"; 
     setValueIcon ="something.png"; 
     alert("Hello World !"); 
     break; 
    case incomingValue > 0.09 && incomingValue < 0.20 : 
     setValueName = "somethingElse"; 
     setValueIcon ="somethingElse.png"; 
     alert("Hello !"); 
     break; 
    default : 
     alert("Adele !"); 
     break; 
} 

凡人將使用如果...否則，如果...條件是這樣的：

var incomingValue; // Set by an API 
var setValueName; 
var setValueIcon; 
if (incomingValue < 0.10) { 
    setValueName = "something"; 
    setValueIcon ="something.png" 
} **else** if (incomingValue > 0.09 && incomingValue < 0.20) { 
    setValueName = "somethingElse"; 
    setValueIcon ="somethingElse.png" 
} 

但我不喜歡這樣......我的意見:)

Answer 4

function findValue(incomingValue){ 

    var itemValues = [ 
     [.06, "valueName", "valueIcon"], 
     [.08, "valueName", "valueIcon"], 
     [.09, "valueName", "valueIcon"], 
     [.1, "valueName", "valueIcon"], 

    ] 


    var foundValues = itemValues. 
     filter(v=>v[0] >= incomingValue) 
     .sort(); 

    if(foundValues.length == 0){ 
    throw "incoming value not found." 
    } 
    return foundValues[0]; 
} 

let value = findValue(.079); 

console.log(value); 

這是假設你想成爲一個選擇的範圍的最低部分（剛好顛倒排序，如果你想它成爲最高）。