javascript - пример - тернарный оператор js




Оператор switch для более чем/меньше, чем (7)

поэтому я хочу использовать оператор switch следующим образом:

switch (scrollLeft) {
  case (<1000):
   //do stuff
   break;
  case (>1000 && <2000):
   //do stuff
   break;
}

Теперь я знаю, что любое из этих утверждений ( <1000 ) или ( >1000 && <2000 ) не будет работать (по разным причинам, очевидно). То, что я прошу, - это самый эффективный способ сделать именно это. Я ненавижу использование операторов 30 if , поэтому лучше использовать синтаксис switch. Есть ли что-нибудь, что я могу сделать?


Я ненавижу использование 30-ти утверждений

В последнее время у меня была такая же ситуация, вот как я ее решил:

до:

if(wind_speed >= 18) {
    scale = 5;
} else if(wind_speed >= 12) {
    scale = 4;
} else if(wind_speed >= 9) {
    scale = 3;
} else if(wind_speed >= 6) {
    scale = 2;
} else if(wind_speed >= 4) {
    scale = 1;
}

после:

var scales = [[4, 1], [6, 2], [9, 3], [12, 4], [18, 5]];
scales.forEach(function(el){if(wind_speed > el[0]) scale = el[1]});

И если вы установите «1, 2, 3, 4, 5», то это может быть еще проще:

var scales = [4, 6, 9, 12, 18];
scales.forEach(function(el){if(wind_speed >= el) scale++});

Untested и unsure, если это будет работать, но почему бы не сделать несколько if statements , чтобы установить переменные для switch statement .

var small, big;

if(scrollLeft < 1000){
    //add some token to the page
    //call it small
}


switch (//reference token/) {
  case (small):
   //do stuff
   break;
  case (big):
   //do stuff;
   break;
}

В моем случае (цветовое кодирование в процентах, без критического значения) я быстро написал следующее:

function findColor(progress) {
    const thresholds = [30, 60];
    const colors = ["#90B451", "#F9A92F", "#90B451"];

    return colors.find((col, index) => {
        return index >= thresholds.length || progress < thresholds[index];
    });
}

Вы можете создать настраиваемый объект с критериями и функцией, соответствующей критериям

var rules = [{ lowerLimit: 0,    upperLimit: 1000, action: function1 }, 
             { lowerLimit: 1000, upperLimit: 2000, action: function2 }, 
             { lowerLimit: 2000, upperLimit: 3000, action: function3 }];

Определите функции для того, что вы хотите сделать в этих случаях (определите функции1, function2 и т. Д.).

И «оцените» правила

function applyRules(scrollLeft)
{
   for(var i=0; i>rules.length; i++)
   {
       var oneRule = rules[i];
       if(scrollLeft > oneRule.lowerLimit && scrollLeft < oneRule.upperLimit)
       {
          oneRule.action();
       }
   }
}

Заметка

Я ненавижу использование 30-ти утверждений

Много раз, если утверждения легче читать и поддерживать. Я бы рекомендовал вышесказанное только тогда, когда у вас много условий и возможностей для роста в будущем.

Обновить
Как заметил в комментариях @Brad, если условия взаимоисключающие (только один из них может быть истинным за раз), проверка верхнего предела должна быть достаточной:

if(scrollLeft < oneRule.upperLimit)

при условии, что условия определены в порядке возрастания (сначала самый низкий, от 0 to 1000 , а затем от 1000 to 2000 например)


Обновление принятого ответа (не могу комментировать). Начиная с 1/12/16 с использованием демонстрационного jsfiddle в chrome, switch-instant является самым быстрым решением.

Результаты: Временное разрешение: 1,33

   25ms "if-immediate" 150878146 
   29ms "if-indirect" 150878146
   24ms "switch-immediate" 150878146
   128ms "switch-range" 150878146
   45ms "switch-range2" 150878146
   47ms "switch-indirect-array" 150878146
   43ms "array-linear-switch" 150878146
   72ms "array-binary-switch" 150878146

Законченный

 1.04 (   25ms) if-immediate
 1.21 (   29ms) if-indirect
 1.00 (   24ms) switch-immediate
 5.33 (  128ms) switch-range
 1.88 (   45ms) switch-range2
 1.96 (   47ms) switch-indirect-array
 1.79 (   43ms) array-linear-switch
 3.00 (   72ms) array-binary-switch

Что именно вы делаете в работе?

Вы можете сделать что-то вроде:

(scrollLeft < 1000) ? //do stuff
: (scrollLeft > 1000 && scrollLeft < 2000) ? //do stuff
: (scrollLeft > 2000) ? //do stuff
: //etc. 

switch (scrollLeft/1000) {
  case 0: // (<1000)
   //do stuff
   break;
  case 1: // (>=1000 && <2000)
   //do stuff;
   break;
}

Работает только в том случае, если у вас есть регулярные шаги ...

EDIT: поскольку это решение продолжает расти, я должен посоветовать, что решение mofolo является лучшим способом





switch-statement