Quand l'opérateur virgule est-il utile ?

Question

Je lis este question sur l'"opérateur virgule" dans les expressions ( , ) et le Documents MDN à ce sujet, mais je ne peux pas penser à un scénario où il est utile.

Alors, quand l'opérateur virgule est-il utile ?

Answer 1

Je ne suis pas d'accord avec Flanagan, et je dirais que la virgule est vraiment utile et permet d'écrire un code plus lisible et plus élégant, surtout quand on sait ce que l'on fait :

Voici le article très détaillé sur l'utilisation des virgules :

Plusieurs exemples en sont issus pour la preuve de la démonstration :

function renderCurve() {
  for(var a = 1, b = 10; a*b; a++, b--) {
    console.log(new Array(a*b).join('*'));
  }
}

Un générateur de fibonacci :

for (
    var i=2, r=[0,1];
    i<15;
    r.push(r[i-1] + r[i-2]), i++
); 
// 0,1,1,2,3,5,8,13,21,34,55,89,144,233,377

Trouver le premier élément parent, analogue de jQuery .parent() fonction :

function firstAncestor(el, tagName) {
    while(el = el.parentNode, el && (el.tagName != tagName.toUpperCase()));
    return el;
}

//element in http://ecma262-5.com/ELS5_HTML.htm
var a = $('Section_15.1.1.2'); 

firstAncestor(a, 'div'); //<div class="page">

Answer 2

J'ai trouvé l'opérateur virgule très utile pour écrire des aides comme celle-ci.

const stopPropagation = event => (event.stopPropagation(), event);
const preventDefault = event => (event.preventDefault(), event);
const both = compose(stopPropagation, preventDefault);

Vous pourriez remplacer la virgule par un || ou un &&, mais vous devriez alors savoir ce que la fonction renvoie.

Plus important que ça, le séparateur de virgule communique intention -- le code ne se soucie pas ce que l'opérande de gauche évalue, alors que les alternatives peuvent avoir une autre raison d'être là. Cela facilite la compréhension et le remaniement. Si le type de retour de la fonction change, le code ci-dessus ne sera pas affecté.

Naturellement, vous pouvez obtenir la même chose par d'autres moyens, mais pas de manière aussi succincte. Si || et && ont trouvé une place dans l'usage courant, il en va de même pour l'opérateur virgule.

Answer 3

Je n'en ai pas trouvé d'autre utilisation pratique, mais voici un scénario dans lequel James Padolsey utilise joliment cette technique de détection des IE en boucle :

var ie = (function(){

    var undef,
        v = 3,
        div = document.createElement('div'),
        all = div.getElementsByTagName('i');

    while ( // <-- notice no while body here
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
        all[0]
    );

    return v > 4 ? v : undef;

}());

Ces deux lignes doivent être exécutées :

div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]

Et à l'intérieur de l'opérateur virgule, les deux sont évalués alors qu'on aurait pu en faire des déclarations séparées d'une manière ou d'une autre.

Answer 4

Il y a quelque chose de "bizarre" qui peut être fait en JavaScript en appelant une fonction indirectement en utilisant l'opérateur virgule.

Il y a une longue description ici : Appel indirect de fonction en JavaScript

En utilisant cette syntaxe :

(function() {
    "use strict";

    var global = (function () { return this || (1,eval)("this"); })();
    console.log('Global === window should be true: ', global === window);

    var not_global = (function () { return this })();
    console.log('not_global === window should be false: ', not_global === window);

  }());

Vous pouvez accéder à la variable globale car eval fonctionne différemment selon qu'il est appelé directement ou indirectement.

Answer 5

Un cas typique où je l'utilise est celui de l'analyse des arguments optionnels. Je pense que cela rend la fonction à la fois plus lisible et plus concise, de sorte que l'analyse des arguments ne domine pas le corps de la fonction.

/**
 * @param {string} [str]
 * @param {object} [obj]
 * @param {Date} [date]
 */
function f(str, obj, date) {
  // handle optional arguments
  if (typeof str !== "string") date = obj, obj = str, str = "default";
  if (obj instanceof Date) date = obj, obj = {};
  if (!(date instanceof Date)) date = new Date();

  // ...
}