Je débogue du JavaScript et je ne peux pas expliquer ce que cela ||fait?

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

Quelqu'un peut-il me donner un indice, pourquoi ce type utilise- var title = title || 'ERROR't-il? Je le vois parfois aussi sans vardéclaration.

Cela signifie que l' titleargument est facultatif. Donc, si vous appelez la méthode sans argument, elle utilisera une valeur par défaut de "Error".

C'est un raccourci pour écrire:

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

Ce genre de raccourci avec des expressions booléennes est également courant en Perl. Avec l'expression:

a OR b

il évalue truesi l'un aou l' autre l' best true. Donc, si ac'est vrai, vous n'avez pas besoin de vérifier bdu tout. C'est ce qu'on appelle l'évaluation booléenne en court-circuit:

var title = title || "Error";

vérifie essentiellement si titleévalue à false. Si c'est le cas, il "revient" "Error", sinon il revient title.

Qu'est-ce que l'opérateur double tuyau ( ||)?

L'opérateur double pipe ( ||) est l' opérateur logiqueOR . Dans la plupart des langues, cela fonctionne de la manière suivante:

• Si la première valeur est false, il vérifie la deuxième valeur. S'il l'est true, il revient trueet s'il l'est false, il revient false.
• Si la première valeur est true, elle revient toujours true, quelle que soit la seconde valeur.

Donc, fondamentalement, cela fonctionne comme cette fonction:

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

Si vous ne comprenez toujours pas, regardez ce tableau:

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

En d'autres termes, ce n'est faux que lorsque les deux valeurs sont fausses.

En quoi est-ce différent en JavaScript?

JavaScript est un peu différent, car c'est un langage peu typé . Dans ce cas, cela signifie que vous pouvez utiliser l' ||opérateur avec des valeurs qui ne sont pas booléennes. Bien que cela n'ait aucun sens, vous pouvez utiliser cet opérateur avec par exemple une fonction et un objet:

(function(){}) || {}

Que se passe-t-il là?

Si les valeurs ne sont pas booléennes, JavaScript effectue une conversion implicite en booléen . Cela signifie que si la valeur est Falsey (par exemple 0, "", null, undefined(voir aussi toutes les valeurs de Falsey en JavaScript )), il sera considéré comme false; sinon, il est traité comme true.

Donc l'exemple ci-dessus devrait donner true, car la fonction vide est véridique. Et bien non. Il renvoie la fonction vide. C'est parce que l' ||opérateur de JavaScript ne fonctionne pas comme je l'ai écrit au début. Cela fonctionne de la manière suivante:

• Si la première valeur est falsey , elle renvoie la deuxième valeur .
• Si la première valeur est véridique , elle renvoie la première valeur .

Surpris? En fait, il est "compatible" avec l' ||opérateur traditionnel . Il pourrait être écrit comme la fonction suivante:

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

Si vous passez une valeur véridique as x, cela renvoie x, c'est-à-dire une valeur véridique. Donc, si vous l'utilisez plus tard dans la ifclause:

(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*/));

vous obtenez "Either x or y is truthy.".

Si xc'était Falsey, ce eitherXorYserait y. Dans ce cas, vous obtiendrez le "Either x or y is truthy."si yétait vrai; sinon vous auriez "Neither x nor y is truthy".

La vraie question

Maintenant, quand vous savez comment ||fonctionne l'opérateur, vous pouvez probablement comprendre par vous-même ce que cela x = x || ysignifie. Si xest véridique, xest affecté à x, donc en réalité rien ne se passe; sinon yest affecté à x. Il est couramment utilisé pour définir les paramètres par défaut dans les fonctions. Cependant, il est souvent considéré comme une mauvaise pratique de programmation , car il vous empêche de passer une valeur de falsey (qui n'est pas nécessairement undefinedou null) comme paramètre. Prenons l'exemple suivant:

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

Il semble valide à première vue. Cependant, que se passerait-il si vous passiez falseen flagAparamètre (car c'est booléen, c'est-à-dire peut être trueou false)? Cela deviendrait true. Dans cet exemple, il n'y a aucun moyen de définir flagAsur false.

Ce serait une meilleure idée de vérifier si explicitement flagAest undefined, comme ça:

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

Bien qu'il soit plus long, il fonctionne toujours et il est plus facile à comprendre.

Vous pouvez également utiliser la syntaxe ES6 pour les paramètres de fonction par défaut , mais notez qu'elle ne fonctionne pas dans les navigateurs plus anciens (comme IE). Si vous souhaitez prendre en charge ces navigateurs, vous devez transpiler votre code avec Babel .

Voir aussi Opérateurs logiques sur MDN .

Si le titre n'est pas défini, utilisez 'ERREUR' comme valeur par défaut.

Plus générique:

var foobar = foo || default;

Lit: Réglez foobar sur fooou default. Vous pouvez même enchaîner cela plusieurs fois:

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

Expliquant cela un peu plus ...

L' ||opérateur est l' oropérateur logique . Le résultat est vrai si la première partie est vraie et il est vrai si la deuxième partie est vraie et il est vrai si les deux parties sont vraies. Pour plus de clarté, le voici dans un tableau:

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

Maintenant, remarquez quelque chose ici? Si Xest vrai, le résultat est toujours vrai. Donc, si nous savons que Xc'est vrai, nous n'avons pas du tout à vérifier Y. De nombreux langages mettent ainsi en œuvre des évaluateurs de "court-circuit" pour les logiques or(et logiques) andvenant de l'autre sens. Ils vérifient le premier élément et si c'est vrai, ils ne prennent pas la peine de vérifier le second. Le résultat (en termes logiques) est le même, mais en termes d'exécution, il y a potentiellement une énorme différence si le deuxième élément est coûteux à calculer.

Alors qu'est-ce que cela a à voir avec votre exemple?

var title   = title || 'Error';

Regardons ça. L' titleélément est transmis à votre fonction. En JavaScript, si vous ne transmettez pas de paramètre, il prend par défaut une valeur nulle. Également en JavaScript, si votre variable est une valeur nulle, elle est considérée comme fausse par les opérateurs logiques. Donc, si cette fonction est appelée avec un titre donné, il s'agit d'une valeur non fausse et donc affectée à la variable locale. Si toutefois on ne lui donne pas de valeur, c'est une valeur nulle et donc fausse. L' oropérateur logique évalue ensuite la deuxième expression et renvoie à la place «Erreur». Alors maintenant, la variable locale reçoit la valeur «Erreur».

Cela fonctionne en raison de l'implémentation d'expressions logiques en JavaScript. Il ne retourne pas une valeur booléenne correcte ( trueou false) mais renvoie à la place la valeur qui lui a été donnée par certaines règles quant à ce qui est considéré comme équivalent trueet à ce qui est considéré comme équivalent false. Recherchez votre référence JavaScript pour savoir ce que JavaScript considère comme vrai ou faux dans des contextes booléens.

Le double tuyau signifie "OU" logique. Ce n'est pas vraiment le cas lorsque le "paramètre n'est pas défini", car strictement dans le javascript si vous avez du code comme celui-ci:

function foo(par) {
}

Appelle ensuite

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

ne sont pas équivalents.

Double pipe (||) transtypera le premier argument en booléen et si le booléen résultant est vrai - faites l'affectation sinon il assignera la bonne partie.

Cela est important si vous vérifiez le paramètre non défini.

Disons que nous avons une fonction setSalary qui a un paramètre facultatif. Si l'utilisateur ne fournit pas le paramètre, la valeur par défaut de 10 doit être utilisée.

si vous faites la vérification comme ceci:

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

Cela donnera un résultat inattendu sur appel comme

setSalary(0) 

Il fixera toujours le 10 en suivant le flux décrit ci-dessus.

Fondamentalement, il vérifie si la valeur avant le || évalue à true, si oui, il prend cette valeur, sinon, il prend la valeur après le ||.

Valeurs pour lesquelles il prendra la valeur après le || (Autant que je m'en souvienne):

• indéfini
• faux
• 0
• '' (Chaîne nulle ou nulle)

Bien que la réponse de Cletus soit correcte, je pense que plus de détails devraient être ajoutés en ce qui concerne "évalue à faux" dans JavaScript.

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

Ce n'est pas seulement de vérifier si le titre / msg a été fourni, mais aussi si l'un ou l'autre est faux . c'est-à-dire l'un des suivants:

• faux.
• 0 (zéro)
• "" (chaîne vide)
• nul.
• indéfini.
• NaN (une valeur numérique spéciale signifiant Pas un nombre!)

Donc dans la ligne

var title = title || 'Error';

Si le titre est véridique (c'est-à-dire pas faux, donc title = "titleMessage" etc.), alors l'opérateur booléen OR (||) a trouvé une valeur "vraie", ce qui signifie qu'il est évalué comme vrai, donc il court-circuite et renvoie la vraie valeur (titre).

Si le titre est faux (c'est-à-dire l'une des listes ci-dessus), alors l'opérateur booléen OU (||) a trouvé une valeur "fausse" et doit maintenant évaluer l'autre partie de l'opérateur, "Erreur", qui est évaluée comme vraie , et est donc retourné.

Il semblerait également (après une expérimentation rapide de la console Firebug) que les deux côtés de l'opérateur évaluent à faux, il renvoie le deuxième opérateur «falsy».

c'est à dire

return ("" || undefined)

renvoie indéfini, c'est probablement pour vous permettre d'utiliser le comportement demandé dans cette question lorsque vous essayez de définir le titre / message par défaut sur "". c'est à dire après avoir couru

var foo = undefined
foo = foo || ""

foo serait réglé sur ""

opérateur de double tuyauterie

cet exemple est-il utile?

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

peut également être

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

Pour ajouter quelques explications à tout ce qui a été dit avant moi, je devrais vous donner quelques exemples pour comprendre les concepts logiques.

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

Cela signifie que si le côté gauche est évalué comme une instruction vraie, il sera terminé et le côté gauche sera renvoyé et affecté à la variable. dans d'autres cas, le côté droit sera retourné et attribué.

Et l' opérateur a la structure opposée comme ci-dessous.

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

|| est l'opérateur booléen OR. Comme en javascript, undefined, null, 0, false sont considérés comme des valeurs fausses .

Cela signifie simplement

true || true = true
false || true = true
true || false = true
false || false = false

undefined || "value" = "value"
"value" || undefined = "value"
null || "value" = "value"
"value" || null = "value"
0 || "value" = "value"
"value" || 0 = "value"
false || "value" = "value"
"value" || false = "value"

Citation: "Que signifie la construction x = x || y?"

Attribution d'une valeur par défaut.

Cela signifie fournir une valeur par défaut de y à x , au cas où x attend toujours sa valeur mais ne l'a pas encore reçue ou a été délibérément omis afin de revenir à une valeur par défaut.

Et je dois ajouter une dernière chose: ce morceau de sténographie est une abomination. Il utilise abusivement une optimisation accidentelle de l'interpréteur (sans se soucier de la deuxième opération si la première est véridique) pour contrôler une affectation. Cette utilisation n'a rien à voir avec le but de l'opérateur. Je ne pense pas qu'il devrait jamais être utilisé.

Je préfère l'opérateur ternaire pour l'initialisation, par exemple,

var title = title?title:'Error';

Cela utilise une opération conditionnelle d'une ligne pour son objectif correct. Il joue toujours à des jeux disgracieux avec véracité mais, c'est Javascript pour vous.