Javascript, если заявление с несколькими elseif

Question

У меня есть приведенный ниже оператор 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";
}

Answer 1

На первый взгляд я бы сказал, что у вас есть "=", где вам нужен "==" (или даже "==="). Например

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)

Я сомневаюсь, что это намерение. Тем не менее, как уже говорили некоторые другие, есть лучшие способы структурировать код.

Answer 2

Я рекомендую выразить различные концепции отдельно, а затем объединить их в конце. Как это:

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";

Это облегчило бы смену полос в изоляции от этой другой логики.

Answer 3

Я бы сказал:

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";

Я всегда говорю людям не копировать и не вставлять код, если вы этого не понимаете. Вы можете быть незнакомы с ?: немного. Это троичный оператор (встроенный, если).

Если вам нужно несколько стрелок, я бы предложил добавить функцию для генерации стрелки:

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

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

Answer 4

Как насчет этого:

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

Answer 5

Я не думаю, что проблема в количестве если. Но вы можете лучше структурировать свой код:

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";