Question

我想有一个基于对象文字的if / else if / else语句。对象文字将是用户生成的，所以我不知道它会有多长，虽然我会知道键/值对命名方案。

例如，我有一些获取视口宽度的代码和一个更新img src属性的函数

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

虽然由于用户可以修改对象文字，但是如何生成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);
}

编辑尽管Xander在评论中是正确的，但您应该使用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;
  }
}

如何在javascript中基于对象文字创建if / elseif / else语句

2 个答案: