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

How can I create an if/elseif/else statement based on an object literal in javascript

本文关键字：if elseif else 语句 创建 文字 javascript 何基于 对象      更新时间：2023-09-26

我想有一个基于对象文字的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);
}

这可能吗？如果是这样，如何，这是实现这一目标的最佳方法吗？

遍历数组：

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在他的评论中是正确的，但您可能应该使用媒体查询。

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;
  }
}
相关文章：