Jak mogę zmienić tę grupę instrukcji if?

Question

Wyobraź sobie, że mam zmienną o nazwie incomingValue i otrzymuję numer z interfejsu API, ponieważ jest to wartość. Wartości mieszczą się w zakresie od 0 do 1, a ja ustawiam dwie inne zmienne w zależności od tej wartości, stosując kilka instrukcji if, jak widać poniżej.

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'; 
} 

W rzeczywistej implementacji, mam około 10 if sprawdzanie określonych odstępach czasu aż . np. zrób to, jeśli jest więcej niż 0,10, ale mniej niż 0,16 i tak dalej.

Jako początkujący JavaScript, wydaje się, że nie jest to właściwy sposób na robienie rzeczy, mimo że wykonuje swoją pracę. Jak mogę zmienić ten kod?

Aktualizacja: Zgodnie z życzeniem dodam pełny zestaw interwałów używanych w oryginalnym kodzie. Nie uwzględniłem wcześniej pełnej listy, ponieważ odstępy nie są zgodne z określonym wzorcem.

• 0 do 0,09
• 0,09 do 0,20
• 0,20 do 0,38
• 0,38 do 0,48
• 0,48 do 0,52
• 0,52 do 0,62
• 0,61 0,80
• 0,80 to 1

Answer 1

Pamiętaj o zasadzie jednej odpowiedzialności. Wziąć ten kod się do osobnej funkcji tak:

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

Uwaga, determineNameAndIcon jest jeszcze bardzo długo funkcja z powtarzających się elementów. To może być dalej refaktoryzowane do wersji sterowanej danymi:

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

Rozwiązanie za pomocą tablicy, gdzie można ustawić zakresy wyników:

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 będę byłaby ten kod tak, ale to naprawdę nie jest standardem tupot:

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; 
} 

Śmiertelnik użyje warunku if ... else if ... tak:

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" 
} 

Ale ja nie lubię ten sposób ... Moja opinia :)

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

Jest to przy założeniu, że chcesz najniższa część zakresu być wybrany (tylko odwrócić rodzaju, jeśli chcesz być najwyższym).