Javascript: la meilleure façon de comparer une valeur à plusieurs valeurs [dupliquer]

Cette question a déjà une réponse ici:

Quelle est la façon la plus jolie de comparer une valeur avec des options multiples?

Je sais qu'il y a beaucoup de façons de le faire, mais je cherche le plus soigné.

Je demande parce que j'avais espéré que c'était réalisable (ce n'est pas, tout à fait évidemment quand vous le regardez):

if (foobar == (foo||bar) ) {
     //do something
}
39
demandé sur thelastshadow 2012-02-03 03:09:31

9 réponses

N'essayez pas d'être trop sournois, surtout quand cela affecte inutilement les performances. Si vous avez vraiment tout un tas de comparaisons à faire, formatez-le bien.

if (foobar === foo ||
    foobar === bar ||
    foobar === baz ||
    foobar === pew) {
     //do something
}
64
répondu david 2016-03-22 01:56:40

Ce que j'utilise pour faire, est de mettre ces valeurs dans un tableau comme

var options = [foo, bar];

Et ensuite, utilisez indexOf ()

if(options.indexOf(foobar) > -1){
   //do something
}

Pour la beauté:

if([foo, bar].indexOf(foobar) +1){
   //you can't get any more pretty than this :)
}

Et pour les anciens navigateurs:
( https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/IndexOf )

if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function (searchElement /*, fromIndex */ ) {
        "use strict";
        if (this == null) {
            throw new TypeError();
        }
        var t = Object(this);
        var len = t.length >>> 0;
        if (len === 0) {
            return -1;
        }
        var n = 0;
        if (arguments.length > 0) {
            n = Number(arguments[1]);
            if (n != n) { // shortcut for verifying if it's NaN
                n = 0;
            } else if (n != 0 && n != Infinity && n != -Infinity) {
                n = (n > 0 || -1) * Math.floor(Math.abs(n));
            }
        }
        if (n >= len) {
            return -1;
        }
        var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
        for (; k < len; k++) {
            if (k in t && t[k] === searchElement) {
                return k;
            }
        }
        return -1;
    }
}
50
répondu André Alçada Padez 2012-02-02 23:18:35

Juste pour les coups de pied, puisque ce Q & A semble être sur la microanalyse syntaxique, une toute petite modification de la suggestion(s) D'André Alçada Padez:

(et bien sûr en tenant compte de la pré-IE9 shim / shiv / polyfill il est inclus)

if (~[foo, bar].indexOf(foobar)) {
    // pretty
}
16
répondu lucideer 2013-02-13 10:27:44

Vous pouvez utiliser un commutateur:

switch (foobar) {
  case foo:
  case bar:
    // do something
}
13
répondu Guffa 2012-02-02 23:12:31

Puisque personne n'a encore ajouté la solution évidente qui fonctionne bien pour deux comparaisons, je vais l'offrir:

if (foobar === foo || foobar === bar) {
     //do something
}

Et, si vous avez beaucoup de valeurs (peut-être des centaines ou des milliers), alors je suggère de faire un ensemble car cela rend le code de comparaison très propre et simple et c'est rapide à l'exécution:

// pre-construct the Set
var tSet = new Set(["foo", "bar", "test1", "test2", "test3", ...]);

// test the Set at runtime
if (tSet.has(foobar)) {
    // do something
}

Pour pre-ES6, vous pouvez obtenir un ensemble polyfill dont il y en a beaucoup. L'un est décrit dans cette autre réponse.

13
répondu jfriend00 2018-06-30 00:48:34

Pourquoi ne pas utiliser {[1] } du tableau comme ci-dessous?

if ([foo, bar].indexOf(foobar) !== -1) {
    // do something
}

Tout simplement Javascript, pas de frameworks ou de bibliothèques mais ça va Pas travailler sur IE .

7
répondu Ionică Bizău 2013-06-07 08:54:27

(foobar == foo || foobar == bar) sinon, si vous comparez des expressions basées uniquement sur un seul entier, une valeur énumérée ou un objet String, vous pouvez utiliser switch. Voir L'Instruction switch. Vous pouvez également utiliser la méthode suggérée par André Alçada Padez. En fin de Compte, ce que vous sélectionnez devra dépendre des détails de ce que vous faites.

1
répondu JamieSee 2012-02-02 23:32:01

J'aime la jolie forme de test indexOf avec un tableau, mais sachez que cela ne fonctionne pas dans tous les navigateurs (parce que Array.prototype.indexOf n'est pas présent dans les anciens IExplorers ).

Cependant, il existe une manière similaire en utilisant jQuery avec le $.inArray() Fonction:

if ($.inArray(field, ['value1', 'value2', 'value3']) > -1) {
    alert('value ' + field + ' is into the list'); 
}

Cela pourrait être mieux, donc vous ne devriez pas tester si indexOf existe.

Soyez prudent avec la comparaison (n'utilisez pas = = true / false), car $.inArray renvoie l'index de la position correspondante où la valeur a été trouvée, et si l'index est 0, Il serait faux quand il existe vraiment dans le tableau.

1
répondu Joel Barba 2017-05-23 12:26:09

La méthode switch (comme mentionné par Guffa) fonctionne très bien en effet. Cependant, les paramètres d'avertissement par défaut dans la plupart des linters vous avertiront de l'utilisation de fall-through. C'est l'une des principales raisons pour lesquelles j'utilise des commutateurs, donc j'ignore à peu près cet avertissement, mais vous devez être conscient que l'utilisation de la fonction fall-through De l'instruction switch peut être délicate. Dans des cas comme celui - ci, cependant, j'irais pour cela.

0
répondu NinjaTool 2014-02-25 12:06:13