operator - Ejemplo de operador ternario de JavaScript con funciones

operador ternario python

Question

Estoy usando jQuery 1.7.1

Estoy comenzando a usar el operador ternario de JavaScript para reemplazar las declaraciones if / else simples. Lo he hecho con éxito en varios lugares. Me sorprendió cuando hice funcionar otra cosa con éxito cuando pensé que no lo haría, pero lo intenté de todos modos.

Aquí está la declaración original:

function updateItem() {
    $this = $(this);
    var IsChecked = $this.hasClass("IsChecked");
    if (IsChecked == true){
        removeItem($this);
    } else {
        addItem($this);
    }
}

Aquí está la misma función usando el operador ternario:

function updateItem() {
    $this = $(this);
    var IsChecked = $this.hasClass("IsChecked");
    (IsChecked == true) ? removeItem($this) : addItem($this);
}

Me sorprendió porque todos los ejemplos que vi que se usaban eran simplemente establecer variables como esta:

x = (1 < 2) ? true : false;

Mi pregunta es si este es un uso "normal" y ¿funcionará en la mayoría de las versiones de JavaScript? ¿Dónde va a fallar? ¿Hay otros usos menos obvios para esto?

ACTUALIZACIÓN - ¡Gracias por el consejo del "mundo real"!

Estoy usando esto como mi función:

function updateItem() {
    $this = $(this);
    $this.hasClass("IsChecked") ? removeItem($this) : addItem($this);
}

Answer 1

El estilo ternario generalmente se usa para ahorrar espacio. Semánticamente, son idénticos. Prefiero ir con la sintaxis completa if / then / else porque no me gusta sacrificar la legibilidad. Soy de la vieja escuela y prefiero mis llaves.

El formato completo if / then / else se usa para casi todo. Es especialmente popular si ingresas en bloques más grandes de código en cada rama, tienes un árbol if / else muti-ramificado, o múltiples else / ifs en una cadena larga.

El operador ternario es común cuando asigna un valor a una variable basado en una condición simple o está tomando decisiones múltiples con resultados muy breves. El ejemplo que cites en realidad no tiene sentido, porque la expresión se evaluará a uno de los dos valores sin ninguna lógica adicional.

Buenas ideas:

this > that ? alert(this) : alert(that);  //nice and short, little loss of meaning

if(expression)  //longer blocks but organized and can be grasped by humans
{
    //35 lines of code here
}
else if (something_else)
{
    //40 more lines here
}
else if (another_one)  /etc, etc
{
    ...

Menos bueno:

this > that ? testFucntion() ? thirdFunction() ? imlost() : whathappuh() : lostinsyntax() : thisisprobablybrokennow() ? //I''m lost in my own (awful) example by now.
//Not complete... or for average humans to read.

if(this != that)  //Ternary would be done by now
{
    x = this;
}
else
}
    x = this + 2;
}

Una regla general muy básica : ¿puedes entender todo tan bien o mejor en una sola línea? Ternary está bien. De lo contrario, amplíelo.

Answer 2

Heh, hay algunos usos muy interesantes de la sintaxis ternaria en tu pregunta; Me gusta el último, el mejor ...

x = (1 < 2) ? true : false;

El uso de ternario aquí es totalmente inaccesible, simplemente puedes escribir

x = (1 < 2);

Del mismo modo, el elemento de condición de una declaración ternaria siempre se evalúa como un valor booleano, por lo tanto puede expresar:

(IsChecked == true) ? removeItem($this) : addItem($this);

Simplemente como:

(IsChecked) ? removeItem($this) : addItem($this);

De hecho, también eliminaría el IsChecked temporal que te deja con:

($this.hasClass("IsChecked")) ? removeItem($this) : addItem($this);

En cuanto a si esta es una sintaxis aceptable, ¡seguro que sí! Es una gran manera de reducir cuatro líneas de código en una sin afectar la legibilidad. El único consejo que le daré es evitar anidar múltiples declaraciones ternarias en la misma línea (¡de esa manera se encuentra la locura!)

Answer 3

No hay nada particularmente complicado en el ejemplo que publicaste.

En un operador ternario, se evalúa el primer argumento (el condicional) y si el resultado es true , el segundo argumento se evalúa y se devuelve; de ​​lo contrario, el tercero se evalúa y se devuelve. Cada uno de esos argumentos puede ser cualquier bloque de código válido, incluidas las llamadas a funciones.

Piénsalo de esta manera:

var x = (1 < 2) ? true : false;

También podría escribirse como:

var x = (1 < 2) ? getTrueValue() : getFalseValue();

Esto es perfectamente válido, y esas funciones pueden contener cualquier código arbitrario, ya sea que esté relacionado con devolver un valor o no. Además, los resultados de la operación ternaria no tienen que asignarse a nada, al igual que los resultados de la función no tienen que asignarse a nada:

(1 < 2) ? getTrueValue() : getFalseValue();

Ahora simplemente reemplaza aquellos con funciones arbitrarias, y te queda algo como tu ejemplo:

(1 < 2) ? removeItem($this) : addItem($this);

Ahora su último ejemplo realmente no necesita un ternario en absoluto, ya que se puede escribir así:

x = (1 < 2);  // x will be set to "true"

Answer 4

Sé que la pregunta ya está respondida.

Pero déjame agregar un punto aquí. Este no es solo un caso de verdadero o falso. Vea abajo:

var val="Do";

Var c= (val == "Do" || val == "Done")
          ? 7
          : 0

Aquí si val es Do o Done, entonces c será 7, de lo contrario será cero. En este caso, c será 7.

Esta es en realidad otra perspectiva de este operador.

Answer 5

Si va a anidar operadores ternarios, creo que querría hacer algo como esto:

   var audience = (countrycode == ''eu'') ? ''audienceEU'' :
                  (countrycode == ''jp'') ? ''audienceJP'' :
                  (countrycode == ''cn'') ? ''audienceCN'' :
                  ''audienceUS'';

Es mucho más eficiente escribir / leer que:

var audience = ''audienceUS'';
if countrycode == ''eu'' {
   audience = ''audienceEU'';
} else if countrycode == ''jp'' {
   audience = ''audienceJP'';
} else if countrycode == ''cn'' {
   audience = ''audienceCN'';
}

Al igual que con toda buena programación, el espacio en blanco hace que todo sea agradable para las personas que tienen que leer su código una vez que haya terminado con el proyecto.

Answer 6

También me gustaría agregar algo de mí.

Otra sintaxis posible para llamar funciones con el operador ternario sería:

(condition ? fn1 : fn2)();

Puede ser útil si tiene que pasar la misma lista de parámetros a ambas funciones, por lo que debe escribirlas solo una vez.

(condition ? fn1 : fn2)(arg1, arg2, arg3, arg4, arg5);

Puede usar el operador ternario incluso con nombres de funciones de miembros, que personalmente me gusta mucho para ahorrar espacio:

$(''.some-element'')[showThisElement ? ''addClass'' : ''removeClass''](''visible'');

o

$(''.some-element'')[(showThisElement ? ''add'' : ''remove'') + ''Class''](''visible'');

Otro ejemplo:

var addToEnd = true; //or false
var list = [1,2,3,4];
list[addToEnd ? ''push'' : ''unshift''](5);