带有多个 elseif 的 Javascript if 语句答案

【问题标题】：Javascript if statement with multiple elseifs带有多个 elseif 的 Javascript if 语句
【发布时间】：2012-09-05 15:00:18
【问题描述】：

我使用下面的 if 语句来比较表中同一列中的 2 行。我多次使用相同的代码块对不同的列执行相同的计算。

基本上，我希望有一个箭头显示一行和下一行之间的值移动，以及值落入的阈值。因此，例如，在我下面的代码中，任何高于 15 的值都应该是一个红色箭头，如果之前的值较低，那么箭头应该指向上方。我稍后在代码中使用从另一个位置调用的图像来渲染箭头，因此 if 语句只为我提供了相应箭头的字符串。

正如我上面所说，我多次使用相同的代码块。奇怪的是，输出对某些变量有效，而对其他变量无效；即使它是替换了变量名的完全相同的代码！它给我的错误是有时没有明显的原因。

我的条件是不是太多了？有没有更有效的方法来做我想做的事情？

任何帮助将不胜感激！

谢谢，卡尔

var Arrow = " ";
if(KPI[0] > KPI[1] && KPI[0] >= 15)
{
    Arrow = "redarrowup.png";
}
else if(KPI[0] < KPI[1] && KPI[0] >= 15)
{
    Arrow = "redarrowdown.png";
}
else if(KPI[0] = KPI[1] && KPI[0] >= 15)
{
    Arrow = "redarrowflat.png";
}
else if(KPI[0] > KPI[1] && KPI[0] >= 10 && KPI[0] < 15)
{
    Arrow = "yellowarrowup.png";
}
else if(KPI[0] < KPI[1] && KPI[0] >= 10 && KPI[0] < 15)
{
    Arrow = "yellowarrowdown.png";
}
else if(KPI[0] = KPI[1] && KPI[0] >= 10 && KPI[0] < 15)
{
    Arrow = "yellowarrowflat.png";
}
else if(KPI[0] > KPI[1] && KPI[0] < 10)
{   
    Arrow = "greenarrowup.png";
}
else if(KPI[0] < KPI[1] && KPI[0] < 10)
{   
    Arrow = "greenarrowdown.png";
}
else
{
    Arrow = "greenarrowflat.png";
}

【问题讨论】：

当您说“KPI[0] = KPI[1]”时，您真的是指“KPI[0] == KPI[1]”甚至“KPI[0] === KPI” [1]'?
您可以尝试使用类似参数的嵌套。它不一定会更有效，但它可以更容易阅读/弄清楚流程。
许多人提出了同样的建议，将“=”替换为“==”，这解决了我的问题，所以谢谢大家！也感谢所有提供更高效、更整洁、更清洁的解决方案的人；我将努力将这些解决方案用于未来的项目:)

标签： javascript if-statement multiple-conditions

【解决方案1】：

我建议分别表达不同的概念，然后在最后将它们组合起来。像这样：

var arrow;
var movement = "flat";
var band = "green";

if (KPI[0] > KPI[1]) {
    movement = "up";
} else if (KPI[0] < KPI[1]) {
    movement = "down";
}

if (KPI[0] >= 15) {
    band = "red";
} else if (KPI[0] >= 10) {
    band = "yellow";
}

arrow = band + "arrow" + movement + ".png";

您还可以将这些元素中的每一个都推迟到一个函数中，因此您的最后一行将显示为：

arrow = getBand(KPI[0], KPI[1]) + "arrow" + getMovement(KPI[0], KPI[1]) + ".png";

这样可以更轻松地独立于其他逻辑来更改频段。

【讨论】：

我真的很喜欢这个主意...但是我需要 3 个变量来比较每个变量的箭头、运动和波段吗？即 KPIarrow、KPImovement、KPIband、OTHERVARarraow、OTHERVARmovement、OTHERVARband 等？
不公平 :) 我在一分钟前提出了类似的解决方案！
@Shedal - 做得很好，得到了正确的答案，并为您的评论 +1。减少一个额外的 else 语句并使用函数使代码更具凝聚力可能让我获得了选票。
@KarlMajor - 变量，或者将这些组件推迟到函数中。如果您有兴趣，我可以提供一个使用函数组成箭头的示例。

【解决方案2】：

我会说：

function direction(val1, val2){
  return val1 < val2 ? "down" : val1 == val2 ? "flat" : "up";
}

function color(val){
  return val >= 15 ? "red" : val >= 10 ? "yellow" : "green";
}

var arrow = color(KPI[0]) +"arrow"+ direction(KPI[0], KPI[1]) +".png";

如果您不理解代码，我总是告诉人们不要复制和粘贴代码。您可能对?: 位不熟悉。这是一个ternary operator（如果是内联的）。

如果您需要多个箭头，我建议您也添加一个生成箭头的函数：

function arrow(val1, val2){
  return color(val1) +"arrow"+ direction(val1, val2) +".png";
}

var kpiArrow = arrow(KPI[0], KPI[1]);

【讨论】：

无与伦比。杰出的！轻松获得最佳答案。最短，最清晰的国家英里。
我喜欢这有多短:) 让我试一试并报告！谢谢贾斯珀！
我喜欢三元语句，但不喜欢嵌套的时候。目标应该是最大的可读性，而不是最少的代码行数。

【解决方案3】：

乍一看，我会说您有一个“=”，而您需要一个“==”（甚至是“===”）。例如

if(KPI[0] = KPI[1] && KPI[0] >= 15)

应该是

if(KPI[0] == KPI[1] && KPI[0] >= 15)

（甚至是我所说的 ===）。等等。 "=" 是一个赋值运算符，它将 KPI[0] 的值设置为 KPI[1] 的值，然后返回该值，因此您实际上是在执行以下操作：

KPI[0] = KPI[1];
if(KPI[1] && KPI[0] >= 15)

我怀疑这是意图。也就是说，正如其他几个人已经说过的那样，有更好的方法来构建代码。

【讨论】：

感谢您的回复亚当。 = 条件对我来说似乎工作正常，大于或小于条件给了我奇怪的结果；虽然我会添加 == 作为未来的最佳实践:)
我不确定你是否完全理解。 = 根本不是条件运算符，而是赋值运算符。这意味着在第一个 KPI[0] = KPI[1] 中，您正在更改 KPI[0] 的值（更改为 KPI[1] 的值）。这当然会影响以后与 KP[0] 的比较（包括大于/小于），因为您要比较的 KP[0] 的值不是您认为的那样。这不是最佳实践的问题（== 与 === 作为默认值可以考虑这样的讨论），而是根本不同的操作问题。
哇，就这么简单！非常感谢，问题解决了:)

【解决方案4】：

我认为问题不在于 if 的数量。但是你可以更好地构建你的代码：

var direction, color;

// set direction

if(KPI[0] > KPI[1])
{
  direction = "up";
}
else if(KPI[0] < KPI[1])
{
  direction = "down";
}
else if(KPI[0] == KPI[1]) // there was an error in this condition, by the way
{
  direction = "flat";
}

// set color

if(KPI[0] >= 15)
{
  color = "red";
}
else if(KPI[0] >= 10 && KPI[0] < 15)
{
  color = "yellow";
}
else if(KPI[0] < 10)
{
  color = "green";
}

var Arrow = color + "arrow" + direction + ".png";

【讨论】：

【解决方案5】：

这个怎么样：

var arrow = "";

if (KPI[0] >= 15) {
   arrow = "redarrow";
}
else if (KPI[0] >= 10) {
   arrow = "yellowarrow";
}
else if (KPI[0] < 10) {
   arrow = "greenarrow";
}

if (KPI[0] < KPI[1]) {
   arrow += "down.png";
}
else if (KPI[0] > KPI[1]) {
   arrow += "up.png";
}
else if (KPI[0] == KPI[1]) {
   arrow += "flat.png";
}

【讨论】：