Javascript 我怎样才能浓缩这些if语句？

我想减小这个if语句的大小，这样它可以连续迭代到大约20次，模式如下：

    if (i >= 0 && i <= 3) {
        $('.timeline__bar').css({ 
            transform: 'translateX(-0vw)',
        });
    }
    if (i > 3 && i <= 7) {
        $('.timeline__bar').css({ 
            transform: 'translateX(-92vw)',
        });
    }
    if (i > 7 && i <= 11) {
        $('.timeline__bar').css({ 
            transform: 'translateX(-184vw)',
        });
    } 
//ect ect until 20

---

if（i>=0&&i3&&i7&&i在最后两个
if
语句中使用
else if
而不是
if
。这将稍微提高性能。
您还可以检查此方法并从语句中删除附加检查

var size;

if (i <= 3 && i > 0) {
    size = '0vw';
} else if (i <= 7) {
    size = '-92vw';
} else if(i <= 11) { 
    size = '-184vw'; 
}

$('.timeline__bar').css({ 
    transform: `translateX(${size})`,
});

var大小；
如果（i 0）{
大小='0vw'；
}如果（我尝试这样的事情

function trans(num) {
 $('.timeline__bar').css({ 
    transform: 'translateX(-'+(Math.floor(num/4)*92)+'vw)',
 });
}

更新：我使用的是parseInt，但改为Math.floor，因为如果你循环，它的性能会更好。
试试这个。（内部为循环，或者无论你在哪里使用大量的ifs）

最好使用
if
和
else if
，使其不使用不必要的代码。并删除在前面的
if
中选中的不必要条件：

if (i >= 0 && i <= 3) {
    $('.timeline__bar').css({ 
        transform: 'translateX(-0vw)',
    });
} else if (i <= 7) { //only one condition here is what you need. :)
    $('.timeline__bar').css({ 
        transform: 'translateX(-92vw)',
    });
} //...

if（i>=0&&i这就是您要查找的，在哪里可以对
=0
进行外部检查，并在内部使用
else if

通过使用
else if
而不是单独的
if
语句，您只需检查它是否为
i=0）{
if（i将公共代码分解出来，设置一个变量，然后使用else if

var translateX = '-0vw'
if (i > 3 && i <= 7) {
 translateX = '-92vw'
} else if (i > 7 && i <= 11) {
  translateX = '-184vw'
}

$('.timeline__bar').css({ 
  transform: 'translateX(' + translateX + ')',
});

var translateX='-0vw'
如果（i>3&&i>7&&i Wow）被帮助淹没了！谢谢大家，现在哪一个是最好的答案…这是可能的。我不知道他多久会称这个
parseInt
正在做
Math.floor
这里？还有什么理由使用
parseInt
吗？“比Math floor短”…但cpu的时间更长：它不必要地将浮点转换为字符串，然后将字符串解析为数字。按预期使用
Math.floor
，或者
>0
使用Math.floor还有另一个答案-但我可以更新-注意：-似乎
（num/4 | 0）
在任何情况下都是Chrome上最快的解释：）
function translateTBar(value){
    $('.timeline__bar').css({ transform: 'translateX(-' + value + 'vw)'});
}

if( i >= 0 && i <= 3) { translateTBar(0); }
else if( i <= 7) { translateTBar(92); }
else if( i <= 11) { translateTBar(184); }
//...

if (i >= 0) {
    if (i <= 3) {
        $('.timeline__bar').css({ 
            transform: 'translateX(-0vw)',
        });
    } else if (i <= 7) {
        $('.timeline__bar').css({ 
            transform: 'translateX(-92vw)',
        });
    } else if (i <= 11) {
        $('.timeline__bar').css({ 
            transform: 'translateX(-184vw)',
        });
    } else if (i <= 15) {
        $('.timeline__bar').css({ 
            transform: 'translateX(-276vw)',
        });
    } else if (i <= 19) {
        $('.timeline__bar').css({ 
            transform: 'translateX(-368vw)',
        });
    } 
}

var translateX = '-0vw'
if (i > 3 && i <= 7) {
 translateX = '-92vw'
} else if (i > 7 && i <= 11) {
  translateX = '-184vw'
}

$('.timeline__bar').css({ 
  transform: 'translateX(' + translateX + ')',
});