Stil mit {stil}

Okt 2008

JavaScript-Operatoren für Zuweisungen, Vergleiche, Berechnungen und Strings

Operatoren führen mathematische Berechnungen aus, vergleichen Werte und Ergebnisse von Abfragen und weisen einer Variablen einen Wert zu. In der Regel werden sie durch ein mathematisches Symbol wie ein „+“-, „-“- oder „=“-Zeichen dargestellt, aber manchmal sind sie auch ein Wort wie typeOf oder instanceOf. Die Daten, auf denen Operatoren operieren, heißen Operanden.

Operatoren lassen sich in Kategorien zusammenfassen:

• Der einzige String-Operator ist die Konkatenation zweier Strings
• Mathematische Operatoren führen mathematische Berechnungen durch
• Vergleichsoperatoren vergleichen zwei Werte, Variablen oder Anweisungen
• Zuweisungsoperatoren weisen Variablen Werte zu
• Logische Operatoren vergleichen zwei bedingte Anweisungen, um zu prüfen, ob eine oder beide Bedingungen true oder false liefern
• Bitweise Operatoren führen logische Operationen auf dem Bitlevel aus
• Spezielle Operatoren führen Aufgaben durch und versuchen, überflüssigen Code zu eliminieren.

String		Arithmetik		Vergleichen
Konkatenation	+	Addition	+	Gleich	==
Zuweisung		Subtraktion	-	Nicht gleich	!=
Wird zu	=	Multiplikation	*	Strenges Gleich	===
Addieren u. Zuweisen	+=	Division	/	Strenges Nicht gleich	!==
Subtrahieren u. Zweisen	-=	Modulo	%	Größer als	>
Modulo u. Zuweisen	%=	Inkrement	++	Kleiner als	<
Dividieren u. Zuweisen	/=	Dekrement	--	Größer oder Gleich	>=
Multiplizieren u. Zuweisen	*=	Negation	-	Kleiner oder Gleich	<=
Logische Operatoren		Bitweise		Spezielle Operatoren
NOT	!	AND		Ternary	?:
OR	||	OR	|	Test	typeof
AND	&&	XOR		Ist Instanz von	instanceof
		Nach Links	<<	Löschen	delete
		Nach Rechts	>>	Test	in
		Nach Rechts und mit Nullen füllen	>>>	Erzeugen	new
		Bitweises Komplement	~	Evaluieren	void
				Aktuelles Objekt	this

String-Operatoren

Der +-Operator

Der +-Operator wird sowohl zur Addition als auch zum Zusammenfügen von zwei oder mehr Zeichenketten (auch als „Konkatenation“ bezeichnet) benutzt. Aus mehreren individuellen Zeichenketten entsteht eine neue Zeichenkette:

var brot = "Brot";
var butter = "Butter";
var salz = "Salz";
var myNewString = brot + ', ' + butter + ' und ' + salz;
alert(myNewString);

myNewString anzeigen

Die neue Zeichenkette wird aus den drei Variablen brot, butter und salz und zwei literalen Strings ', ' und ' und ' zusammengesetzt.

Der +-Operator ist doppelt belegt und ist auch der arithmetische +-Operator. Sobald einer der beiden Operanden eine Zeichenkette ist, fügt der +-Operator die beiden Operanden zu einem String zusammen.

var sum = 35 + 15 + " €";

erzeugt 3515 € und nicht 50 €.

Mathematische Operatoren

Addition +

Der +-Operator addiert zwei Werte miteinander.

var x = 17;
var y = 23;
var z = x + y;

+

<form action="jsOperatoren.shtml" method="get" id="jsopF3">
<p><input type="text" id="add1" size="6" /> + 
   <input type="text" id="add2" size="6" /> <input type="submit" value="=" />  
   <input type="text" id="opRes" disabled="disabled" /></p>
</form>

var jsopF3 = document.getElementById('jsopF3');
jsopF3.onsubmit = function() {
   var x = document.getElementById('x').value;
   var y = document.getElementById('y').value;
   var z = document.getElementById('opRes');
   x = x.replace(/,/, ".");     // Ersetzt ein Komma in der 
   y = y.replace(/,/, ".");     // Zahl durch einen Dezimalpunkt
   
   if (isNaN(parseFloat(x)) || isNaN(parseFloat(y))) {
      z.value = "Fehler: keine Zahl";
   } else {
      z.value = parseFloat(x) + parseFloat(y);
   }
   return false;
}

Benutzereingaben in Formularfeldern liefern in Javascript immer einen String. Um arithmetische Operation mit Benutzereingaben auszuführen, wandeln parseInt() oder parseFloat() die Werte aus den Eingabefeldern in ganze Zahlen bzw. Fließkommazahlen um.

Die Anweisung var x = document.getElementById('x').value; liest den Wert des ersten Eingabefelds und weist ihn der Variablen x zu, die zweite Anweisung belegt entsprechend die Variable y. Erst wenn durch if (isNaN(parseFloat(x)) || isNaN(parseFloat(y))) sicher gestellt ist, dass x und y tatsächlich Zahlen sind, findet die eigentliche Operation statt: z.value = parseFloat(x) + parseFloat(y); addiert den Wert aus Feld x mit dem Wert aus Feld y und setzt das Ergebnis ist das Feld z.

Subtraktion

Der --Operator subtrahiert den zweiten Wert vom ersten.

var z = x - y;

Multiplikation

Der *-Operator multipliziert zwei Werte miteinander.

var z = x * y;

Division

Teilt den ersten Wert durch den zweiten Wert.

var z = x / y;

Modulo

Der %-Operator teilt den ersten Wert durch den zweiten Wert und gibt den Rest der Division an z zurück.

var z = x % y;

Inkrement

Der ++-Operator zählt 1 zum Wert hinzu.

var x = 21;
var z = x++; 
// x ist 21 vor der Zuweisung, also wird z auch 21, aber x wird 22
var z = ++x;
// x wird 22 vor der Zuweisung, also wird z 23 und x wird ebenfalls 22 

Dekrement

Zieht 1 vom Wert ab

var x = 100;
var z = x--;
// x ist 100 vor der Zuweisung, also wird z 100, aber x wird 99
var z = --x;
// x wird 99 vor der Zuweisung, also wird z 99 und x wird ebenfalls 99

Negation

Dreht das Vorzeichen des Werts um

var z = x-;

Zuweisungs-Operatoren

Zuweisung

Der =-Operator weist der Variablen x den Wert y zu.

x = y; 

Addieren und Zuweisen

Der +=-Operator addiert y zu x und weist dann der Variablen x den neuen Wert zu.

x += y;        // wirkt genauso wie x = x + y;

Subtrahieren und Zuweisen

Der -=-Operator subtrahiert y von x und weist dann der Variablen x den neuen Wert zu.

x -= y;        // wirkt genauso wie x = x - y

Multiplizieren und Zuweisen

Der *=-Operator multipliziert y mit x und weist dann der Variablen x den neuen Wert zu.

x *= y;        // wirkt genauso wie x = x * y

Dividieren und Zuweisen

Der /=- Operator dividiert x durch y und weist dann der Variablen x den neuen Wert zu.

x /= y;         // wirkt genauso wie x = x / y

Modulo und Zuweisen

Der %=-Operator dividiert x durch y, bildet den Rest und weist dann der Variablen x den neuen Wert – diesen Rest – zu.

x %= y;         // wirkt genauso wie x = x % y

Logische Operatoren

NOT

Der !-Operator gibt true zurück, wenn der Operand den Wert false aufweist.

var x = 200;
…
if (!x) // false, denn x ist definiert und initialisiert

Liest sich: Wenn x false ist …

OR – „logisches Oder“

Der ||-Operator gibt true zurück, wenn der linke oder rechte Wert oder beide true sind.

var x = 20;
var y = 200;
if (x > 10 || y < 5) // gibt true zurück, denn x > 10

Liest sich: Wenn x größer als 10 ist oder y kleiner als 5 ist …

Das gibt uns eine komfortable Methode, um Defaultwerte zu deklarieren:

myVal = v || 10;

Wenn der erste Operand false, null, undefined, "" (leere Zeichenkette) oder die Zahl 0 zurückgibt, gibt der ||-Operator den zweiten Operanden zurückgegeben, ansonsten den ersten Operanden.

AND – „logisches Und“

&& gibt true zurück, wenn sowohl der linke als auch der rechte Wert true sind.

var x = 20;
var y = 0;
if (x > 100 && y < 5) // true, denn beide Seiten liefern true 

Liest sich: Wenn x größer als 100 ist und y kleiner als 5 ist …

Damit kann man schnell einen null-Check durchführen:

var myVal = p && p.name

Wenn der erste Operand false, null, undefined, "" (leere Zeichenkette) oder die Zahl 0 zurückgibt, gibt der &&-Operator den ersten Operanden zurück, ansonsten den zweiten Operanden.

Bitweise Operationen

Bitweise Operatoren führen logische Operationen und Schiebeoperationen durch. Sie operieren auf den Operanden, als wären diese eine Folge von 32 Bits, geben aber eine Dezimalzahl zurück.

Bitweise AND

Der &-Operator gibt eine 1 für jede Stelle zurück, an der die korrespondierenden Bits beider Operanden 1 ist.

var x = 2;             // 0000 0010
var y = 42;            // 0010 1010

var z = x & y;         // 0000 0010 = 2

Bitweise OR

Der |-Operator gibt eine 1 für jede Stelle zurück, an der eines oder beide der korrespondierenden Bits der Operanden 1 sind.

var x = 2;             // 0000 0010
var y = 42;            // 0010 1010

var z = x | y;         // 0010 1010 = 42

Zeigen

Bitweise XOR

Der ^-Operator gibt eine 1 zurück für jede Stelle, an der genau einer (aber nicht beide) korrespondierenden Bits der Operanden 1 sind.

var x = 2;             // 0000 0010
var y = 42;            // 0010 1010

var z = x ^ y;         // 0010 1000 = 40

Zeigen

Nach links schieben

Der <<Operator schiebt die Bits des ersten Operanden nach links, und zwar um die Anzahl der Stellen, die im zweiten Operanden notiert sind. Die Stellen, die dabei auf der rechten Seite entstehen werden mit Nullen gefüllt und alle Nullen und Einsen, die auf der linken Seite herausfallen, werden gelöscht. Das Verschieben des binären Werts nach links um n Stellen entspricht der Multiplikation mit 2ⁿ.

var x = 1024;           // 0100 0000 0000
x = x<<2;               // 1000 0000 0000
alert(x);               // gibt 4096 aus

um nach links schieben

<form action="jsOperatoren.shtml" method="get" id="jsopF4">
<fieldset>
   <input type="text" id="jsopX" size="6" /> um 
   <input type="text" id="jsopS" size="2" /> nach links schieben
   <input type="text" id="jsopY" size="18" disabled="disabled" /> 
   <input type="submit" value="Los" /> <input type="reset" value="Löschen" />
</fieldset>
</form>

<script type="text/javascript">
// <!--
var jsopF4 = document.getElementById('jsopF4');
jsopF4.onsubmit = function() {
   var x = document.getElementById('jsopX').value;
   var s = document.getElementById('jsopS').value;
   var y = document.getElementById('jsopY');
   x = parseInt(x);
   s = parseInt(s);
   if (isNaN(x) || isNaN(s)) {
      y.value = "Fehlerhafte Eingabe";
   } else {
      y.value = x<<s;
   }
   return false;
}
// -->
</script>

Nach rechts verschieben

Der >>-Operator schiebt die Ziffern der Binärdarstellung des ersten Operanden nach rechts, und zwar um die Anzahl der Stellen, die im zweiten Operanden notiert sind und löscht dabei alle Ziffern, die nach rechts herausgeschoben werden. Das Bits der linken Seite werden kopiert, so dass das Vorzeichen der Zahl erhalten bleibt. Das Verschieben des Binärwerts um n Stellen entspricht der Division durch 2ⁿ.

var x = -1024;           // 1111 1100 0000 0000
x = x>>4;                // 1111 1111 1100 0000 = -64
alert(x);

Um 4 Stellen nach Rechts schieben

Nach rechts verschieben und mit Nullen auffüllen

Der >>>-Operator schiebt die Binärdarstellung des ersten Operanden nach rechts, und zwar um die Anzahl der Stellen, die im zweiten Operanden notiert sind. Bits, die dabei zur rechten Seite herausfallen, werden gelöscht und auf der linken Seite werden Nullen eingesetzt. Der >>>-Operator funktioniert also genauso wie der >>-Operator, aber negative Werte verlieren ihr Vorzeichen.

Um 8 Stellen nach Rechts schieben

Bitweises Komplement

Der ~-Operator komplementiert die Stellen des Binärwerts – aus Null wird Eins und aus Eins wird Null.

var y = 42;         // ... 0000 0010 1010

var z = ~y;         // ... 1111 1101 0101 = -43

Ausführungsreihenfolge

Die Mathematik und der Computer mögen es ordentlich. Alles hat eine Funktion und eine Reihenfolge, in der es durchgeführt wird. Wenn ein Ausdruck mehrere Operationen enthält, gibt es also ein feste Rangfolge, in der die Operatoren angewendet werden: Zuerst werden immer die Operationen in Klammern ausgeführt, beginnend bei der innersten Klammer. Bei gleicher Rangfolge werden die Operatoren von links nach rechts angewendet. Zuweisungen haben die niedrigste Priorität – der Ausdruck auf der rechten Seite einer Zuweisung wird vor der Ausführung immer ausgewertet.

• 2 + 4 * 7 wird als (4 * 7) + 2 berechnet, da die Multiplikation vor der Addition rangiert
• 7 * (2 + 4) wird als (2 + 4) * 7 berechnet, da der Ausdruck in der Klammer vor der Multiplikation rangiert

( ) [ ]

function()

! ~ - ++ -- new typeof void delete

* / %

+ -

<< >> >>>

< <= > >=

== !=

&

^

|

&&

||

? :

= += %= ⁄= -= *= <<= >>= &= ^= |=

,