javascript - solucionar - ¿Qué significa el constructo x=x || ¿significa?

tr style html

Question

Estoy depurando algo de JavaScript, y no puedo explicar lo que esto || ¿hace?

function (title, msg) {
  var title = title || ''Error'';
  var msg   = msg || ''Error on Request'';
}

¿Puede alguien darme una pista, por qué este tipo está usando var title = title || ''ERROR'' var title = title || ''ERROR'' ? A veces lo veo sin una declaración de var también.

Answer 1

¿Qué es el operador de doble tubería ( || )?

El operador de doble tubería ( || ) es el operador OR lógico . En la mayoría de los idiomas funciona de la siguiente manera:

• Si el primer valor es false , verifica el segundo valor. Si es true , devuelve true y si es false , devuelve false .
• Si el primer valor es true , siempre devuelve true , sin importar cuál sea el segundo valor.

Así que, básicamente, funciona como esta función:

function or(x, y) {
  if (x) {
    return true;
  } else if (y) {
    return true;
  } else {
    return false;
  }
}

Si aún no entiendes, mira esta tabla:

      | true   false  
------+---------------
true  | true   true   
false | true   false  

En otras palabras, solo es falso cuando ambos valores son falsos.

¿Cómo es diferente en JavaScript?

JavaScript es un poco diferente, porque es un lenguaje poco tipado . En este caso, significa que puedes usar || operador con valores que no son booleanos. Aunque no tiene sentido, puede usar este operador con, por ejemplo, una función y un objeto:

(function(){}) || {}

¿Qué pasa allí?

Si los valores no son booleanos, JavaScript hace que la conversación implícita sea booleana . Significa que si el valor es falsey (por ejemplo, 0 , "" , null , undefined (ver también Todos los valores de Falsey en JavaScript )), se tratará como false ; de lo contrario, es tratado como true .

Entonces, el ejemplo anterior debería dar true , porque la función vacía es verdadera. Bueno, no es así. Devuelve la función vacía. Eso es porque JavaScript''s || el operador no funciona como escribí al principio. Funciona de la siguiente manera:

• Si el primer valor es falsey , devuelve el segundo valor .
• Si el primer valor es verdadero , devuelve el primer valor .

¿Sorprendido? En realidad, es "compatible" con lo tradicional || operador. Podría escribirse como la siguiente función:

function or(x, y) {
  if (x) {
    return x;
  } else {
    return y;
  }
}

Si pasa un valor de verdad como x , devuelve x , es decir, un valor de verdad. Entonces, si lo usa más adelante en la cláusula if :

(function(x, y) {
  var eitherXorY = x || y;
  if (eitherXorY) {
    console.log("Either x or y is truthy.");
  } else {
    console.log("Neither x nor y is truthy");
  }
}(true/*, undefined*/));

obtienes "Either x or y is truthy." .

Si x fuera falsey, o eitherXorY sería y . En este caso, obtendrías el mensaje "Either x or y is truthy." si y era verdad; de lo contrario, obtendrías "Neither x nor y is truthy" .

La pregunta real

Ahora, cuando sabes cómo || el operador funciona, probablemente pueda hacer usted mismo lo que hace x = x || y x = x || y significa. Si x es verdad, x se asigna a x , entonces en realidad no pasa nada; de lo contrario, y se asigna a x . Se usa comúnmente para definir parámetros predeterminados en funciones. Sin embargo, a menudo se considera una mala práctica de programación , ya que le impide pasar un valor de falsey (que no es necesariamente undefined o null ) como parámetro. Considera el siguiente ejemplo:

function badFunction(/* boolean */flagA) {
  flagA = flagA || true;
  console.log("flagA is set to " + (flagA ? "true" : "false"));
}

Parece válido a primera vista. Sin embargo, ¿qué pasaría si pasara false como parámetro flagA (ya que es booleano, es decir, puede ser true o false )? Sería true . En este ejemplo, no hay forma de establecer flagA en false .

Sería una mejor idea verificar explícitamente si flagA está undefined , así:

function goodFunction(/* boolean */flagA) {
  flagA = typeof flagA !== "undefined" ? flagA : true;
  console.log("flagA is set to " + (flagA ? "true" : "false"));
}

Aunque es más largo, siempre funciona y es más fácil de entender.

También puede usar la sintaxis de ES6 para los parámetros de función predeterminados , pero tenga en cuenta que no funciona en navegadores más antiguos (como IE). Si desea admitir estos navegadores, debe transponer su código con Babel .

Ver también Operadores lógicos en MDN .

Answer 2

Básicamente, verifica si el valor antes de || evalúa a verdadero, si es así, toma este valor, si no, toma el valor después de ||.

Valores por los cuales tomará el valor después de || (hasta donde recuerdo):

• indefinido
• falso
• 0
• '''' (Cadena nula o nula)

Answer 3

Cita: "¿Qué significa la construcción x = x || y?"

Asignando un valor predeterminado.

Esto significa proporcionar un valor predeterminado de y a x , en caso de que x aún esté esperando su valor pero aún no lo haya recibido o se haya omitido deliberadamente para volver a un valor predeterminado.

Answer 4

Explicando esto un poco más ...

El || el operador es el operador lógico or operador. El resultado es verdadero si la primera parte es verdadera y es verdadera si la segunda parte es verdadera y si ambas partes son verdaderas. Para mayor claridad, aquí está en una tabla:

 X | Y | X || Y 
---+---+--------
 F | F |   F    
---+---+--------
 F | T |   T    
---+---+--------
 T | F |   T    
---+---+--------
 T | T |   T    
---+---+--------

Ahora nota algo aquí? Si X es verdadero, el resultado siempre es verdadero. Entonces, si sabemos que X es verdadero, no tenemos que verificar Y en absoluto. Muchos lenguajes implementan evaluadores de "corto circuito" para lógica or (y lógica) and vienen de la otra dirección. Ellos verifican el primer elemento y, si eso es cierto, no se molestan en verificar el segundo. El resultado (en términos lógicos) es el mismo, pero en términos de ejecución existe una gran diferencia si el segundo elemento es costoso de calcular.

Entonces, ¿qué tiene esto que ver con tu ejemplo?

var title   = title || ''Error'';

Veamos eso. El elemento del title se pasa a su función. En JavaScript, si no pasa un parámetro, se establece de manera predeterminada en un valor nulo. También en JavaScript, si su variable es un valor nulo, los operadores lógicos lo consideran falso. Entonces, si se llama a esta función con un título dado, es un valor no falso y, por lo tanto, asignado a la variable local. Sin embargo, si no se le da un valor, es un valor nulo y, por lo tanto, falso. El operador lógico or operador evalúa la segunda expresión y en su lugar devuelve ''Error''. Entonces ahora la variable local recibe el valor ''Error''.

Esto funciona debido a la implementación de expresiones lógicas en JavaScript. No devuelve un valor booleano adecuado ( true o false ), sino que devuelve el valor que se le dio bajo algunas reglas en cuanto a lo que se considera equivalente a true y lo que se considera equivalente a false . Busque su referencia de JavaScript para saber qué es lo que JavaScript considera verdadero o falso en contextos booleanos.

Answer 5

La tubería doble significa "O" lógico. Este no es realmente el caso cuando el "parámetro no establecido", ya que estrictamente en el javascript si tiene un código como este:

function foo(par) {
}

Luego llama

foo()
foo("")
foo(null)
foo(undefined)
foo(0)

no son equivalentes

Double pipe (||) arrojará el primer argumento a boolean y si boolean resultante es verdadero: realice la asignación; de lo contrario, asignará la parte correcta.

Esto importa si revisas el parámetro no establecido.

Digamos que tenemos una función setSalary que tiene un parámetro opcional. Si el usuario no proporciona el parámetro, se debe usar el valor predeterminado de 10.

si haces el cheque así:

function setSalary(dollars) {
    salary = dollars || 10
}

Esto dará un resultado inesperado en llamadas como

setSalary(0) 

Seguirá configurando los 10 siguiendo el flujo descrito anteriormente.

Answer 6

Para agregar alguna explicación a todos los que he dicho antes, debería darles algunos ejemplos para comprender los conceptos lógicos.

var name = false || "Mohsen"; # name equals to Mohsen
var family = true || "Alizadeh" # family equals to true

Significa que si el lado izquierdo se evalúa como una declaración verdadera, se terminará y el lado izquierdo se devolverá y se asignará a la variable. en otros casos, el lado derecho será devuelto y asignado.

Y el operador tiene la estructura opuesta como abajo.

var name = false && "Mohsen" # name equals to false
var family = true && "Alizadeh" # family equals to Alizadeh

Answer 7

Si bien la respuesta de Cletus es correcta, creo que se deben agregar más detalles con respecto a "evalúa a falso" en JavaScript.

var title = title || ''Error'';
var msg   = msg || ''Error on Request'';

No es solo verificar si se ha proporcionado el título / mensaje, sino también si alguno de ellos es falsy . es decir, uno de los siguientes:

• falso.
• 0 (cero)
• "" (cuerda vacía)
• nulo.
• indefinido
• NaN (un valor de Número especial que significa ¡No es un Número!)

Entonces en la linea

var title = title || ''Error'';

Si title es truey (es decir, no falsy, tan title = "titleMessage", etc.), el operador booleano OR (||) ha encontrado un valor "verdadero", lo que significa que se evalúa como verdadero, por lo que cortocircuita y devuelve el verdadero valor (título).

Si el título es falso (es decir, uno de la lista anterior), el operador Booleano O (||) ha encontrado un valor "falso", y ahora necesita evaluar la otra parte del operador, "Error", que evalúa como verdadero , y por lo tanto, es devuelto.

También parecería (después de una experimentación rápida con una consola Firebug) que ambos lados del operador son falsos, devuelve el segundo operador ''falsy''.

es decir

return ("" || undefined)

Devuelve indefinido, esto es probablemente para permitirle usar el comportamiento que se le preguntó en esta pregunta cuando intenta poner título / mensaje predeterminado en "". es decir, después de ejecutar

var foo = undefined
foo = foo || ""

foo se establecerá en ""

Answer 8

Si el título no está configurado, use ''ERROR'' como valor predeterminado.

Más genérico:

var foobar = foo || default;

Lee: establece foobar para foo o default . Incluso podría encadenar esto muchas veces:

var foobar = foo || bar || something || 42;

Answer 9

Significa que el argumento del title es opcional. Entonces, si llama al método sin argumentos, usará un valor predeterminado de "Error" .

Es taquigrafía para escribir:

if (!title) {
  title = "Error";
}

Este tipo de truco de taquigrafía con expresiones booleanas también es común en Perl. Con la expresión:

a OR b

se evalúa como true si a o b es true . Entonces, si a es cierto, no es necesario que compruebe b en absoluto. Esto se llama evaluación booleana de cortocircuito así que:

var title = title || "Error";

básicamente verifica si el title evalúa como false . Si lo hace, "devuelve" "Error" , de lo contrario, devuelve el title .

Answer 10

Y debo agregar una cosa más: este trozo de taquigrafía es una abominación. Hace un mal uso de una optimización accidental del intérprete (sin molestarse con la segunda operación, si la primera es cierta) para controlar una tarea. Ese uso no tiene nada que ver con el propósito del operador. No creo que alguna vez deba ser usado.

Prefiero el operador ternario para la inicialización, por ejemplo,

var title = title?title:''Error'';

Esto usa una operación condicional de una línea para su propósito correcto. Todavía juega juegos desagradables con la verdad, pero eso es Javascript para ti.

Answer 11

operador de doble tubería

¿este ejemplo es útil?

var section = document.getElementById(''special'');
if(!section){
     section = document.getElementById(''main'');
}

puede también ser

var section = document.getElementById(''special'') || document.getElementById(''main'');