Operatorenrangfolge - JavaScript | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

Operatorenrangfolge

Die Operatorenrangfolge bestimmt, wie Operatoren im Verhältnis zueinander geparst werden. Operatoren mit höherer Rangfolge werden die Operanden von Operatoren mit niedrigerer Rangfolge.

In diesem Artikel

Probieren Sie es aus

console.log(3 + 4 * 5); // 3 + 20
// Expected output: 23

console.log(4 * 3 ** 2); // 4 * 9
// Expected output: 36

let a;
let b;

console.log((a = b = 5));
// Expected output: 5

Rangfolge und Assoziativität

Betrachten Sie einen Ausdruck, der durch die folgende Darstellung beschreibbar ist, wobei sowohl OP1 als auch OP2 Platzhalter für OPeratoren sind.

a OP1 b OP2 c

Die obige Kombination hat zwei mögliche Interpretationen:

(a OP1 b) OP2 c a OP1 (b OP2 c)

Welche Interpretation die Sprache annimmt, hängt von der Identität von OP1 und OP2 ab.

Wenn OP1 und OP2 unterschiedliche Rangfolgen (siehe Tabelle unten) haben, wird der Operator mit der höheren Rangfolge zuerst ausgeführt und die Assoziativität spielt keine Rolle. Beachten Sie, dass Multiplikation eine höhere Rangfolge hat als Addition und zuerst ausgeführt wird, auch wenn die Addition im Code zuerst geschrieben ist.

js
console.log(3 + 10 * 2); // 23
console.log(3 + (10 * 2)); // 23, because parentheses here are superfluous
console.log((3 + 10) * 2); // 26, because the parentheses change the order

Innerhalb von Operatoren mit derselben Rangfolge gruppiert die Sprache diese nach Assoziativität. Linksassoziativität (von links nach rechts) bedeutet, dass sie als (a OP1 b) OP2 c interpretiert wird, während Rechtsassoziativität (von rechts nach links) bedeutet, dass sie als a OP1 (b OP2 c) interpretiert wird. Zuweisungsoperatoren sind rechtsassoziativ, daher können Sie schreiben:

a = b = 5; // same as writing a = (b = 5);

mit dem erwarteten Ergebnis, dass a und b den Wert 5 erhalten. Dies liegt daran, dass der Zuweisungsoperator den zugewiesenen Wert zurückgibt. Zuerst wird b auf 5 gesetzt. Dann wird auch a auf 5 gesetzt — den Rückgabewert von b = 5, d.h. der rechte Operand der Zuweisung.

Ein weiteres Beispiel: Der einzigartige Exponentialoperator hat eine Rechtsassoziativität, während andere arithmetische Operatoren eine Linksassoziativität haben.

js
const a = 4 ** 3 ** 2; // Same as 4 ** (3 ** 2); evaluates to 262144
const b = 4 / 3 / 2; // Same as (4 / 3) / 2; evaluates to 0.6666...

Operatoren werden zuerst nach Rangfolge und dann, für benachbarte Operatoren mit derselben Rangfolge, nach Assoziativität gruppiert. Wenn Sie Division und Exponentiation mischen, kommt die Exponentiation immer vor der Division. Zum Beispiel ergibt 2 ** 3 / 3 ** 2 0.8888888888888888, weil es dasselbe ist wie (2 ** 3) / (3 ** 2).

Für präfixunäre Operatoren nehmen wir den folgenden Muster an:

OP1 a OP2 b

wobei OP1 ein Präfixunärer Operator und OP2 ein binärer Operator ist. Wenn OP1 eine höhere Rangfolge als OP2 hat, würde es als (OP1 a) OP2 b gruppiert; andernfalls wäre es OP1 (a OP2 b).

js
const a = 1;
const b = 2;
typeof a + b; // Equivalent to (typeof a) + b; result is "number2"

Wenn der unäre Operator auf dem zweiten Operand steht:

a OP2 OP1 b

Dann muss der binäre Operator OP2 eine niedrigere Rangfolge als der unäre Operator OP1 haben, damit er als a OP2 (OP1 b) gruppiert wird. Zum Beispiel ist das folgende ungültig:

js
function* foo() {
  a + yield 1;
}

Da + eine höhere Rangfolge als yield hat, würde dies zu (a + yield) 1 werden — aber da yield ein reserviertes Wort in Generatorfunktionen ist, wäre dies ein Syntaxfehler. Glücklicherweise haben die meisten unären Operatoren eine höhere Rangfolge als binäre Operatoren und leiden nicht unter diesem Fallstrick.

Wenn wir zwei Präfixunäre Operatoren haben:

OP1 OP2 a

Dann muss der unäre Operator, der näher an dem Operand ist, OP2, eine höhere Rangfolge als OP1 haben, damit er als OP1 (OP2 a) gruppiert wird. Es ist möglich, es andersherum zu machen und mit (OP1 OP2) a zu enden:

js
async function* foo() {
  await yield 1;
}

Da await eine höhere Rangfolge als yield hat, würde dies (await yield) 1 werden, was bedeutet, dass auf einen Bezeichner namens yield gewartet wird, also ein Syntaxfehler. Ebenso, wenn Sie new !A; haben, wird, da ! eine niedrigere Rangfolge als new hat, dies zu (new !) A, was offensichtlich ungültig ist. (Dieser Code sieht sowieso unsinnig aus, da !A immer ein Boolescher Wert ist, keine Konstruktorfunktion.)

Für postfixunäre Operatoren (namentlich ++ und --) gelten die gleichen Regeln. Glücklicherweise haben beide Operatoren eine höhere Rangfolge als jeder binäre Operator, sodass die Gruppierung immer so ist, wie Sie es erwarten würden. Außerdem, da ++ zu einem Wert und nicht zu einer Referenz evaluiert, können Sie keine mehrfachen Inkremente zusammenketten.

js
let a = 1;
a++++; // SyntaxError: Invalid left-hand side in postfix operation.

Die Operatorenrangfolge wird rekursiv behandelt. Zum Beispiel betrachten Sie diesen Ausdruck:

1 + 2 ** 3 * 4 / 5 >> 6

Zuerst gruppieren wir Operatoren mit unterschiedlichen Rangstufen in absteigender Reihenfolge der Rangstufen.

Der **-Operator hat die höchste Rangfolge und wird daher zuerst gruppiert.
Um den **-Ausdruck herum hat er * rechts und + links. * hat eine höhere Rangfolge, daher wird es zuerst gruppiert. * und / haben die gleiche Rangfolge, daher gruppieren wir sie vorerst zusammen.
Wenn Sie sich die um die in 2 gruppierte *//-Ausdruck kümmern, wird, weil + eine höhere Rangfolge als >> hat, ersteres gruppiert.

js
   (1 + ( (2 ** 3) * 4 / 5) ) >> 6
// │    │ └─ 1. ─┘        │ │
// │    └────── 2. ───────┘ │
// └────────── 3. ──────────┘

Innerhalb der *// Gruppe, da sie beide linksassoziativ sind, würde der linke Operand gruppiert werden.

js
   (1 + ( ( (2 ** 3) * 4 ) / 5) ) >> 6
// │    │ │ └─ 1. ─┘     │    │ │
// │    └─│─────── 2. ───│────┘ │
// └──────│───── 3. ─────│──────┘
//        └───── 4. ─────┘

Beachten Sie, dass die Operatorenrangfolge und -assoziativität nur die Auswertungsreihenfolge von Operatoren (die implizite Gruppierung) und nicht die Reihenfolge der Auswertung von Operanden beeinflusst. Die Operanden werden immer von links nach rechts ausgewertet. Die höher priorisierten Ausdrücke werden immer zuerst ausgewertet, und ihre Ergebnisse werden dann gemäß der Operatorenrangfolge zusammengesetzt.

js
function echo(name, num) {
  console.log(`Evaluating the ${name} side`);
  return num;
}
// Exponentiation operator (**) is right-associative,
// but all call expressions (echo()), which have higher precedence,
// will be evaluated before ** does
console.log(echo("left", 4) ** echo("middle", 3) ** echo("right", 2));
// Evaluating the left side
// Evaluating the middle side
// Evaluating the right side
// 262144

// Exponentiation operator (**) has higher precedence than division (/),
// but evaluation always starts with the left operand
console.log(echo("left", 4) / echo("middle", 3) ** echo("right", 2));
// Evaluating the left side
// Evaluating the middle side
// Evaluating the right side
// 0.4444444444444444

Wenn Sie mit Binärbäumen vertraut sind, denken Sie an eine Post-Order Traversierung.

/ ┌────────┴────────┐ echo("left", 4) ** ┌────────┴────────┐ echo("middle", 3) echo("right", 2)

Nachdem alle Operatoren richtig gruppiert wurden, würden die binären Operatoren einen Binärbaum bilden. Die Auswertung beginnt von der äußersten Gruppe — das ist der Operator mit der niedrigsten Rangfolge (/ in diesem Fall). Der linke Operand dieses Operators wird zuerst ausgewertet, was aus höher priorisierten Operatoren (wie einem Aufrufausdruck echo("left", 4)) bestehen kann. Nachdem der linke Operand ausgewertet wurde, wird der rechte Operand auf die gleiche Weise ausgewertet. Daher würden alle Blattknoten — die echo()-Aufrufe — von links nach rechts besucht, unabhängig von der Rangfolge der Operatoren, die sie verbinden.

Kurzschlusslogik

Im vorherigen Abschnitt sagten wir: "Die höher priorisierten Ausdrücke werden immer zuerst ausgewertet" — das ist im Allgemeinen wahr, muss jedoch mit der Anerkennung der Kurzschlusslogik ergänzt werden, bei der ein Operand möglicherweise überhaupt nicht ausgewertet wird.

Kurzschlusslogik ist ein Fachbegriff für bedingte Auswertung. Zum Beispiel in dem Ausdruck a && (b + c), wenn a falsch ist, wird der Unterausdruck (b + c) nicht einmal ausgewertet, selbst wenn er gruppiert ist und daher eine höhere Rangfolge hat als &&. Wir könnten sagen, dass der logische Und-Operator (&&) "kurzgeschlossen" ist. Neben logischem Und gehören zu den anderen kurzgeschlossenen Operatoren logisches Oder (||), der Nullish Coalescing Operator (??) und der optionale Verkettungsoperator (?.).

js
a || (b * c); // evaluate `a` first, then produce `a` if `a` is "truthy"
a && (b < c); // evaluate `a` first, then produce `a` if `a` is "falsy"
a ?? (b || c); // evaluate `a` first, then produce `a` if `a` is not `null` and not `undefined`
a?.b.c; // evaluate `a` first, then produce `undefined` if `a` is `null` or `undefined`

Beim Auswerten eines kurzgeschlossenen Operators wird stets der linke Operand ausgewertet. Der rechte Operand wird nur ausgewertet, wenn der linke Operand das Ergebnis der Operation nicht bestimmen kann.

Hinweis: Das Verhalten der Kurzschlusslogik ist in diesen Operatoren integriert. Andere Operatoren würden immer beide Operanden auswerten, unabhängig davon, ob das tatsächlich nützlich ist — zum Beispiel wird NaN * foo() immer foo aufrufen, selbst wenn das Ergebnis niemals etwas anderes als NaN wäre.

Das vorherige Modell einer Post-Order Traversierung gilt weiterhin. Allerdings wird die Sprache, nachdem der linke Unterbaum eines kurzgeschlossenen Operators besucht wurde, entscheiden, ob der rechte Operand ausgewertet werden muss. Wenn nicht (z. B. weil der linke Operand von || bereits wahr ist), wird das Ergebnis direkt zurückgegeben, ohne den rechten Unterbaum zu besuchen.

Betrachten Sie diesen Fall:

js
function A() { console.log('called A'); return false; }
function B() { console.log('called B'); return false; }
function C() { console.log('called C'); return true; }

console.log(C() || B() && A());

// Logs:
// called C
// true

Nur C() wird ausgewertet, obwohl && eine höhere Rangfolge hat. Das bedeutet nicht, dass || in diesem Fall eine höhere Rangfolge hat — es ist genau weil (B() && A()) eine höhere Rangfolge hat, dass es als Ganzes vernachlässigt wird. Wenn es umsortiert wird als:

js
console.log(A() && B() || C());
// Logs:
// called A
// called C
// true

Dann würde der Kurzschlusseffekt von && nur verhindern, dass B() ausgewertet wird, aber weil A() && B() als Ganzes false ist, würde C() trotzdem ausgewertet.

Allerdings beachten Sie, dass Kurzschlusslogik das endgültige Auswertungsergebnis nicht ändert. Es beeinflusst nur die Auswertung der Operanden, nicht wie Operatoren gruppiert werden — wenn die Auswertung von Operanden keine Nebeneffekte hat (zum Beispiel Ausgabe an die Konsole, Zuweisung an Variablen, Auslösen eines Fehlers), wäre die Kurzschlusslogik überhaupt nicht wahrnehmbar.

Die Zuweisungsgegenstücke dieser Operatoren (&&=, ||=, ??=) sind ebenfalls kurzgeschlossen. Sie sind so kurzgeschlossen, dass die Zuweisung überhaupt nicht erfolgt.

Tabelle

Die folgende Tabelle listet Operatoren in der Reihenfolge von der höchsten Rangfolge (18) zur niedrigsten Rangfolge (1) auf.

Mehrere allgemeine Hinweise zur Tabelle:

Nicht alle hier enthaltenen Syntaxe sind im strengen Sinne "Operatoren". Beispielsweise werden Spread ... und Pfeil => typischerweise nicht als Operatoren angesehen. Wir haben sie jedoch dennoch eingefügt, um zu zeigen, wie stark sie im Vergleich zu anderen Operatoren/Ausdrücken binden.
Einige Operatoren haben bestimmte Operanden, die Ausdrücke erfordern, die enger sind als die, die durch höher priorisierte Operatoren produziert werden. Zum Beispiel muss die rechte Seite des Mitgliederzugriffs . (Rangfolge 17) ein Bezeichner anstelle eines gruppierten Ausdrucks sein. Die linke Seite des Pfeils => (Rangfolge 2) muss eine Argumentliste oder ein einzelner Bezeichner anstelle eines zufälligen Ausdrucks sein.
Einige Operatoren haben bestimmte Operanden, die Ausdrücke akzeptieren, die breiter sind als die, die durch höher priorisierte Operatoren erzeugt werden. Zum Beispiel kann der in Klammern eingeschlossene Ausdruck der Klammernotation [ … ] (Rangfolge 17) jeder Ausdruck sein, selbst durch Kommata (Rangfolge 1) verbundene. Diese Operatoren wirken so, als wäre dieser Operand "automatisch gruppiert". In diesem Fall werden wir die Assoziativität weglassen.

Rangfolge Assoziativität Einzelne Operatoren Hinweise

18: Gruppierung	n/a	Grouping (x)	[1]
17: Zugriff und Aufruf	von links nach rechts	Mitgliederzugriff x.y	[2]
	von links nach rechts	Optionale Verkettung x?.y	[2]
	n/a	Berechneter Mitgliederzugriff x[y]	[3]
		new mit Argumentliste new x(y)	[4]
		Funktionsaufruf x(y)
		import(x)
16: new	n/a	new ohne Argumentliste new x
15: Postfix-Operatoren	n/a	Postfix-Inkrement x++	[5]
15: Postfix-Operatoren	n/a	Postfix-Dekrement x--	[5]
14: Präfix-Operatoren	n/a	Präfix-Inkrement ++x	[6]
		Präfix-Dekrement --x	[6]
		Logisches NICHT !x
		Bitweises NICHT ~x
		Unäres Plus +x
		Unäre Negation -x
		typeof x
		void x
		delete x	[7]
		await x
13: Exponentiierung	von rechts nach links	Exponentiation x ** y	[8]
12: Multiplikative Operatoren	von links nach rechts	Multiplikation x * y
		Division x / y
		Rest x % y
11: Additive Operatoren	von links nach rechts	Addition x + y
11: Additive Operatoren	von links nach rechts	Subtraktion x - y
10: Bitweises Verschieben	von links nach rechts	Linksschiebung x << y
		Rechtsschiebung x >> y
		Unsigned-Rechtsschiebung x >>> y
9: Relationale Operatoren	von links nach rechts	Kleiner als x < y
		Kleiner oder gleich x <= y
		Größer als x > y
		Größer oder gleich x >= y
		x in y
		x instanceof y
8: Gleichheitsoperatoren	von links nach rechts	Gleichheit x == y
		Ungleichheit x != y
		Strikte Gleichheit x === y
		Strikte Ungleichheit x !== y
7: Bitweises UND	von links nach rechts	Bitweises UND x & y
6: Bitweises XOR	von links nach rechts	Bitweises XOR x ^ y
5: Bitweises ODER	von links nach rechts	Bitweises ODER x \| y
4: Logisches UND	von links nach rechts	Logisches UND x && y
3: Logisches ODER, Nullish Coalescing	von links nach rechts	Logisches ODER x \|\| y
3: Logisches ODER, Nullish Coalescing	von links nach rechts	Nullish Coalescing Operator x ?? y	[9]
2: Zuweisung und Sonstiges	von rechts nach links	Zuweisung x = y	[10]
		Addition-Zuweisung x += y
		Subtraktion-Zuweisung x -= y
		Exponentiation-Zuweisung x **= y
		Multiplikation-Zuweisung x *= y
		Division-Zuweisung x /= y
		Rest-Zuweisung x %= y
		Linksschiebe-Zuweisung x <<= y
		Rechtsschiebe-Zuweisung x >>= y
		Unsigned-Rechtsschiebe-Zuweisung x >>>= y
		Bitweises UND-Zuweisung x &= y
		Bitweises XOR-Zuweisung x ^= y
		Bitweises ODER-Zuweisung x \|= y
		Logisches UND-Zuweisung x &&= y
		Logisches ODER-Zuweisung x \|\|= y
		Nullish Coalescing-Zuweisung x ??= y
	von rechts nach links	Bedingter (ternärer) Operator x ? y : z	[11]
	von rechts nach links	Pfeil x => y	[12]
	n/a	yield x
		yield* x
		Spread ...x	[13]
1: Komma	von links nach rechts	Komma-Operator x, y

Hinweise:

Der Operand kann jeder Ausdruck sein.
Die "rechte Seite" muss ein Bezeichner sein.
Die "rechte Seite" kann jeder Ausdruck sein.
Die "rechte Seite" ist eine durch Komma getrennte Liste von Ausdrücken mit Rangfolge > 1 (d.h. keine Komma-Ausdrücke). Der Konstruktor eines new-Ausdrucks kann keine optionale Kette sein.
Der Operand muss ein gültiges Zuweisungsziel sein (Bezeichner oder Mitgliederzugriff). Seine Rangfolge bedeutet, dass new Foo++ (new Foo)++ (ein Syntaxfehler) und nicht new (Foo++) (ein TypeError: (Foo++) ist kein Konstruktor) ist.
Der Operand muss ein gültiges Zuweisungsziel sein (Bezeichner oder Mitgliederzugriff).
Der Operand kann kein Bezeichner oder Zugriff auf ein privates Element sein.
Die linke Seite kann keine Rangfolge 14 haben.
Die Operanden können kein logisches ODER || oder logisches UND &&-Operator ohne Gruppierung sein.
Die "linke Seite" muss ein gültiges Zuweisungsziel sein (Bezeichner oder Mitgliederzugriff).
Die Assoziativität bedeutet, dass die beiden Ausdrücke nach ? implizit gruppiert sind.
Die "linke Seite" ist ein einzelner Bezeichner oder eine geklammerte Parameterliste.
Nur innerhalb von Objektliteralen, Arrayliteralen oder Argumentlisten gültig.

Die Rangfolge der Gruppen 17 und 16 kann etwas mehrdeutig sein. Hier einige Beispiele zur Klärung:

Optionale Verkettung ist immer für ihre jeweilige Syntax ohne Optionalität austauschbar (abgesehen von einigen besonderen Fällen, in denen optionale Verkettung verboten ist). Zum Beispiel akzeptiert jeder Ort, der a?.b akzeptiert, auch a.b und umgekehrt, und ähnlich für a?.(), a(), etc.
Mitgliederausdrücke und berechnete Mitgliederausdrücke sind immer füreinander austauschbar.
Aufrufausdrücke und import()-Ausdrücke sind immer füreinander austauschbar.
Dies hinterlässt vier Klassen von Ausdrücken: Mitgliederzugriff, new mit Argumenten, Funktionsaufruf und new ohne Argumente.
- Die "linke Seite" eines Mitgliederzugriffs kann sein: ein Mitgliederzugriff (a.b.c), new mit Argumenten (new a().b) und Funktionsaufruf (a().b).
- Die "linke Seite" von new mit Argumenten kann sein: ein Mitgliederzugriff (new a.b()) und new mit Argumenten (new new a()()).
- Die "linke Seite" eines Funktionsaufrufs kann sein: ein Mitgliederzugriff (a.b()), new mit Argumenten (new a()()), und Funktionsaufruf (a()()).
- Der Operand von new ohne Argumente kann sein: ein Mitgliederzugriff (new a.b), new mit Argumenten (new new a()) und new ohne Argumente (new new a).

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden