web-dev-qa-db-fra.com

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

Quelle est la manière la plus jolie de comparer une valeur à de multiples options?

Je sais qu'il y a une foule de façons de le faire, mais je cherche le meilleur.

je demande parce que j'espérais que c'était réalisable (ce n'est pas, bien évidemment quand on le regarde):

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

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 simplement.

if (foobar === foo ||
    foobar === bar ||
    foobar === baz ||
    foobar === pew) {
     //do something
}
86
david

Ce que j’utilise, c’est de mettre ces valeurs multiples 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;
    }
}
58
André Alçada Padez

Vous pouvez utiliser un commutateur:

switch (foobar) {
  case foo:
  case bar:
    // do something
}
18
Guffa

Juste pour le plaisir, puisque ce Q & R semble concerner la microanalyse syntaxique, une toute petite modification des suggestions d’André Alçada Padez:

(et bien sûr, compte pour le pré-IE9 shim/shiv/polyfill il est inclus))

if (~[foo, bar].indexOf(foobar)) {
    // pretty
}
16
lucideer

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 vous suggèrerais de créer un ensemble car cela crée un code de comparaison très propre et simple, et il est rapide au moment de 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 les versions antérieures à l'ES6, vous pouvez obtenir un ensemble de plusieurs polyfill. L'un est décrit dans ce autre réponse .

15
jfriend00

Pourquoi ne pas utiliser indexOf du tableau comme ci-dessous?

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

Simplement Javascript, pas de framework ni de librairie mais cela va pas fonctionne sur IE <9 =.

8
Ionică Bizău

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

Cependant, jQuery est utilisé de la même manière avec la fonction $. InArray () :

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

Cela pourrait être mieux, vous ne devriez donc pas vérifier si indexOf existe.

Faites attention à 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 lorsqu'il existe réellement. le tableau.

1
Joel Barba

(foobar == foo || foobar == bar) sinon, si vous comparez des expressions basées 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 proposée par André Alçada Padez. En fin de compte, ce que vous choisissez devra dépendre des détails de ce que vous faites.

1
JamieSee

La méthode de commutation (comme mentionné par Guffa) fonctionne très bien en effet. Toutefois, les paramètres d’avertissement par défaut de la plupart des linters vous alerteront de l’utilisation de l’effondrement. C’est l’une des principales raisons pour lesquelles j’utilise des commutateurs. J’ignore donc plutôt cet avertissement, mais vous devez savoir que l’utilisation de la fonctionnalité de substitution de la déclaration de commutateur peut être délicate. Dans des cas comme celui-ci, par contre, je vais y aller.

0
NinjaTool