我该如何重构这一堆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); 

这是假设你想成为一个选择的范围的最低部分（刚好颠倒排序，如果你想它成为最高）。