Hay cuatro operadores lógicos en JavaScript: || (O), && (Y), ! (NO), ?? (Coalescencia nula). Aquí cubrimos los primeros tres, el ?? El operador se encuentra en el siguiente artículo.
Aunque se denominan “lógicos”, se pueden aplicar a valores de cualquier tipo, no solo booleanos. Su resultado también puede ser de cualquier tipo.
Veamos los detalles.
El operador “OR” se representa con dos símbolos de líneas verticales:
resultado = a || b;
En la programación clásica, el OR lógico está destinado a manipular valores booleanos únicamente. Si alguno de sus argumentos es true , devuelve true ; en caso contrario, devuelve false .
En JavaScript, el operador es un poco más complicado y potente. Pero primero, veamos qué sucede con los valores booleanos.
Hay cuatro combinaciones lógicas posibles:
alerta (verdadero || verdadero); // verdadero alerta (falso || verdadero); // verdadero alerta (verdadero || falso); // verdadero alerta (falso || falso); // FALSO
Como podemos ver, el resultado siempre es true excepto en el caso en que ambos operandos sean false .
Si un operando no es booleano, se convierte en booleano para la evaluación.
Por ejemplo, el número 1 se trata como true , el número 0 como false :
if (1 || 0) { // funciona igual que if( true || false )
alerta ('¡verdad!');
} La mayoría de las veces, O || se utiliza en una declaración if para probar si alguna de las condiciones dadas es true .
Por ejemplo:
sea hora = 9;
if (hora < 10 || hora > 18) {
alert('La oficina está cerrada');
}Podemos pasar más condiciones:
dejar hora = 12;
let isWeekend = verdadero;
if (hora < 10 || hora > 18 || es fin de semana) {
alert('La oficina está cerrada'); // es fin de semana
}La lógica descrita anteriormente es algo clásica. Ahora, incluyamos las características "adicionales" de JavaScript.
El algoritmo extendido funciona de la siguiente manera.
Dados múltiples valores OR:
resultado = valor1 || valor2 || valor3;
El quirófano || El operador hace lo siguiente:
Evalúa operandos de izquierda a derecha.
Para cada operando, lo convierte a booleano. Si el resultado es true , se detiene y devuelve el valor original de ese operando.
Si se han evaluado todos los operandos (es decir, todos eran false ), devuelve el último operando.
Un valor se devuelve en su forma original, sin la conversión.
En otras palabras, una cadena de OR || Devuelve el primer valor verdadero o el último si no se encuentra ningún valor verdadero.
Por ejemplo:
alerta( 1 || 0 ); // 1 (1 es veraz) alerta (nulo || 1); // 1 (1 es el primer valor verdadero) alerta(nulo || 0 || 1 ); // 1 (el primer valor veraz) alerta (indefinido || nulo || 0); // 0 (todo falso, devuelve el último valor)
Esto conduce a un uso interesante en comparación con un “OR puro, clásico y solo booleano”.
Obtener el primer valor verdadero de una lista de variables o expresiones.
Por ejemplo, tenemos variables firstName , lastName y nickName , todas opcionales (es decir, pueden no estar definidas o tener valores falsos).
Usemos OR || para elegir el que tiene los datos y mostrarlos (o "Anonymous" si no hay nada configurado):
let nombre = ""; let apellido = ""; let nickName = "SuperCoder"; alert( nombre || apellido || apodo || "Anónimo"); // SuperCodificador
Si todas las variables fueran falsas, aparecería "Anonymous" .
Evaluación de cortocircuito.
Otra característica de OR || operador es la llamada evaluación de “cortocircuito”.
Significa que || procesa sus argumentos hasta que se alcanza el primer valor verdadero, y luego el valor se devuelve inmediatamente, sin siquiera tocar el otro argumento.
La importancia de esta característica se vuelve obvia si un operando no es solo un valor, sino una expresión con un efecto secundario, como una asignación de variable o una llamada a función.
En el siguiente ejemplo, solo se imprime el segundo mensaje:
verdadero || alerta("no impreso");
falso || alerta("impreso"); En la primera línea, el OR || El operador detiene la evaluación inmediatamente al ver true , por lo que no se ejecuta la alert .
A veces, las personas usan esta función para ejecutar comandos solo si la condición en la parte izquierda es falsa.
El operador AND se representa con dos símbolos && :
resultado = a && b;
En programación clásica, AND devuelve true si ambos operandos son verdaderos y false en caso contrario:
alerta (verdadero && verdadero); // verdadero alerta (falso && verdadero); // FALSO alerta (verdadero y falso); // FALSO alerta (falso && falso); // FALSO
Un ejemplo con if :
dejar hora = 12;
deja minuto = 30;
if (hora == 12 && minuto == 30) {
alerta('Son las 12:30');
}Al igual que con OR, se permite cualquier valor como operando de AND:
if (1 && 0) { // evaluado como verdadero && falso
alert("no funcionará porque el resultado es falso");
}Dados múltiples valores AND:
resultado = valor1 && valor2 && valor3;
El operador AND && hace lo siguiente:
Evalúa operandos de izquierda a derecha.
Para cada operando, lo convierte a booleano. Si el resultado es false , se detiene y devuelve el valor original de ese operando.
Si se han evaluado todos los operandos (es decir, todos eran verdaderos), devuelve el último operando.
En otras palabras, AND devuelve el primer valor falso o el último valor si no se encontró ninguno.
Las reglas anteriores son similares a OR. La diferencia es que AND devuelve el primer valor falso mientras que OR devuelve el primer valor verdadero .
Ejemplos:
// si el primer operando es verdadero, // Y devuelve el segundo operando: alerta (1 && 0); // 0 alerta (1 && 5); // 5 // si el primer operando es falso, // Y lo devuelve. El segundo operando se ignora. alerta (nulo && 5); // nulo alerta (0 && "pase lo que pase"); // 0
También podemos pasar varios valores seguidos. Vea cómo se devuelve el primer falso:
alerta (1 && 2 && nulo && 3); // nulo
Cuando todos los valores son verdaderos, se devuelve el último valor:
alerta (1 && 2 && 3); // 3, el último
La precedencia de AND && es mayor que OR ||
La precedencia del operador AND && es mayor que OR || .
Entonces el código a && b || c && d es esencialmente lo mismo que si las expresiones && estuvieran entre paréntesis: (a && b) || (c && d) .
No reemplace if con || o &&
A veces, la gente usa el operador AND && como una "forma más corta de escribir if ".
Por ejemplo:
sea x = 1;
(x > 0) && alerta('¡Mayor que cero!'); La acción en la parte derecha de && se ejecutaría solo si la evaluación la alcanza. Es decir, sólo si (x > 0) es verdadero.
Básicamente tenemos un análogo para:
sea x = 1;
if (x > 0) alerta ('¡Mayor que cero!'); Aunque la variante con && parece más corta, if más obvia y tiende a ser un poco más legible. Por lo tanto, recomendamos usar cada construcción para su propósito: usar if si queremos if y usar && si queremos AND.
¡El operador booleano NOT se representa con un signo de exclamación ! .
La sintaxis es bastante simple:
resultado = !valor;
El operador acepta un único argumento y hace lo siguiente:
Convierte el operando a tipo booleano: true/false .
Devuelve el valor inverso.
Por ejemplo:
alerta (! verdadero); // FALSO alerta (! 0); // verdadero
¡¡Un doble NO !! A veces se utiliza para convertir un valor a tipo booleano:
alerta(!!!"cadena no vacía" ); // verdadero alerta (!! nulo); // FALSO
Es decir, el primer NOT convierte el valor a booleano y devuelve el inverso, y el segundo NOT lo vuelve a invertir. Al final, tenemos una simple conversión de valor a booleano.
Hay una forma un poco más detallada de hacer lo mismo: una función Boolean incorporada:
alerta (booleano ("cadena no vacía")); // verdadero
alerta (booleano (nulo)); // FALSO La precedencia de ¡NO ! es el más alto de todos los operadores lógicos, por lo que siempre se ejecuta primero, antes de && o || .
importancia: 5
¿Qué generará el siguiente código?
alerta (nulo || 2 || indefinido);
La respuesta es 2 , ese es el primer valor verdadero.
alerta (nulo || 2 || indefinido);
importancia: 3
¿Qué generará el siguiente código?
alerta( alerta(1) || 2 || alerta(3) );
La respuesta: primero 1 , luego 2 .
alerta( alerta(1) || 2 || alerta(3) );
La llamada a alert no devuelve un valor. O, en otras palabras, devuelve undefined .
El primer O || evalúa su operando izquierdo alert(1) . Eso muestra el primer mensaje con 1 .
La alert devuelve undefined , por lo que OR continúa con el segundo operando en busca de un valor verdadero.
El segundo operando 2 es verdadero, por lo que la ejecución se detiene, se devuelve 2 y luego se muestra en la alerta externa.
No habrá 3 , porque la evaluación no llega a alert(3) .
importancia: 5
¿Qué va a mostrar este código?
alerta (1 && nulo && 2);
La respuesta: null , porque es el primer valor falso de la lista.
alerta (1 && nulo && 2);
importancia: 3
¿Qué mostrará este código?
alerta( alerta(1) && alerta(2) );
La respuesta: 1 y luego undefined .
alerta( alerta(1) && alerta(2) );
La llamada a alert devuelve undefined (solo muestra un mensaje, por lo que no hay un retorno significativo).
Debido a eso, && evalúa el operando izquierdo (genera 1 ) y se detiene inmediatamente, porque undefined es un valor falso. Y && busca un valor falso y lo devuelve, así está hecho.
importancia: 5
¿Cuál será el resultado?
alerta (nulo || 2 && 3 || 4);
La respuesta: 3 .
alerta (nulo || 2 && 3 || 4);
La precedencia de AND && es mayor que || , por lo que se ejecuta primero.
El resultado de 2 && 3 = 3 , por lo que la expresión queda:
nulo || 3 || 4
Ahora el resultado es el primer valor verdadero: 3 .
importancia: 3
Escribe una condición if para comprobar que age está entre 14 y 90 inclusive.
“Inclusivamente” significa que age puede llegar a los 14 o 90 .
si (edad >= 14 && edad <= 90)
importancia: 3
Escribe una condición if para comprobar que age NO está entre 14 y 90 inclusive.
Crea dos variantes: la primera usando NOT ! , el segundo – sin él.
La primera variante:
if (!(edad >= 14 && edad <= 90))
La segunda variante:
si (edad < 14 || edad > 90)
importancia: 5
¿Cuál de estas alert se va a ejecutar?
¿Cuáles serán los resultados de las expresiones dentro de if(...) ?
if (-1 || 0) alerta ('primero');
if (-1 && 0) alerta ('segundo');
if (nulo || -1 && 1) alerta ('tercero');
La respuesta: el primero y el tercero se ejecutarán.
Detalles:
// Corre.
// El resultado de -1 || 0 = -1, veraz
if (-1 || 0) alerta ('primero');
// No se ejecuta
// -1 && 0 = 0, falso
if (-1 && 0) alerta ('segundo');
// Ejecuta
// El operador && tiene mayor prioridad que ||
// entonces -1 && 1 se ejecuta primero, dándonos la cadena:
// nulo || -1 && 1 -> nulo || 1 -> 1
if (nulo || -1 && 1) alerta ('tercero');importancia: 3
Escriba el código que solicita iniciar sesión con prompt .
Si el visitante ingresa "Admin" , prompt una contraseña, si la entrada es una línea vacía o Esc , muestre "Cancelado", si es otra cadena, luego muestre "No te conozco".
La contraseña se verifica de la siguiente manera:
Si es igual a "TheMaster", entonces muestra "¡Bienvenido!",
Otra cadena: muestra "Contraseña incorrecta",
Para una cadena vacía o una entrada cancelada, muestra "Cancelado"
El esquema:
Utilice bloques if anidados. Tenga en cuenta la legibilidad general del código.
Sugerencia: pasar una entrada vacía a un mensaje devuelve una cadena vacía '' . Al presionar ESC durante un mensaje se devuelve null .
Ejecute la demostración
let nombre de usuario = Prompt("¿Quién está ahí?", '');
if (nombre de usuario === 'Administrador') {
dejar pasar = Prompt('¿Contraseña?', '');
if (pasar === 'ElMaestro') {
alerta('¡Bienvenido!');
} else if (pasar === '' || pasar === nulo) {
alerta('Cancelado');
} demás {
alerta('Contraseña incorrecta');
}
} else if (nombre de usuario === '' || nombre de usuario === nulo) {
alerta('Cancelado');
} demás {
alerta("No te conozco");
} Tenga en cuenta las sangrías verticales dentro de los bloques if . Técnicamente no son necesarios, pero hacen que el código sea más legible.