if文のこの束をどのようにリファクタリングできますか？

Question

という変数がとなっていて、その値としてAPIから数値を取得しているとします。値は0から1の間であり、私は以下のようにif文の束を使ってこの値に応じて2つの他の変数を設定しています。文がまで特定の間隔をチェックする場合は、実際の実装では

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を持っています。例えば、。 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

単一責任の原則を覚えておいてください。 determineNameAndIconはまだ部品を繰り返すと非常に長い関数であることを

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

お知らせ：そうのような別の関数に出ているコードを取ります。

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

死者は、このようなif ... else if ...条件を使用します。

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

これは、あなたがそれをしたい場合は（単にソートを逆にあなたが範囲の最も低い部分が選択された一つになりたいと仮定しています最高になるように）。