Jak skrócić moje instrukcje warunkowe

Mam bardzo długą instrukcję warunkową, taką jak ta:

if(test.type == 'itema' || test.type == 'itemb' || test.type == 'itemc' || test.type == 'itemd'){
    // do something.
}

Zastanawiałem się, czy mógłbym zmienić to wyrażenie / oświadczenie w bardziej zwięzłą formę.

Masz pomysł, jak to osiągnąć?

Umieść swoje wartości w tablicy i sprawdź, czy pozycja znajduje się w tablicy:

if ([1, 2, 3, 4].includes(test.type)) {
    // Do something
}

Jeśli obsługiwana przeglądarka nie ma tej Array#includesmetody, możesz użyć tego wypełnienia .

Krótkie wyjaśnienie ~skrótu tyldy:

Aktualizacja: Ponieważ mamy teraz includesmetodę, nie ma już sensu używać ~hackowania. Po prostu zachowaj to tutaj dla ludzi, którzy są zainteresowani wiedzą, jak to działa i / lub napotkali to w kodzie innych.

Zamiast sprawdzać, czy wynik indexOf jest >= 0, istnieje ładny mały skrót:

if ( ~[1, 2, 3, 4].indexOf(test.type) ) {
    // Do something
}

Oto skrzypce: http://jsfiddle.net/HYJvK/

Jak to działa? Jeśli element zostanie znaleziony w tablicy, indexOfzwraca jego indeks. Jeśli przedmiot nie został znaleziony, wróci -1. Bez wchodzenia w zbyt wiele szczegółów ~jest operatorem bitowym NOT , który zwróci0 tylko dla -1.

Lubię używać ~skrótu, ponieważ jest bardziej zwięzły niż porównanie wartości zwracanej. Chciałbym, żeby JavaScript miał in_arrayfunkcję, która zwraca bezpośrednio wartość logiczną (podobną do PHP), ale to tylko pobożne życzenia ( aktualizacja: teraz ma. Nazywa się includes. Patrz powyżej). Zauważ, że jQuery inArray, podczas udostępniania sygnatury metody PHP, w rzeczywistości naśladuje natywną indexOffunkcjonalność (co jest przydatne w różnych przypadkach, jeśli indeks jest tym, czego naprawdę szukasz).

Ważna uwaga: używanie skrótu tyldy wydaje się być przedmiotem kontrowersji, jak niektórzy zaciekle uważają, że kod nie jest wystarczająco jasny i należy go unikać za wszelką cenę (patrz komentarze do tej odpowiedzi). Jeśli podzielasz ich zdanie, powinieneś trzymać się .indexOf(...) >= 0rozwiązania.

Trochę dłuższe wyjaśnienie:

Liczby całkowite w JavaScript są podpisywane, co oznacza, że ​​skrajny lewy bit jest zarezerwowany jako bit znaku; flaga wskazująca, czy liczba jest dodatnia czy ujemna, z a1 czym jest ujemna.

Oto kilka przykładowych liczb dodatnich w 32-bitowym formacie binarnym:

1 :    00000000000000000000000000000001
2 :    00000000000000000000000000000010
3 :    00000000000000000000000000000011
15:    00000000000000000000000000001111

Oto te same liczby, ale ujemne:

-1 :   11111111111111111111111111111111
-2 :   11111111111111111111111111111110
-3 :   11111111111111111111111111111101
-15:   11111111111111111111111111110001

Skąd takie dziwne kombinacje liczb ujemnych? Prosty. Liczba ujemna jest po prostu odwrotnością liczby dodatniej + 1; dodanie liczby ujemnej do liczby dodatniej powinno zawsze dawać0 .

Aby to zrozumieć, zróbmy prostą arytmetykę binarną.

Oto, jak dodalibyśmy -1do +1:

   00000000000000000000000000000001      +1
+  11111111111111111111111111111111      -1
-------------------------------------------
=  00000000000000000000000000000000       0

A oto jak dodalibyśmy -15do +15:

   00000000000000000000000000001111      +15
+  11111111111111111111111111110001      -15
--------------------------------------------
=  00000000000000000000000000000000        0

Jak otrzymujemy te wyniki? Robiąc regularne dodawanie, tak jak nas uczono w szkole: zaczynasz od skrajnej prawej kolumny i dodajesz wszystkie wiersze. Jeśli suma jest większa niż największa liczba jednocyfrowa (która w systemie dziesiętnym to 9, ale w systemie dwójkowym to1 ), resztę przenosimy do następnej kolumny.

Teraz, jak zauważysz, po dodaniu liczby ujemnej do jej liczby dodatniej, skrajna prawa kolumna, która nie zawiera wszystkich 0s, zawsze będzie miała dwa 1s, co po dodaniu da w wyniku 2. Binarną reprezentację dwóch bytów 10przenosimy 1do następnej kolumny i umieszczamy jako 0wynik w pierwszej kolumnie. Wszystkie inne kolumny po lewej mają tylko jeden wiersz z literą a 1, więc 1przeniesione z poprzedniej kolumny ponownie sumują się do 2, co następnie przenosi ... Ten proces powtarza się, aż dojdziemy do skrajnej lewej kolumny, gdzie to, co 1ma zostać przeniesione, nie ma dokąd pójść, więc przepełnia się i gubi, a my zostajemy z nami0 s na całej długości.

Ten system nazywa się dopełnieniem 2 . Możesz przeczytać więcej na ten temat tutaj:

Reprezentacja uzupełnienia 2 dla podpisanych liczb całkowitych .

Teraz, gdy błyskawiczny kurs dopełniania 2 się skończył, zauważysz, że -1jest to jedyna liczba, której reprezentacja binarna to1 całą szerokość.

Używając ~bitowego operatora NOT, wszystkie bity w danej liczbie są odwracane. Jedynym sposobem 0powrotu do odwracania wszystkich bitów jest rozpoczęcie od1 wszystkich.

Więc to wszystko było rozwlekłym sposobem stwierdzenia, że ~npowróci tylko 0wtedy, gdy tak njest -1.

Możesz użyć instrukcji switch z fall thru:

switch (test.type) {

  case "itema":
  case "itemb":
  case "itemc":
  case "itemd":
    // do something
}

Korzystanie z nauki: powinieneś zrobić to, co powiedział idfah, a to dla największej szybkości przy zachowaniu krótkiego kodu:

TO SZYBCIEJ NIŻ ~METODA

var x = test.type;
if (x == 'itema' ||
    x == 'itemb' ||
    x == 'itemc' ||
    x == 'itemd') {
    //do something
}

http://jsperf.com/if-statements-test-techsin (górny zestaw: Chrome, dolny zestaw: Firefox)

Wniosek:

Jeśli możliwości są nieliczne i wiesz, że niektóre z nich są bardziej prawdopodobne niż można uzyskać maksymalną wydajność if ||, switch fall throughoraz if(obj[keyval]).

Jeśli możliwości jest wiele , a każda z nich może być najbardziej występująca, innymi słowy, nie możesz wiedzieć, która z nich jest najbardziej prawdopodobna, niż uzyskujesz największą wydajność z wyszukiwania obiektów if(obj[keyval])i regexczy to pasuje.

http://jsperf.com/if-statements-test-techsin/12

zaktualizuję, jeśli pojawi się coś nowego.

Jeśli porównujesz ciągi i istnieje wzorzec, rozważ użycie wyrażeń regularnych.

W przeciwnym razie podejrzewam, że próba skrócenia go spowoduje tylko zaciemnienie kodu. Rozważ po prostu zawinięcie linii, aby było ładnie.

if (test.type == 'itema' ||
    test.type == 'itemb' ||
    test.type == 'itemc' ||
    test.type == 'itemd') {
    do something.
}

var possibilities = {
  "itema": 1,
  "itemb": 1,
  "itemc": 1,
…};
if (test.type in possibilities) { … }

Używanie obiektu jako tablicy asocjacyjnej jest dość powszechne, ale ponieważ JavaScript nie ma natywnego zestawu, możesz używać obiektów jako tanich zestawów.

if( /^item[a-d]$/.test(test.type) ) { /* do something */ }

lub jeśli przedmioty nie są tak jednolite, to:

if( /^(itema|itemb|itemc|itemd)$/.test(test.type) ) { /* do something */ }

Doskonałe odpowiedzi, ale możesz uczynić kod znacznie bardziej czytelnym, opakowując jedną z nich w funkcję.

Jest to skomplikowane, jeśli stwierdzisz, że kiedy ty (lub ktoś inny) przeczytasz kod za lata, będziesz skanować, aby znaleźć sekcję, aby zrozumieć, co się dzieje. Stwierdzenie z takim poziomem logiki biznesowej spowoduje, że przez kilka sekund będziesz się potykać, gdy będziesz analizować to, co testujesz. Gdzie taki kod, pozwoli ci kontynuować skanowanie.

if(CheckIfBusinessRuleIsTrue())
{
    //Do Something
}

function CheckIfBusinessRuleIsTrue() 
{
    return (the best solution from previous posts here);
}

Nazwij swoją funkcję jawnie, aby od razu było wiadomo, co testujesz, a kod będzie znacznie łatwiejszy do zeskanowania i zrozumienia.

Możesz umieścić wszystkie odpowiedzi w zestawie Javascript, a następnie po prostu zadzwonić .contains()do zestawu.

Nadal musisz zadeklarować całą zawartość, ale wywołanie inline będzie krótsze.

Coś jak:

var itemSet = new Set(["itema","itemb","itemc","itemd"]);
if( itemSet.contains( test.type ){}

Jednym z moich ulubionych sposobów osiągnięcia tego jest biblioteka, taka jak underscore.js ...

var isItem = _.some(['itema','itemb','itemc','itemd'], function(item) {
    return test.type === item;
});

if(isItem) {
    // One of them was true
}

http://underscorejs.org/#some

w inny lub inny niesamowity sposób, który znalazłem, to ...

if ('a' in oc(['a','b','c'])) { //dosomething }

function oc(a)
{
  var o = {};
  for(var i=0;i<a.length;i++)  o[a[i]]='';
  return o;
}

oczywiście, jak widać, idzie to o krok dalej i ułatwia ich stosowanie.

http://snook.ca/archives/javascript/testing_for_a_v

używając operatorów takich jak ~ && || ((), ()) ~~ jest w porządku tylko wtedy, gdy twój kod zepsuje się później. Nie będziesz wiedział, od czego zacząć. Czytelność jest więc DUŻA.

jeśli musisz, możesz go skrócić.

('a' in oc(['a','b','c'])) && statement;
('a' in oc(['a','b','c'])) && (statements,statements);
('a' in oc(['a','b','c']))?statement:elseStatement;
('a' in oc(['a','b','c']))?(statements,statements):(elseStatements,elseStatements);

a jeśli chcesz zrobić odwrotność

('a' in oc(['a','b','c'])) || statement;

Po prostu użyj switchoświadczenia zamiast ifoświadczenia:

switch (test.type) {

  case "itema":case "itemb":case "itemc":case "itemd":
    // do your process
  case "other cases":...:
    // do other processes
  default:
    // do processes when test.type does not meet your predictions.
}

Switch działa również szybciej niż porównywanie wielu warunków warunkowych w ramach if

W przypadku bardzo długich list ciągów ten pomysł pozwoliłby zaoszczędzić kilka znaków (nie mówiąc, że poleciłbym go w prawdziwym życiu, ale powinien działać).

Wybierz znak, o którym wiesz, że nie pojawi się w twoim teście. Typ, użyj go jako separatora, umieść je wszystkie w jednym długim ciągu i wyszukaj, że:

if ("/itema/itemb/itemc/itemd/".indexOf("/"+test.type+"/")>=0) {
  // doSomething
}

Jeśli twoje ciągi są bardziej ograniczone, możesz nawet pominąć ograniczniki ...

if ("itemaitembitemcitemd".indexOf(test.type)>=0) {
  // doSomething
}

... ale w takim przypadku należy uważać na fałszywe alarmy (np. „embite” będzie pasować w tej wersji)

Dla czytelności utwórz funkcję do testu (tak, funkcja jednowierszowa):

function isTypeDefined(test) {
    return test.type == 'itema' ||
           test.type == 'itemb' ||
           test.type == 'itemc' ||
           test.type == 'itemd';
}

to nazwij to:

…
    if (isTypeDefined(test)) {
…
}
...

Myślę, że przy pisaniu tego rodzaju warunku if są dwa cele.

1. zwięzłość
2. czytelność

W związku z tym czasami numer 1 może być najszybszy, ale później wezmę numer 2 dla łatwej konserwacji. W zależności od scenariusza często wybieram wariację odpowiedzi Waltera.

Na początek mam globalnie dostępną funkcję w ramach mojej istniejącej biblioteki.

function isDefined(obj){
  return (typeof(obj) != 'undefined');
}

a wtedy, gdy faktycznie chcę uruchomić warunek if podobny do twojego, utworzę obiekt z listą prawidłowych wartości:

var validOptions = {
  "itema":1,
  "itemb":1,
  "itemc":1,
  "itemd":1
};
if(isDefined(validOptions[test.type])){
  //do something...
}

Nie jest tak szybka jak instrukcja switch / case i trochę bardziej szczegółowa niż niektóre inne przykłady, ale często ponownie używam obiektu w innym miejscu w kodzie, co może być całkiem przydatne.

Podłączając jedną z próbek jsperf wykonanych powyżej, dodałem ten test i odmianę do porównania prędkości. http://jsperf.com/if-statements-test-techsin/6 Najbardziej interesującą rzeczą, jaką zauważyłem, jest to, że niektóre kombinacje testowe w Firefoksie są znacznie szybsze niż nawet Chrome.

Można to rozwiązać za pomocą prostej pętli for:

test = {};
test.type = 'itema';

for(var i=['itema','itemb','itemc']; i[0]==test.type && [
    (function() {
        // do something
        console.log('matched!');
    })()
]; i.shift());

Używamy pierwszej sekcji pętli for do zainicjowania argumentów, które chcesz dopasować, drugiej sekcji do zatrzymania wykonywania pętli for, a trzeciej sekcji do spowodowania zakończenia pętli.