javascriptのオブジェクトリテラルに基づいてif/elseif/else文を作成する方法

Question

オブジェクトリテラルに基づいてif/else if/else文を使用したいと考えています。オブジェクトリテラルはユーザー生成されるので、キーと値のペアの命名規則を知ることはできますが、どれくらい長くなるかはわかりません。

例えば、私は

vpwidth = window.innerWidth; 

function modifyImgSrc (srcModifier) { 
    src = src.replace(".jpg", srcModifier + ".jpg"); 
    src = src.replace(".png", srcModifier + ".png"); 
    src = src.replace(".gif", srcModifier + ".gif"); 
}; 

以下のimg src属性を更新するには、ビューポートの幅と機能を取得するいくつかのコードを持っているそして、私は

var brkpnts = [ 
    {width: 320, srcmodifier: '-s'}, 
    {width: 768, srcmodifier: '-m'}, 
    {width: 1024, srcmodifier: '-l'}, 
]; 

私のオブジェクトリテラルがあると私は、生成したいですオブジェクトリテラルに基づくif文

if (vpwidth <= brkpnts[0].width) { 
    modifyImgSrc(brkpnts[0].srcmodifier); 
} 
else if (vpwidth <= brkpnts[1].width) { 
    modifyImgSrc(brkpnts[1].srcmodifier); 
} 
else { 
    modifyImgSrc(breakpoints[2].srcmodifier); 
} 

obj ectリテラルはユーザーが変更できますが、if/else if/elseステートメントを生成して、ユーザーがオブジェクトリテラルに追加する内容と一致させるにはどうすればよいですか？たとえば、3つ以上のキーと値のペアを持つことができます。

var breakpoints = [ 
    {width: 320, srcmodifier: '-xs'}, 
    {width: 534, srcmodifier: '-s'}, 
    {width: 768, srcmodifier: '-m'}, 
    {width: 1024, srcmodifier: '-l'}, 
    {width: 1440, srcmodifier: '-xl'} 
]; 

この場合、if文はこのようになります。

if (vpwidth <= brkpnts[0].width) { 
    modifyImgSrc(brkpnts[0].srcmodifier); 
} 
else if (vpwidth <= brkpnts[1].width) { 
    modifyImgSrc(brkpnts[1].srcmodifier); 
} 
else if (vpwidth <= brkpnts[2].width) { 
    modifyImgSrc(brkpnts[1].srcmodifier); 
} 
else if (vpwidth <= brkpnts[3].width) { 
    modifyImgSrc(brkpnts[1].srcmodifier); 
} 
else { 
    modifyImgSrc(breakpoints[4].srcmodifier); 
} 

これは可能ですか？ もしそうなら、これを実現するにはどうすればよいのですか？配列による

Answer 1

ループ：

var modified = false; 
for(var i = 0, len = brkpnts.length; i < len; i++) { 
    if(vpwidth <= brkpnts[i].width) { 
     modifyImgSrc(brkpnts[i].srcmodifier); 
     modified = true; 
     break; 
    } 
} 

// Use the biggest one if vpwidth larger than all 
if(!modified) { 
    modifyImgSrc(brkpnts[brkpnts.length - 1].srcmodifier); 
} 

編集：ものの、ザンダーは彼のコメントで正しいことは、おそらく代わりにmedia queriesを使用する必要があります。

Answer 2

vpwidth = window.innerWidth; 

function modifyImgSrc (srcModifier) {  
    src = src.replace(".jpg", srcModifier + ".jpg");  
    src = src.replace(".png", srcModifier + ".png");  
    src = src.replace(".gif", srcModifier + ".gif"); 
}; 

var breakpoints = [  
    {width: 320, srcmodifier: '-xs'},  
    {width: 534, srcmodifier: '-s'},  
    {width: 768, srcmodifier: '-m'},  
    {width: 1024, srcmodifier: '-l'},  
    {width: 1440, srcmodifier: '-xl'} 
]; 

for(var i=0; i<breakpoints.length;i++) 
{ 
    if(breakpoints[i].width == vpwidth) 
    { 
    modifyImgSrc(breakpoints[i].srcmodifier); 
    break; 
    } 
}