Komma-Operator (,)
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Der Komma-Operator (,
) wertet jeden seiner Operanden (von links nach rechts) aus und gibt den Wert des letzten Operanden zurück. Dies wird häufig verwendet, um mehrere Aktualisierungen für den Nachsatz einer for
-Schleife bereitzustellen.
Probieren Sie es aus
Syntax
expr1, expr2, expr3/* , … */
Parameter
expr1
,expr2
,expr3
, …-
Eine oder mehrere Ausdrücke, von denen der letzte als Wert des zusammengesetzten Ausdrucks zurückgegeben wird.
Beschreibung
Sie können den Komma-Operator verwenden, wenn Sie mehrere Ausdrücke an einer Stelle einfügen möchten, die einen einzelnen Ausdruck erfordert. Die häufigste Verwendung dieses Operators ist die Bereitstellung mehrerer Aktualisierungen in einer for
-Schleife.
Da alle Ausdrücke außer dem letzten ausgewertet und dann verworfen werden, müssen diese Ausdrücke Seiteneffekte haben, um nützlich zu sein. Häufige Ausdrücke mit Seiteneffekten sind Zuweisungen, Funktionsaufrufe und die Operatoren ++
und --
. Andere können auch Seiteneffekte haben, wenn sie Getters aufrufen oder Typkonvertierungen auslösen.
Der Komma-Operator hat die niedrigste Priorität aller Operatoren. Wenn Sie einen durch Komma verbundenen Ausdruck in einen größeren Ausdruck einfügen möchten, müssen Sie ihn klammern.
Der Komma-Operator ist völlig anders als Kommas, die an anderen Stellen als syntaktische Trennzeichen verwendet werden, darunter:
- Elemente in Array-Initiatoren (
[1, 2, 3]
) - Eigenschaften in Objekt-Initiatoren (
{ a: 1, b: 2 }
) - Parameter in Funktions-Deklarationen/Ausdrücken (
function f(a, b) { … }
) - Argumente in Funktionsaufrufen (
f(1, 2)
) - Bindungs-Listen in
let
,const
odervar
-Deklarationen (const a = 1, b = 2;
) - Importlisten in
import
-Deklarationen (import { a, b } from "c";
) - Exportlisten in
export
-Deklarationen (export { a, b };
)
Tatsächlich, obwohl einige dieser Orte fast alle Ausdrücke akzeptieren, akzeptieren sie keine durch Komma verbundenen Ausdrücke, da dies mit den syntaktischen Komma-Trennzeichen mehrdeutig wäre. In diesem Fall müssen Sie den durch Komma verbundenen Ausdruck klammern. Zum Beispiel ist Folgendes eine const
-Deklaration, die zwei Variablen deklariert, wobei das Komma nicht der Komma-Operator ist:
const a = 1, b = 2;
Es unterscheidet sich von Folgendem, wo b = 2
ein Zuweisungsausdruck ist, keine Deklaration. Der Wert von a
ist 2
, der Rückgabewert der Zuweisung, während der Wert von 1
verworfen wird:
const a = (1, b = 2);
Komma-Operatoren können nicht als nachgestellte Kommas erscheinen.
Beispiele
Verwendung des Komma-Operators in einer For-Schleife
Wenn a
ein zweidimensionales Array mit 10 Elementen auf jeder Seite ist, verwendet der folgende Code den Komma-Operator, um i
zu inkrementieren und j
gleichzeitig zu dekrementieren, wodurch die Werte der diagonalen Elemente im Array ausgegeben werden:
const a = Array.from({ length: 10 }, () =>
Array.from({ length: 10 }, Math.random),
); // A 10×10 array of random numbers
for (let i = 0, j = 9; i <= 9; i++, j--) {
console.log(`a[${i}][${j}] = ${a[i][j]}`);
}
Verwendung des Komma-Operators zum Verbinden von Zuweisungen
Da Kommas die niedrigste Priorität haben — sogar niedriger als Zuweisungen — können Kommas verwendet werden, um mehrere Zuweisungsausdrücke zu verbinden. Im folgenden Beispiel wird a
auf den Wert von b = 3
gesetzt (was 3 ist). Dann wird der Ausdruck c = 4
ausgewertet und sein Ergebnis wird der Rückgabewert des gesamten Komma-Ausdrucks.
let a, b, c;
a = b = 3, c = 4; // Returns 4
console.log(a); // 3 (left-most)
let x, y, z;
x = (y = 5, z = 6); // Returns 6
console.log(x); // 6 (right-most)
Verarbeiten und dann zurückgeben
Ein weiteres Beispiel, das man mit dem Komma-Operator machen könnte, ist die Verarbeitung vor der Rückgabe. Wie gesagt, wird nur das letzte Element zurückgegeben, aber alle anderen werden ebenfalls ausgewertet. So könnte man tun:
function myFunc() {
let x = 0;
return (x += 1, x); // the same as return ++x;
}
Dies ist besonders nützlich für einzeilige Pfeilfunktionen. Das folgende Beispiel verwendet einen einzigen map()
, um sowohl die Summe eines Arrays als auch die Quadrate seiner Elemente zu erhalten, was sonst zwei Iterationen erfordern würde, eine mit reduce()
und eine mit map()
:
let sum = 0;
const squares = [1, 2, 3, 4, 5].map((x) => ((sum += x), x * x));
console.log(squares); // [1, 4, 9, 16, 25]
console.log(sum); // 15
Verwerfen der Referenzbindung
Der Komma-Operator gibt immer den letzten Ausdruck als Wert statt als Referenz zurück. Dies führt dazu, dass einige kontextuelle Informationen wie die this
-Bindung verloren gehen. Beispielsweise gibt ein Eigenschaften-Zugriff eine Referenz auf die Funktion zurück, die sich auch das Objekt merkt, auf dem sie zugegriffen wurde, sodass der Eigenschaftsaufruf ordnungsgemäß funktioniert. Wenn die Methode aus einem Komma-Ausdruck zurückgegeben wird, wird die Funktion so aufgerufen, als wäre sie ein neuer Funktionswert, und this
ist undefined
.
const obj = {
value: "obj",
method() {
console.log(this.value);
},
};
obj.method(); // "obj"
(obj.method)(); // "obj" (the grouping operator still returns the reference)
(0, obj.method)(); // undefined (the comma operator returns a new value)
Sie können mit dieser Technik in ein indirektes eval eintreten, da für ein direktes eval der Funktionsaufruf auf der Referenz der eval()
-Funktion erfolgen muss.
globalThis.isDirectEval = false;
{
const isDirectEval = true;
console.log(eval("isDirectEval")); // true
console.log((eval)("isDirectEval")); // true (the grouping operator still returns a reference to `eval`)
console.log((0, eval)("isDirectEval")); // false (the comma operator returns a new value)
}
Spezifikationen
Specification |
---|
ECMAScript Language Specification # sec-comma-operator |
Browser-Kompatibilität
BCD tables only load in the browser