Il existe quatre opérateurs logiques en JavaScript : || (OU), && (ET), ! (PAS), ?? (Coalescence nulle). Nous couvrons ici les trois premiers, le ?? L'opérateur est dans le prochain article.
Bien qu’elles soient qualifiées de « logiques », elles peuvent être appliquées à des valeurs de tout type, pas seulement booléennes. Leur résultat peut également être de tout type.
Voyons les détails.
L'opérateur « OU » est représenté par deux symboles de lignes verticales :
résultat = un || b;
En programmation classique, le OU logique est destiné à manipuler uniquement les valeurs booléennes. Si l'un de ses arguments est true , il renvoie true , sinon il renvoie false .
En JavaScript, l'opérateur est un peu plus délicat et plus puissant. Mais d'abord, voyons ce qui se passe avec les valeurs booléennes.
Il existe quatre combinaisons logiques possibles :
alerte( vrai || vrai ); // vrai alerte( faux || vrai ); // vrai alerte( vrai || faux ); // vrai alerte( faux || faux ); // FAUX
Comme nous pouvons le voir, le résultat est toujours true sauf dans le cas où les deux opérandes sont false .
Si un opérande n'est pas un booléen, il est converti en booléen pour l'évaluation.
Par exemple, le chiffre 1 est traité comme true , le chiffre 0 comme false :
if (1 || 0) { // fonctionne comme if( true || false )
alert( 'véridique !' );
} La plupart du temps, OU || est utilisé dans une instruction if pour tester si l'une des conditions données est true .
Par exemple:
soit heure = 9 ;
si (heure < 10 || heure > 18) {
alert( 'Le bureau est fermé.' );
}Nous pouvons passer plus de conditions :
soit heure = 12 ;
soit isWeekend = true ;
if (heure < 10 || heure > 18 || isWeekend) {
alert( 'Le bureau est fermé.' ); // c'est le week-end
}La logique décrite ci-dessus est quelque peu classique. Maintenant, introduisons les fonctionnalités « supplémentaires » de JavaScript.
L'algorithme étendu fonctionne comme suit.
Étant donné plusieurs valeurs OR :
résultat = valeur1 || valeur2 || valeur3 ;
Le OU || l'opérateur effectue les opérations suivantes :
Évalue les opérandes de gauche à droite.
Pour chaque opérande, le convertit en booléen. Si le résultat est true , s'arrête et renvoie la valeur d'origine de cet opérande.
Si tous les opérandes ont été évalués (c'est-à-dire qu'ils étaient tous false ), renvoie le dernier opérande.
Une valeur est renvoyée sous sa forme originale, sans conversion.
En d’autres termes, une chaîne de OR || renvoie la première valeur véridique ou la dernière si aucune valeur véridique n'est trouvée.
Par exemple:
alerte( 1 || 0 ); // 1 (1 est vrai) alerte( null || 1 ); // 1 (1 est la première valeur vraie) alerte( null || 0 || 1 ); // 1 (la première valeur vraie) alerte( non défini || null || 0 ); // 0 (tout faux, renvoie la dernière valeur)
Cela conduit à une utilisation intéressante par rapport à un « OU pur, classique, uniquement booléen ».
Obtenir la première valeur véridique à partir d’une liste de variables ou d’expressions.
Par exemple, nous avons des variables firstName , lastName et nickName , toutes facultatives (c'est-à-dire qu'elles peuvent être indéfinies ou avoir des valeurs fausses).
Utilisons OR || pour choisir celui qui possède les données et les afficher (ou "Anonymous" si rien n'est défini) :
laissez prénom = ""; laissez nom de famille = "" ; laissez pseudoName = "SuperCoder" ; alert( firstName || lastName || nickName || "Anonyme"); // SuperCodeur
Si toutes les variables étaient fausses, "Anonymous" apparaîtrait.
Évaluation des courts-circuits.
Une autre fonctionnalité de OR || L’opérateur est l’évaluation dite de « court-circuit ».
Cela signifie que || traite ses arguments jusqu'à ce que la première valeur vraie soit atteinte, puis la valeur est renvoyée immédiatement, sans même toucher à l'autre argument.
L'importance de cette fonctionnalité devient évidente si un opérande n'est pas simplement une valeur, mais une expression ayant un effet secondaire, comme une affectation de variable ou un appel de fonction.
Dans l'exemple ci-dessous, seul le deuxième message est imprimé :
vrai || alert("non imprimé");
faux || alert("imprimé"); Dans la première ligne, le OR || L'opérateur arrête l'évaluation immédiatement après avoir vu true , donc l' alert n'est pas exécutée.
Parfois, les gens utilisent cette fonctionnalité pour exécuter des commandes uniquement si la condition sur la partie gauche est fausse.
L'opérateur AND est représenté par deux esperluettes && :
résultat = a && b;
En programmation classique, AND renvoie true si les deux opérandes sont véridiques et false sinon :
alerte( vrai && vrai ); // vrai alerte( faux && vrai ); // FAUX alerte( vrai && faux ); // FAUX alerte( faux && faux ); // FAUX
Un exemple avec if :
soit heure = 12 ;
soit minute = 30 ;
si (heure == 12 && minute == 30) {
alert( 'Il est 12h30' );
}Tout comme avec OR, toute valeur est autorisée comme opérande de AND :
if (1 && 0) { // évalué comme vrai && faux
alert( "ne fonctionnera pas, car le résultat est faux" );
}Étant donné plusieurs valeurs AND :
résultat = valeur1 && valeur2 && valeur3;
L'opérateur AND && effectue les opérations suivantes :
Évalue les opérandes de gauche à droite.
Pour chaque opérande, le convertit en booléen. Si le résultat est false , s'arrête et renvoie la valeur d'origine de cet opérande.
Si tous les opérandes ont été évalués (c'est-à-dire qu'ils étaient tous véridiques), renvoie le dernier opérande.
En d’autres termes, AND renvoie la première valeur fausse ou la dernière valeur si aucune n’a été trouvée.
Les règles ci-dessus sont similaires à OR. La différence est que AND renvoie la première valeur fausse tandis que OR renvoie la première valeur véridique .
Exemples :
// si le premier opérande est véridique, // AND renvoie le deuxième opérande : alerte( 1 && 0 ); // 0 alerte( 1 && 5 ); // 5 // si le premier opérande est faux, // AND le renvoie. Le deuxième opérande est ignoré alerte( null && 5 ); // nul alert( 0 && "peu importe quoi" ); // 0
On peut également transmettre plusieurs valeurs à la suite. Voyez comment le premier faux est renvoyé :
alerte( 1 && 2 && null && 3 ); // nul
Lorsque toutes les valeurs sont vraies, la dernière valeur est renvoyée :
alerte( 1 && 2 && 3 ); // 3, le dernier
La priorité de AND && est supérieure à OR ||
La priorité de l'opérateur AND && est supérieure à OR || .
Donc le code a && b || c && d est essentiellement le même que si les expressions && étaient entre parenthèses : (a && b) || (c && d) .
Ne remplacez pas if par || ou &&
Parfois, les gens utilisent l'opérateur AND && comme « moyen plus court d'écrire if ».
Par exemple:
soit x = 1 ; (x > 0) && alert( 'Supérieur à zéro !' );
L'action dans la partie droite de && ne s'exécuterait que si l'évaluation l'atteint. Autrement dit, seulement si (x > 0) est vrai.
Nous avons donc essentiellement un analogue pour :
soit x = 1 ; if (x > 0) alert( 'Supérieur à zéro !' );
Bien que la variante avec && semble plus courte, if est plus évidente et a tendance à être un peu plus lisible. Nous recommandons donc d'utiliser chaque construction pour son objectif : utilisez if si nous voulons if et utilisez && si nous voulons AND.
L'opérateur booléen NOT est représenté par un signe d'exclamation ! .
La syntaxe est assez simple :
résultat = !valeur ;
L'opérateur accepte un seul argument et effectue les opérations suivantes :
Convertit l'opérande en type booléen : true/false .
Renvoie la valeur inverse.
Par exemple:
alerte( !true ); // FAUX alerte( !0 ); // vrai
Un double NON !! est parfois utilisé pour convertir une valeur en type booléen :
alert( !!"chaîne non vide" ); // vrai alerte( !!null ); // FAUX
Autrement dit, le premier NOT convertit la valeur en booléen et renvoie l'inverse, et le second NOT l'inverse à nouveau. En fin de compte, nous avons une simple conversion valeur-booléenne.
Il existe une manière un peu plus détaillée de faire la même chose : une fonction Boolean intégrée :
alert( Boolean("chaîne non vide") ); // vrai
alert( Boolean(null) ); // FAUX La priorité de NON ! est le plus élevé de tous les opérateurs logiques, il s'exécute donc toujours en premier, avant && ou || .
importance : 5
Quel est le code ci-dessous qui va sortir ?
alerte( null || 2 || non défini );
La réponse est 2 , c'est la première valeur vraie.
alerte( null || 2 || non défini );
importance : 3
Que produira le code ci-dessous ?
alerte( alerte(1) || 2 || alerte(3) );
La réponse : d'abord 1 , puis 2 .
alerte( alerte(1) || 2 || alerte(3) );
L'appel à alert ne renvoie pas de valeur. Ou, en d’autres termes, il renvoie undefined .
Le premier OU || évalue son opérande gauche alert(1) . Cela montre le premier message avec 1 .
L' alert renvoie undefined , donc OR passe au deuxième opérande à la recherche d'une valeur véridique.
Le deuxième opérande 2 est véridique, donc l'exécution est interrompue, 2 est renvoyé puis affiché par l'alerte externe.
Il n'y aura pas 3 , car l'évaluation n'atteint pas alert(3) .
importance : 5
Que va montrer ce code ?
alerte( 1 && null && 2 );
La réponse : null , car c'est la première valeur fausse de la liste.
alerte(1 && null && 2);
importance : 3
Que va montrer ce code ?
alerte( alerte(1) && alerte(2) );
La réponse : 1 , puis undefined .
alerte( alerte(1) && alerte(2) );
L'appel à alert renvoie undefined (il affiche simplement un message, donc il n'y a pas de retour significatif).
Pour cette raison, && évalue l'opérande de gauche (sortie 1 ) et s'arrête immédiatement, car undefined est une valeur fausse. Et && recherche une valeur fausse et la renvoie, c'est donc fait.
importance : 5
Quel sera le résultat ?
alerte( null || 2 && 3 || 4 );
La réponse : 3 .
alerte( null || 2 && 3 || 4 );
La priorité de AND && est supérieure à || , donc il s'exécute en premier.
Le résultat de 2 && 3 = 3 , donc l'expression devient :
nul || 3 || 4
Le résultat est maintenant la première valeur vraie : 3 .
importance : 3
Écrivez une condition if pour vérifier que age est compris entre 14 et 90 inclusivement.
«Inclusivement» signifie que age peut atteindre les limites 14 ou 90 .
si (âge >= 14 && âge <= 90)
importance : 3
Écrivez une condition if pour vérifier que age n'est PAS compris entre 14 et 90 inclusivement.
Créez deux variantes : la première en utilisant NOT ! , le deuxième – sans lui.
La première variante :
si (!(âge >= 14 && âge <= 90))
La deuxième variante :
si (âge < 14 || âge > 90)
importance : 5
Lesquelles de ces alert vont être exécutées ?
Quels seront les résultats des expressions à l’intérieur if(...) ?
if (-1 || 0) alert( 'premier' ); if (-1 && 0) alert( 'seconde' ); if (null || -1 && 1) alert( 'troisième' );
La réponse : le premier et le troisième s’exécuteront.
Détails:
// Fonctionne. // Le résultat de -1 || 0 = -1, vrai if (-1 || 0) alert( 'premier' ); // Ne fonctionne pas // -1 && 0 = 0, faux if (-1 && 0) alert( 'seconde' ); // Exécute // L'opérateur && a une priorité plus élevée que || // donc -1 && 1 s'exécute en premier, nous donnant la chaîne : // nul || -1 && 1 -> nul || 1 -> 1 if (null || -1 && 1) alert( 'troisième' );
importance : 3
Écrivez le code qui demande une connexion avec prompt .
Si le visiteur entre "Admin" , prompt -lui un mot de passe, si l'entrée est une ligne vide ou Esc - affichez "Annulé", s'il s'agit d'une autre chaîne - affichez "Je ne vous connais pas".
Le mot de passe est vérifié comme suit :
S'il est égal à « TheMaster », alors affichez « Bienvenue ! »,
Une autre chaîne – affiche « Mauvais mot de passe »,
Pour une chaîne vide ou une entrée annulée, affichez « Annulé »
Le schéma :
Veuillez utiliser des blocs if imbriqués. Attention à la lisibilité globale du code.
Astuce : passer une entrée vide à une invite renvoie une chaîne vide '' . Appuyer sur ESC pendant une invite renvoie null .
Exécutez la démo
let userName = prompt("Qui est là ?", '');
if (nom d'utilisateur === 'Admin') {
let pass = prompt('Mot de passe ?', '');
if (pass === 'LeMaître') {
alert( 'Bienvenue !' );
} sinon if (pass === '' || pass === null) {
alert( 'Annulé' );
} autre {
alert( 'Mauvais mot de passe' );
}
} else if (nom d'utilisateur === '' || nom d'utilisateur === null) {
alert( 'Annulé' );
} autre {
alert( "Je ne te connais pas" );
} Notez les retraits verticaux à l’intérieur des blocs if . Ils ne sont techniquement pas obligatoires, mais rendent le code plus lisible.