Wann ist der Kommaoperator nützlich?

Ich habe diese Frage zum "Komma-Operator" in expression ( ,) und in den MDN-Dokumenten darüber gelesen , kann mir aber kein Szenario vorstellen, in dem dies nützlich ist.

Wann ist der Kommaoperator nützlich?

Das Folgende ist wahrscheinlich nicht sehr nützlich, da Sie es nicht selbst schreiben, aber ein Minifier kann Code mithilfe des Komma-Operators verkleinern. Beispielsweise:

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

würde werden:

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

Der ? :Operator kann jetzt verwendet werden, da der Kommaoperator (bis zu einem gewissen Grad) zulässt, dass zwei Anweisungen als eine Anweisung geschrieben werden.

Dies ist insofern nützlich, als es eine ordentliche Komprimierung ermöglicht (39 -> 24 Bytes hier).

Ich möchte die Tatsache hervorheben , dass das Komma in var a, bist nicht der Komma - Operator , weil sie nicht innerhalb eines existiert Ausdruck . Das Komma hat in var Aussagen eine besondere Bedeutung . a, bin einem Ausdruck würde sich auf die beiden Variablen beziehen und auswerten b, was für nicht der Fall ist var a, b.

Mit dem Komma-Operator können Sie mehrere Ausdrücke an einer Stelle platzieren, an der ein Ausdruck erwartet wird. Der resultierende Wert mehrerer durch Komma getrennter Ausdrücke ist der Wert des letzten durch Kommas getrennten Ausdrucks.

Ich persönlich benutze es nicht sehr oft, weil es nicht so viele Situationen gibt, in denen mehr als ein Ausdruck erwartet wird und es keine weniger verwirrende Möglichkeit gibt, den Code zu schreiben, als den Komma-Operator zu verwenden. Eine interessante Möglichkeit besteht am Ende einer forSchleife, wenn mehr als eine Variable inkrementiert werden soll:

// 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
}

Hier sehen Sie, dass i++, j++dies an einer Stelle platziert werden kann, an der ein Ausdruck zulässig ist. In diesem speziellen Fall werden die mehreren Ausdrücke für Nebeneffekte verwendet, sodass es keine Rolle spielt, dass die zusammengesetzten Ausdrücke den Wert des letzten annehmen, aber es gibt andere Fälle, in denen dies tatsächlich von Bedeutung sein könnte.

Der Komma-Operator ist häufig nützlich, wenn Sie Funktionscode in Javascript schreiben.

Betrachten Sie diesen Code, den ich vor einiger Zeit für ein SPA geschrieben habe und der ungefähr Folgendes enthielt

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

Dies war ein ziemlich komplexes, aber reales Szenario. Nehmen Sie mich mit, während ich erkläre, was passiert, und machen Sie sich dabei für den Komma-Operator stark.

1. Nehmen Sie an diese Funktion übergeben alle Optionen auseinander mit pairs welcher verwandeln wird { a: 1, b: 2}in[['a', 1], ['b', 2]]

2. Dieses Array von Eigenschaftspaaren wird gefiltert, nach denen im System als "Aktionen" angesehen wird.

3. Dann wird der zweite Index im Array durch eine Funktion ersetzt, die ein Versprechen zurückgibt, das diese Aktion darstellt (using map).

4. Schließlich führt der Aufruf von reducejedes "Eigenschaftsarray" ( ['a', 1]) wieder zu einem endgültigen Objekt zusammen.

Das Endergebnis ist eine transformierte Version des optionsArguments, die nur die entsprechenden Schlüssel enthält und deren Werte von der aufrufenden Funktion verwendet werden können.

Nur anschauen

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

Sie können sehen, dass die Reduzierungsfunktion mit einem leeren Statusobjekt beginnt. stateFür jedes Paar, das einen Schlüssel und einen Wert darstellt, gibt die Funktion dasselbe stateObjekt zurück, nachdem dem Objekt, das dem Schlüssel / Wert-Paar entspricht, eine Eigenschaft hinzugefügt wurde. Aufgrund der Pfeilfunktionssyntax von ECMAScript 2015 ist der Funktionskörper ein Ausdruck. Daher ermöglicht der Komma-Operator eine präzise und nützliche "iteratee" -Funktion.

Persönlich bin ich beim Schreiben von Javascript in einem funktionaleren Stil mit ECMAScript 2015 + Arrow Functions auf zahlreiche Fälle gestoßen. Allerdings hatte ich den Komma-Operator nie absichtlich verwendet, bevor ich auf Pfeilfunktionen gestoßen bin (z. B. zum Zeitpunkt des Schreibens der Frage).

Eine andere Verwendung für den Komma-Operator besteht darin, Ergebnisse, die Sie nicht interessieren, nur aus praktischen Gründen in der Replik oder Konsole auszublenden.

Wenn Sie beispielsweise myVariable = aWholeLotOfTextin der Replik oder Konsole auswerten , werden alle soeben zugewiesenen Daten gedruckt. Dies können Seiten und Seiten sein. Wenn Sie es nicht sehen möchten, können Sie es stattdessen auswerten myVariable = aWholeLotOfText, 'done', und die Replik / Konsole gibt nur "Fertig" aus.

Oriel richtig weist darauf hin , ^† angepasst , dass toString()oder get()Funktionen könnten auch dies nützlich machen.

Der Komma-Operator ist nicht spezifisch für JavaScript, sondern in anderen Sprachen wie C und C ++ verfügbar . Als binärer Operator ist dies nützlich, wenn der erste Operand, der im Allgemeinen ein Ausdruck ist, die gewünschte Nebenwirkung hat, die der zweite Operand benötigt. Ein Beispiel aus Wikipedia:

i = a += 2, a + b;

Natürlich können Sie zwei verschiedene Codezeilen schreiben, aber die Verwendung von Komma ist eine weitere Option und manchmal besser lesbar.

Ich würde Flanagan nicht zustimmen und sagen, dass Komma wirklich nützlich ist und es ermöglicht, besser lesbaren und eleganten Code zu schreiben, insbesondere wenn Sie wissen, was Sie tun:

Hier ist der sehr detaillierte Artikel zur Verwendung von Kommas:

Einige Beispiele von dort zum Beweis der Demonstration:

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

Ein Fibonacci-Generator:

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

Finden Sie das erste übergeordnete Element, analog zur jQuery- .parent()Funktion:

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">

Ich habe keine andere praktische Verwendung gefunden, aber hier ist ein Szenario, in dem James Padolsey diese Technik für die IE-Erkennung in einer while-Schleife verwendet:

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;

}());

Diese beiden Zeilen müssen ausgeführt werden:

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

Und innerhalb des Kommaoperators werden beide ausgewertet, obwohl man sie irgendwie zu getrennten Aussagen hätte machen können.

In JavaScript kann etwas "Seltsames" ausgeführt werden, indem eine Funktion indirekt mithilfe des Kommaoperators aufgerufen wird.

Hier gibt es eine lange Beschreibung: Indirekter Funktionsaufruf in JavaScript

Mit dieser Syntax:

(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);
  
  }());

Sie können auf die globale Variable zugreifen, da sie evalbeim direkten und indirekten Aufruf anders funktioniert.

Ich habe den Komma-Operator am nützlichsten gefunden, wenn ich solche Helfer schreibe.

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

Sie können das Komma entweder durch ein || ersetzen oder &&, aber dann müssten Sie wissen, was die Funktion zurückgibt.

Wichtiger als das ist, dass das Komma-Trennzeichen die Absicht kommuniziert - dem Code ist es egal, was der linke Operand auswertet, während die Alternativen einen anderen Grund haben können, dort zu sein. Dies erleichtert wiederum das Verständnis und die Umgestaltung. Sollte sich der Funktionsrückgabetyp jemals ändern, wäre der obige Code nicht betroffen.

Natürlich können Sie dasselbe auf andere Weise erreichen, aber nicht so prägnant. Wenn || und && haben einen Platz im allgemeinen Sprachgebrauch gefunden, ebenso der Komma-Operator.

Ein typischer Fall, den ich am Ende benutze, ist das optionale Parsen von Argumenten. Ich denke, es macht es sowohl lesbarer als auch prägnanter, so dass das Parsen von Argumenten den Funktionskörper nicht dominiert.

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

  // ...
}

Angenommen, Sie haben ein Array:

arr = [];

Wenn Sie pushauf dieses Array zugreifen, interessiert Sie selten der pushRückgabewert, nämlich die neue Länge des Arrays, sondern das Array selbst:

arr.push('foo')  // ['foo'] seems more interesting than 1

Mit dem Komma-Operator können wir auf das Array drücken, das Array als letzten Operanden für das Komma angeben und dann das Ergebnis - das Array selbst - für einen nachfolgenden Array-Methodenaufruf verwenden, eine Art Verkettung:

(arr.push('bar'), arr.push('baz'), arr).sort(); // [ 'bar', 'baz', 'foo' ]

Ein weiterer Bereich, in dem Kommaoperatoren verwendet werden können, ist die Codeverschleierung .

Angenommen, ein Entwickler schreibt einen Code wie diesen:

var foo = 'bar';

Jetzt beschließt sie, den Code zu verschleiern. Das verwendete Tool kann den Code folgendermaßen ändern:

var Z0b=(45,87)>(195,3)?'bar':(54,65)>(1,0)?'':'baz';// Z0b == 'bar'

Demo: http://jsfiddle.net/uvDuE/