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

Ce qui suit n'est probablement pas très utile puisque vous ne l'écrivez pas vous-même, mais un minifieur peut réduire le code en utilisant l'opérateur virgule. Par exemple :

if(x){foo();return bar()}else{return 1}

deviendrait :

return x?(foo(),bar()):1

Le site ? : peut être utilisé maintenant, puisque l'opérateur virgule permet (dans une certaine mesure) d'écrire deux déclarations comme une seule.

Ce site est utile dans la mesure où il permet une compression soignée (39 -> 24 octets ici).

---

J'aimerais insister sur le fait que la virgule dans var a, b est no l'opérateur virgule parce qu'il n'existe pas à l'intérieur d'une expression . La virgule a une signification particulière dans var déclarations . a, b dans une expression se référerait aux deux variables et serait évaluée à b ce qui n'est pas le cas pour var a, b .

Answer 2

L'opérateur virgule vous permet de placer plusieurs expressions à un endroit où l'on attend une seule expression. La valeur résultante de plusieurs expressions séparées par une virgule sera la valeur de la dernière expression séparée par une virgule.

Personnellement, je ne l'utilise pas très souvent parce qu'il n'y a pas beaucoup de situations où l'on attend plus d'une expression et qu'il n'y a pas une façon moins confuse d'écrire le code que d'utiliser l'opérateur virgule. Une possibilité intéressante se présente à la fin d'une expression for lorsque vous voulez que plus d'une variable soit incrémentée :

// j is initialized to some other value
// as the for loop executes both i and j are incremented
// because the comma operator allows two statements to be put in place of one
for (var i = 0; i < items.len; i++, j++) {
    // loop code here that operates on items[i] 
    // and sometimes uses j to access a different array
}

Ici, vous voyez que i++, j++ peuvent être placées à un endroit où une seule expression est autorisée. Dans ce cas particulier, les expressions multiples sont utilisées pour des effets secondaires et il n'est donc pas important que les expressions composées prennent la valeur de la dernière, mais il existe d'autres cas où cela peut avoir de l'importance.

Answer 3

L'opérateur virgule est souvent utile pour écrire du code fonctionnel en Javascript.

Considérez ce code que j'ai écrit pour un SPA il y a quelque temps, qui avait quelque chose comme ce qui suit

const actions = _.chain(options)
                 .pairs() // 1
                 .filter(selectActions) // 2
                 .map(createActionPromise) // 3
                 .reduce((state, pair) => (state[pair[0]] = pair[1], state), {}) // 4
                 .value();

Il s'agissait d'un scénario assez complexe, mais réaliste. Soyez indulgents avec moi pendant que j'explique ce qui se passe et que je plaide en faveur de l'opérateur virgule.

---

Cela utilise Underscore de l'enchaînement de

1. Démontez toutes les options passées à cette fonction en utilisant pairs qui tournera { a: 1, b: 2} en [['a', 1], ['b', 2]]

2. Ce tableau de paires de propriétés est filtré en fonction de celles qui sont considérées comme des "actions" dans le système.

3. Ensuite, le deuxième indice du tableau est remplacé par une fonction qui renvoie une promesse représentant cette action (en utilisant la fonction map )

4. Enfin, l'appel à reduce fusionnera chaque "tableau de propriétés" ( ['a', 1] ) en un objet final.

Le résultat final est une version transformée de la options qui ne contient que les clés appropriées et dont les valeurs sont consommables par la fonction appelante.

---

En regardant seulement

.reduce((state, pair) => (state[pair[0]] = pair[1], state), {})

Vous pouvez voir que la fonction de réduction commence avec un objet d'état vide, state et pour chaque paire représentant une clé et une valeur, la fonction renvoie le même résultat state après avoir ajouté une propriété à l'objet correspondant à la paire clé/valeur. En raison de la syntaxe de la fonction flèche de l'ECMAScript 2015, le corps de la fonction est une expression et, par conséquent, l'opérateur virgule permet d'obtenir une expression concise et utile. "iteratee" fonction.

Personnellement, j'ai rencontré de nombreux cas en écrivant du Javascript dans un style plus fonctionnel avec ECMAScript 2015 + Arrow Functions. Cela dit, avant de rencontrer les fonctions fléchées (comme au moment de la rédaction de la question), je n'avais jamais utilisé l'opérateur virgule de manière délibérée.

Answer 4

Une autre utilisation de l'opérateur virgule est de cacher les résultats dont vous ne vous souciez pas dans le repl ou la console, par pure commodité.

Par exemple, si vous évaluez myVariable = aWholeLotOfText dans le repl ou la console, il imprimera toutes les données que vous venez d'assigner. Cela peut représenter des pages et des pages, et si vous préférez ne pas les voir, vous pouvez plutôt évaluer myVariable = aWholeLotOfText, 'done' et la console repl/console affichera simplement "done".

Oriel fait remarquer à juste titre † qui a personnalisé toString() o get() pourraient même s'avérer utiles.

Answer 5

L'opérateur de virgule n'est pas spécifique à JavaScript, il est disponible dans d'autres langages tels que C et C++ . En tant qu'opérateur binaire, il est utile lorsque le premier opérande, qui est généralement une expression, a un effet secondaire souhaité par le second opérande. Un exemple tiré de wikipedia :

i = a += 2, a + b;

Vous pouvez évidemment écrire deux lignes de code différentes, mais l'utilisation de la virgule est une autre option, parfois plus lisible.