Wie ich meine bedingten Aussagen verkürzen kann

Ich habe eine sehr lange bedingte Aussage wie die folgende:

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

Ich habe mich gefragt, ob ich diesen Ausdruck / diese Aussage in eine präzisere Form umgestalten könnte.

Irgendeine Idee, wie dies erreicht werden kann?

Fügen Sie Ihre Werte in ein Array ein und überprüfen Sie, ob sich Ihr Element im Array befindet:

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

Wenn ein von Ihnen unterstützter Browser nicht über die Array#includesMethode verfügt, können Sie diese Polyfüllung verwenden .

Kurze Erklärung der ~Tilde-Verknüpfung:

Update: Da wir jetzt die includesMethode haben, macht es keinen Sinn ~mehr , den Hack zu verwenden. Bewahren Sie dies hier für Personen auf, die wissen möchten, wie es funktioniert, und / oder die im Code anderer Benutzer darauf gestoßen sind.

Anstatt zu überprüfen, ob das Ergebnis von indexOfist >= 0, gibt es eine nette kleine Verknüpfung:

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

Hier ist die Geige: http://jsfiddle.net/HYJvK/

Wie funktioniert das? Wenn ein Element im Array gefunden wird, wird indexOfsein Index zurückgegeben. Wenn der Artikel nicht gefunden wurde, wird er zurückgegeben -1. Ohne zu sehr ins Detail zu gehen, ~ist der ein bitweiser NOT-Operator , der 0nur für zurückgibt-1 .

Ich verwende gerne die ~Verknüpfung, da sie prägnanter ist als ein Vergleich des Rückgabewerts. Ich wünschte, JavaScript hätte eine in_arrayFunktion, die einen Booleschen Wert direkt zurückgibt (ähnlich wie PHP), aber das ist nur Wunschdenken ( Update: das tut es jetzt. Es heißt includes. Siehe oben). Beachten Sie, dass jQuery's inArray, während es die Methodensignatur von PHP teilt, tatsächlich die native indexOfFunktionalität nachahmt (was in verschiedenen Fällen nützlich ist, wenn der Index genau das ist, wonach Sie wirklich suchen).

Wichtiger Hinweis: Die Verwendung der Tilde-Verknüpfung scheint kontrovers diskutiert zu werden, da einige vehement der Ansicht sind, dass der Code nicht klar genug ist und unter allen Umständen vermieden werden sollte (siehe die Kommentare zu dieser Antwort). Wenn Sie ihre Meinung teilen, sollten Sie sich an die .indexOf(...) >= 0Lösung halten.

Eine etwas längere Erklärung:

Ganzzahlen in JavaScript sind signiert. Dies bedeutet, dass das Bit ganz links als Vorzeichenbit reserviert ist. ein Flag, das angibt, ob die Zahl positiv oder negativ ist, wobei a 1negativ ist.

Hier sind einige positive Beispielzahlen im 32-Bit-Binärformat:

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

Hier sind die gleichen Zahlen, aber negativ:

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

Warum so komische Kombinationen für die negativen Zahlen? Einfach. Eine negative Zahl ist einfach die Umkehrung der positiven Zahl + 1; Das Addieren der negativen Zahl zur positiven Zahl sollte immer ergeben 0.

Um dies zu verstehen, führen wir eine einfache binäre Arithmetik durch.

Hier ist , wie wir hinzufügen würde -1zu +1:

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

Und hier ist , wie wir hinzufügen würde -15zu +15:

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

Wie bekommen wir diese Ergebnisse? Wenn Sie regelmäßig hinzufügen, wie wir es in der Schule gelernt haben: Sie beginnen in der Spalte ganz rechts und addieren alle Zeilen. Wenn die Summe größer ist als die größte einstellige Zahl (die dezimal 9, aber binär ist 1), übertragen wir den Rest in die nächste Spalte.

Wie Sie feststellen werden, hat die Spalte ganz rechts, die nicht alle 0s ist, beim Hinzufügen einer negativen Zahl zu ihrer positiven Zahl immer zwei 1s, was zusammen ergibt 2. Die binäre Darstellung von zwei Wesen 10tragen wir 1in die nächste Spalte und setzen ein 0für das Ergebnis in die erste Spalte. Alle anderen Spalten auf der linken Seite haben nur eine Zeile mit einem 1, so dass sich die 1aus der vorherigen Spalte übertragenen Werte wieder summieren 2, was sich dann überträgt ... Dieser Vorgang wiederholt sich, bis wir zur Spalte ganz links gelangen, wo Das 1, was übertragen werden soll, kann nirgendwo hingehen, also läuft es über und geht verloren, und wir haben 0überall s übrig .

Dieses System heißt 2's Complement . Mehr dazu lesen Sie hier:

2's Komplementdarstellung für vorzeichenbehaftete Ganzzahlen .

Jetzt, da der Crash-Kurs im 2er-Komplement beendet ist, werden Sie feststellen, dass dies -1die einzige Zahl ist, deren binäre Darstellung 1überall ist.

Mit dem ~bitweisen NOT-Operator werden alle Bits in einer bestimmten Zahl invertiert. Der einzige Weg, um 0vom Invertieren aller Bits zurück zu kommen, besteht darin, mit 1's all across' zu beginnen.

Das alles war also eine langatmige Art zu sagen, ~ndie nur zurückkehren wird, 0wenn es so nist -1.

Sie können die switch-Anweisung mit fall thru verwenden:

switch (test.type) {

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

Verwenden der Wissenschaft: Sie sollten das tun, was idfah gesagt hat, und dies für die schnellste Geschwindigkeit, während Sie den Code kurz halten:

Dies ist schneller als ~Methode

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

http://jsperf.com/if-statements-test-techsin (Oberer Satz: Chrome, unterer Satz: Firefox)

Fazit :

Wenn Möglichkeiten sind wenige , und Sie wissen , dass bestimmte diejenigen häufiger auftreten, als Sie maximale Performance erhalten if ||, switch fall throughund if(obj[keyval]).

Wenn es viele Möglichkeiten gibt und eine davon die am häufigsten auftretende sein könnte, können Sie mit anderen Worten nicht wissen, welche am wahrscheinlichsten auftritt, als wenn Sie die meiste Leistung aus der Objektsuche ziehen if(obj[keyval])und regexob dies passt.

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

Ich werde aktualisieren, wenn etwas Neues auftaucht.

Wenn Sie mit Zeichenfolgen vergleichen und ein Muster vorhanden ist, sollten Sie reguläre Ausdrücke verwenden.

Andernfalls wird Ihr Code vermutlich nur verschleiert, wenn Sie versuchen, ihn zu verkürzen. Ziehen Sie in Betracht, die Linien einfach zu umbrechen, um sie hübsch zu machen.

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) { … }

Die Verwendung eines Objekts als assoziatives Array ist eine ziemlich häufige Sache, aber da JavaScript keine native Menge hat, können Sie Objekte auch als billige Mengen verwenden.

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

oder wenn die Gegenstände nicht so einheitlich sind, dann:

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

Hervorragende Antworten, aber Sie könnten den Code besser lesbar machen, indem Sie einen von ihnen in eine Funktion einschließen.

Dies ist eine komplexe if-Anweisung, wenn Sie (oder eine andere Person) den Code in einem Jahr lesen und den Abschnitt durchsuchen, um zu verstehen, was passiert. Eine Aussage mit dieser Ebene der Geschäftslogik führt dazu, dass Sie einige Sekunden lang stolpern, während Sie herausfinden, was Sie testen. Wenn Sie einen Code wie diesen haben, können Sie mit dem Scannen fortfahren.

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

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

Benennen Sie Ihre Funktion explizit, damit sofort ersichtlich ist, was Sie testen, und Ihr Code einfacher zu scannen und zu verstehen ist.

Sie können alle Antworten in ein Javascript-Set einfügen und dann einfach .contains()das Set aufrufen .

Sie müssen noch den gesamten Inhalt deklarieren, aber der Inline-Anruf wird kürzer.

Etwas wie:

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

Eine meiner Lieblingsmethoden, um dies zu erreichen, ist eine Bibliothek wie 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

Ein anderer oder ein anderer großartiger Weg, den ich gefunden habe, ist dieser ...

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

Wie Sie sehen, geht dies natürlich noch einen Schritt weiter und macht es einfach, der Logik zu folgen.

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

mit Operatoren wie ~ && || ((), ()) ~~ ist nur in Ordnung, wenn Ihr Code später kaputt geht. Sie werden nicht wissen, wo Sie anfangen sollen. Die Lesbarkeit ist also GROSS.

Wenn Sie müssen, können Sie es kürzer machen.

('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);

und wenn Sie invers machen wollen

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

Verwenden Sie einfach eine switchAnweisung anstelle einer ifAnweisung:

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 funktioniert auch schneller als das Vergleichen vieler Bedingungen innerhalb eines if

Bei sehr langen Listen von Zeichenfolgen würde diese Idee einige Zeichen sparen (ohne zu sagen, dass ich sie im wirklichen Leben empfehlen würde, aber sie sollte funktionieren).

Wählen Sie ein Zeichen aus, von dem Sie wissen, dass es in Ihrem test.type nicht vorkommt, verwenden Sie es als Trennzeichen, stecken Sie es alle in eine lange Zeichenfolge und suchen Sie Folgendes:

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

Wenn Ihre Zeichenfolgen weiter eingeschränkt sind, können Sie sogar die Trennzeichen weglassen ...

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

... aber Sie müssten in diesem Fall auf Fehlalarme achten (zB würde "einbetten" in dieser Version übereinstimmen)

Erstellen Sie zur besseren Lesbarkeit eine Funktion für den Test (ja, eine einzeilige Funktion):

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

dann nenne es:

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

Ich denke, es gibt zwei Ziele beim Schreiben dieser Art von if-Bedingung.

1. Kürze
2. Lesbarkeit

Als solches mag # 1 manchmal die schnellste sein, aber ich werde später # 2 für eine einfache Wartung nehmen. Je nach Szenario entscheide ich mich oft für eine Variation von Walters Antwort.

Zu Beginn habe ich eine global verfügbare Funktion als Teil meiner vorhandenen Bibliothek.

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

und wenn ich dann tatsächlich eine if-Bedingung ausführen möchte, die Ihrer ähnlich ist, würde ich ein Objekt mit einer Liste der gültigen Werte erstellen:

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

Es ist nicht so schnell wie eine switch / case-Anweisung und etwas ausführlicher als einige der anderen Beispiele, aber ich werde das Objekt häufig an anderer Stelle im Code wiederverwenden, was sehr praktisch sein kann.

Huckepack auf einem der oben hergestellten jsperf-Beispiele Ich habe diesen Test und eine Variation hinzugefügt, um die Geschwindigkeiten zu vergleichen. http://jsperf.com/if-statements-test-techsin/6 Das Interessanteste, was ich bemerkt habe, ist, dass bestimmte Testkombinationen in Firefox viel schneller sind als sogar Chrome.

Dies kann mit einer einfachen for-Schleife gelöst werden:

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

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

Wir verwenden den ersten Abschnitt der for-Schleife, um die Argumente zu initialisieren, mit denen Sie übereinstimmen möchten, den zweiten Abschnitt, um die Ausführung der for-Schleife zu stoppen, und den dritten Abschnitt, um zu bewirken, dass die Schleife schließlich beendet wird.