From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- .../reference/operators/addition/index.html | 82 +++ .../operators/array_comprehensions/index.html | 200 +++++++ .../reference/operators/async_function/index.html | 107 ++++ .../reference/operators/await/index.html | 112 ++++ .../operators/bitwise_operatoren/index.html | 574 +++++++++++++++++++++ .../reference/operators/class/index.html | 157 ++++++ .../reference/operators/comma_operator/index.html | 107 ++++ .../operators/conditional_operator/index.html | 190 +++++++ .../reference/operators/dekrement/index.html | 82 +++ .../reference/operators/delete/index.html | 295 +++++++++++ .../destrukturierende_zuweisung/index.html | 404 +++++++++++++++ .../operators/expression_closures/index.html | 76 +++ .../reference/operators/function/index.html | 151 ++++++ .../reference/operators/function_star_/index.html | 91 ++++ .../operators/generator_comprehensions/index.html | 172 ++++++ .../reference/operators/grouping/index.html | 91 ++++ .../javascript/reference/operators/in/index.html | 145 ++++++ .../web/javascript/reference/operators/index.html | 303 +++++++++++ .../reference/operators/inkrement/index.html | 80 +++ .../reference/operators/instanceof/index.html | 172 ++++++ .../operators/logische_operatoren/index.html | 246 +++++++++ .../reference/operators/modulo/index.html | 78 +++ .../reference/operators/new.target/index.html | 102 ++++ .../javascript/reference/operators/new/index.html | 190 +++++++ .../operators/objekt_initialisierer/index.html | 315 +++++++++++ .../operators/operator_precedence/index.html | 318 ++++++++++++ .../operators/optionale_verkettung/index.html | 194 +++++++ .../operators/pipeline_operator/index.html | 67 +++ .../operators/property_accessors/index.html | 150 ++++++ .../reference/operators/spread_operator/index.html | 219 ++++++++ .../reference/operators/spread_syntax/index.html | 236 +++++++++ .../reference/operators/super/index.html | 184 +++++++ .../javascript/reference/operators/this/index.html | 394 ++++++++++++++ .../reference/operators/typeof/index.html | 259 ++++++++++ .../operators/vergleichsoperatoren/index.html | 243 +++++++++ .../javascript/reference/operators/void/index.html | 108 ++++ .../reference/operators/yield/index.html | 119 +++++ .../reference/operators/yield_star_/index.html | 164 ++++++ .../operators/zuweisungsoperator/index.html | 412 +++++++++++++++ 39 files changed, 7589 insertions(+) create mode 100644 files/de/web/javascript/reference/operators/addition/index.html create mode 100644 files/de/web/javascript/reference/operators/array_comprehensions/index.html create mode 100644 files/de/web/javascript/reference/operators/async_function/index.html create mode 100644 files/de/web/javascript/reference/operators/await/index.html create mode 100644 files/de/web/javascript/reference/operators/bitwise_operatoren/index.html create mode 100644 files/de/web/javascript/reference/operators/class/index.html create mode 100644 files/de/web/javascript/reference/operators/comma_operator/index.html create mode 100644 files/de/web/javascript/reference/operators/conditional_operator/index.html create mode 100644 files/de/web/javascript/reference/operators/dekrement/index.html create mode 100644 files/de/web/javascript/reference/operators/delete/index.html create mode 100644 files/de/web/javascript/reference/operators/destrukturierende_zuweisung/index.html create mode 100644 files/de/web/javascript/reference/operators/expression_closures/index.html create mode 100644 files/de/web/javascript/reference/operators/function/index.html create mode 100644 files/de/web/javascript/reference/operators/function_star_/index.html create mode 100644 files/de/web/javascript/reference/operators/generator_comprehensions/index.html create mode 100644 files/de/web/javascript/reference/operators/grouping/index.html create mode 100644 files/de/web/javascript/reference/operators/in/index.html create mode 100644 files/de/web/javascript/reference/operators/index.html create mode 100644 files/de/web/javascript/reference/operators/inkrement/index.html create mode 100644 files/de/web/javascript/reference/operators/instanceof/index.html create mode 100644 files/de/web/javascript/reference/operators/logische_operatoren/index.html create mode 100644 files/de/web/javascript/reference/operators/modulo/index.html create mode 100644 files/de/web/javascript/reference/operators/new.target/index.html create mode 100644 files/de/web/javascript/reference/operators/new/index.html create mode 100644 files/de/web/javascript/reference/operators/objekt_initialisierer/index.html create mode 100644 files/de/web/javascript/reference/operators/operator_precedence/index.html create mode 100644 files/de/web/javascript/reference/operators/optionale_verkettung/index.html create mode 100644 files/de/web/javascript/reference/operators/pipeline_operator/index.html create mode 100644 files/de/web/javascript/reference/operators/property_accessors/index.html create mode 100644 files/de/web/javascript/reference/operators/spread_operator/index.html create mode 100644 files/de/web/javascript/reference/operators/spread_syntax/index.html create mode 100644 files/de/web/javascript/reference/operators/super/index.html create mode 100644 files/de/web/javascript/reference/operators/this/index.html create mode 100644 files/de/web/javascript/reference/operators/typeof/index.html create mode 100644 files/de/web/javascript/reference/operators/vergleichsoperatoren/index.html create mode 100644 files/de/web/javascript/reference/operators/void/index.html create mode 100644 files/de/web/javascript/reference/operators/yield/index.html create mode 100644 files/de/web/javascript/reference/operators/yield_star_/index.html create mode 100644 files/de/web/javascript/reference/operators/zuweisungsoperator/index.html (limited to 'files/de/web/javascript/reference/operators') diff --git a/files/de/web/javascript/reference/operators/addition/index.html b/files/de/web/javascript/reference/operators/addition/index.html new file mode 100644 index 0000000000..6f95df95d1 --- /dev/null +++ b/files/de/web/javascript/reference/operators/addition/index.html @@ -0,0 +1,82 @@ +--- +title: Addition (+) +slug: Web/JavaScript/Reference/Operators/Addition +tags: + - JavaScript + - Operator + - Referenz + - Sprachfeature +translation_of: Web/JavaScript/Reference/Operators/Addition +--- +
{{jsSidebar("Operators")}}
+ +

Der Addition-Operator (+) erzeugt die Summe nummerischer Operanden oder setzt Zeichenketten zusammen.

+ +
{{EmbedInteractiveExample("pages/js/expressions-addition.html")}}
+ +
+ + + +

Syntax

+ +
Operator: x + y
+
+ +

Beispiele

+ +

Nummerische Addition (Summe)

+ +
// Nummer + Nummer -> Addition (Summe)
+1 + 2 // 3
+
+// Boolean + Nummer -> Addition (Summe, da true = 1)
+true + 1 // 2
+
+// Boolean + Boolean -> Addition (Summe, da false = 0)
+false + false // 0
+
+ +

Zeichenkettenzusammensetzung

+ +
// String (Zeichenkette) + String (Zeichenkette) -> Zusammensetzung
+'foo' + 'bar' // "foobar"
+
+// Nummer + String (Zeichenkette) -> Zusammensetzung
+5 + 'foo' // "5foo"
+
+// String (Zeichenkette) + Boolean -> Zusammensetzung
+'foo' + false // "foofalse"
+ +

Spezifikationen

+ + + + + + + + + + +
Spezifikation
{{SpecName('ESDraft', '#sec-addition-operator-plus', 'Addition Operator')}}
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.operators.addition")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/array_comprehensions/index.html b/files/de/web/javascript/reference/operators/array_comprehensions/index.html new file mode 100644 index 0000000000..a7d34cc1ea --- /dev/null +++ b/files/de/web/javascript/reference/operators/array_comprehensions/index.html @@ -0,0 +1,200 @@ +--- +title: Array Comprehensions +slug: Web/JavaScript/Reference/Operators/Array_comprehensions +tags: + - JavaScript + - Non-standard + - Operator + - Reference +translation_of: Archive/Web/JavaScript/Array_comprehensions +--- +
Nicht standardisiert. Nicht einsetzen!
+Die Array Comprehensions Syntax ist nicht Standardisiert und wurde mit Firefox 58 entfernt. Zukünftig müssen {{jsxref("Array.prototype.map")}}, {{jsxref("Array.prototype.filter")}}, {{jsxref("Functions/Arrow_functions", "Pfeilfunktionen", "", 1)}}, und {{jsxref("Operators/Spread_operator", "Spread Syntax", "", 1)}} eingesetzt werden.
+ +
{{jsSidebar("Operators")}}
+ +

Die Array Comprehensions Syntax war ein JavaScript Ausdruck, welcher es erlaubt schnell ein neues Array auf Basis eines existierenden zu erstellen. Jedoch wurde diese vom Standard und der Firefox Implementierung entfernt. Nicht mehr einsetzen!

+ +

Syntax

+ +
[for (x of iterable) x]
+[for (x of iterable) if (condition) x]
+[for (x of iterable) for (y of iterable) x + y]
+
+ +

Beschreibung

+ +

In Array Comprehensions können zwei Arten von Komponenten eingesetzt werden:

+ + + +

Der for-of Iterator ist immer die erste Komponente. Mehrere for-of Iteratoren oder if Statements sind erlaubt.

+ +

Array Comprehension wurden zuvor für den ECMAScript 2016 Standard vorgeschlagen und ist eine nützliche Kurzform zum Erstellen von neuen Arrays auf Basis des Inhalts andere.Comprehensions können oft statt den Aufrufen {{jsxref("Array.prototype.map", "map()")}} und {{jsxref("Array.prototype.filter", "filter()")}} eingesetzt werden oder als Möglichkeit beide zu kombinieren.

+ +

Die folgende Comprehension nimmt ein Array von Zahlen und erstellt ein neues Array, dass das Doppelte jeder Zahl enthält.

+ +
var numbers = [1, 2, 3, 4];
+var doubled = [for (i of numbers) i * 2];
+console.log(doubled); // logs 2,4,6,8
+
+ +

Das ist äquivalent zu der folgenden {{jsxref("Array.prototype.map", "map()")}} Operation:

+ +
var doubled = numbers.map(i => i * 2);
+
+ +

Comprehensions können ebenfalls für das suchen bestimmter Elemente eingesetzt werden. Hier ist eine Comprehension welche nur gerade Zahlen auswählt:

+ +
var numbers = [1, 2, 3, 21, 22, 30];
+var evens = [for (i of numbers) if (i % 2 === 0) i];
+console.log(evens); // logs 2,22,30
+
+ +

{{jsxref("Array.prototype.filter", "filter()")}} kann mit dem gleichen Ergebnis benutzt werden:

+ +
var evens = numbers.filter(i => i % 2 === 0);
+
+ +

{{jsxref("Array.prototype.map", "map()")}} und {{jsxref("Array.prototype.filter", "filter()")}} Operation können in einer einzigen Array Comprehension kombiniert werden. Hier ist ein Beispiel, welches auf gerade Zahlen filtert und diese dann verdopelt:

+ +
var numbers = [1, 2, 3, 21, 22, 30];
+var doubledEvens = [for (i of numbers) if (i % 2 === 0) i * 2];
+console.log(doubledEvens); // logs 4,44,60
+
+ +

Die eckigen Klammern einer Array Comprehension führen einen impliziten Block für Gültigkeitsbereiche ein. Neue Variablen (wie i im Beispiel) werden so behandelt, als währen sie mit {{jsxref("Statements/let","let")}} deklariert. Das bedeutet, dass sie nicht außerhalb der Comprehension sichtbar sind.

+ +

Der Input einer Array Comprehension muss nicht selbst ein Array sein; Iteratoren und Generatoren könne ebenfalls benutzt werden.

+ +

Auch Strings können als Input genutzt werden;

+ +

Even strings may be used as input; um die Filter- und Map-Aktionen (unter Array-ähnlichen Objekten) oben zu erreichen:

+ +
var str = 'abcdef';
+var consonantsOnlyStr = [for (c of str) if (!(/[aeiouAEIOU]/).test(c)) c].join(''); // 'bcdf'
+var interpolatedZeros = [for (c of str) c + '0' ].join(''); // 'a0b0c0d0e0f0'
+
+ +

Auch hier wird das Eingabeformat nicht beibehalten, so dass man {{jsxref("Array.prototype.join", "join()")}} benutzen muss, um wieder einen String zu bekommen.

+ +

Beispiele

+ +

Einfache Array Comprehensions

+ +
[for (i of [1, 2, 3]) i * i ];
+// [1, 4, 9]
+
+var abc = ['A', 'B', 'C'];
+[for (letters of abc) letters.toLowerCase()];
+// ["a", "b", "c"]
+ +

Array Comprehensions mit if Statement

+ +
var years = [1954, 1974, 1990, 2006, 2010, 2014];
+[for (year of years) if (year > 2000) year];
+// [2006, 2010, 2014]
+[for (year of years) if (year > 2000) if (year < 2010) year];
+// [2006], the same as below:
+[for (year of years) if (year > 2000 && year < 2010) year];
+// [2006]
+
+ +

Array Comprehensions verglichen zu map und filter

+ +

Ein einfacher Weg um Generator Comprehension Syntax zu verstehen ist es sie mit den Array {{jsxref("Array.map", "map")}} und {{jsxref("Array.filter", "filter")}} Methoden zu vergleichen:

+ +
var numbers = [1, 2, 3];
+
+numbers.map(function (i) { return i * i });
+numbers.map(i => i * i);
+[for (i of numbers) i * i];
+// all are [1, 4, 9]
+
+numbers.filter(function (i) { return i < 3 });
+numbers.filter(i => i < 3);
+[for (i of numbers) if (i < 3) i];
+// all are [1, 2]
+
+ +

Array Comprehensions mit zwei Arrays

+ +

Einsatz von zwei for-of Iteratoren, um mit Arrays zu arbeiten:

+ +
var numbers = [1, 2, 3];
+var letters = ['a', 'b', 'c'];
+
+var cross = [for (i of numbers) for (j of letters) i + j];
+// ["1a", "1b", "1c", "2a", "2b", "2c", "3a", "3b", "3c"]
+
+var grid = [for (i of numbers) [for (j of letters) i + j]];
+// [
+//  ["1a", "1b", "1c"],
+//  ["2a", "2b", "2c"],
+//  ["3a", "3b", "3c"]
+// ]
+
+[for (i of numbers) if (i > 1) for (j of letters) if(j > 'a') i + j]
+// ["2b", "2c", "3b", "3c"], the same as below:
+
+[for (i of numbers) for (j of letters) if (i > 1) if(j > 'a') i + j]
+// ["2b", "2c", "3b", "3c"]
+
+[for (i of numbers) if (i > 1) [for (j of letters) if(j > 'a') i + j]]
+// [["2b", "2c"], ["3b", "3c"]], not the same as below:
+
+[for (i of numbers) [for (j of letters) if (i > 1) if(j > 'a') i + j]]
+// [[], ["2b", "2c"], ["3b", "3c"]]
+
+ +

Spezifikationen

+ +

War initial im ECMAScript 2015 Entwurf, wurde jedoch in der Überarbeitung 27 (August 2014) entfernt. Für Spezifikationssemantik muss in älteren Überarbeitungen von ES2015 nachgeschaut werden.

+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.operators.array_comprehensions")}}

+ +

Unterschiede zu den älteren JS1.7/JS1.8 Comprehensions

+ +
JS1.7/JS1.8 Comprehensions wurden von Gecko 46 entfernt ({{bug(1220564)}}).
+ +

Alte Comprehensions Syntax (nicht mehr benutzen!):

+ +
[X for (Y in Z)]
+[X for each (Y in Z)]
+[X for (Y of Z)]
+
+ +

Unterschiede:

+ + + +

Siehe Bug 1220564, Kommentar 42 für Vorschläge zum Aktualisieren von Code.

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/async_function/index.html b/files/de/web/javascript/reference/operators/async_function/index.html new file mode 100644 index 0000000000..906f82dbcb --- /dev/null +++ b/files/de/web/javascript/reference/operators/async_function/index.html @@ -0,0 +1,107 @@ +--- +title: async function Ausdruck +slug: Web/JavaScript/Reference/Operators/async_function +tags: + - Experimental + - Function + - JavaScript + - Operator + - Primary Expression +translation_of: Web/JavaScript/Reference/Operators/async_function +--- +
{{jsSidebar("Operators")}}
+ +

Das async function Schlüsselwort kann benutzt werden, um async Funktionen in Ausdrücken zu benutzen.

+ +

Man kann asynchrone Funktionen auch mit einem async Funktionsstatement definieren.

+ +

Syntax

+ +
async function [name]([param1[, param2[, ..., paramN]]]) {
+   statements
+}
+ +

Seit ES2015 kann man auch Pfeilfunktionen benutzen.

+ +

Parameter

+ +
+
name
+
Der Funktionsname. Kann weggelassen werden, wenn die Funktion anonym ist. Der Name ist nur lokal im Funktionsrumpf erreichbar.
+
paramN
+
Der Name eines Arguments, welches der Funktion übergeben wird.
+
statements
+
Die Statements, welche den Funktionsrumpf definieren.
+
+ +

Beschreibung

+ +

Ein async function Ausdruck ist sehr ähnlich zu {{jsxref('Statements/async_function', 'async Funktionsstatements')}} und haben fast die selbe Syntax. Der Hauptunterschied zwischen einem async Funktionsausdruck und einem async Funktionsstatement ist der Funktionsname, welcher bei async Funktionsausdrücken weggelassen werden kann, um anonyme Funktionen zu erstellen. Ein async Funktionsausdruck kann als {{Glossary("IIFE")}} (Immediately Invoked Function Expression) genutzt werden, welche Ausgeführt werden, nachdem sie definiert wurde. Mehr Informationen dazu gibt es im Kapitel über Funktionen.

+ +

Beispiele

+ +

Einfaches Beispiel

+ +
function resolveAfter2Seconds(x) {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(x);
+    }, 2000);
+  });
+};
+
+
+var add = async function(x) { // async function expression assigned to a variable
+  var a = await resolveAfter2Seconds(20);
+  var b = await resolveAfter2Seconds(30);
+  return x + a + b;
+};
+
+add(10).then(v => {
+  console.log(v);  // prints 60 after 4 seconds.
+});
+
+
+(async function(x) { // async function expression used as an IIFE
+  var p_a = resolveAfter2Seconds(20);
+  var p_b = resolveAfter2Seconds(30);
+  return x + await p_a + await p_b;
+})(10).then(v => {
+  console.log(v);  // prints 60 after 2 seconds.
+});
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}{{Spec2('ESDraft')}}Initiale Definition in ES2017.
+ +

Browserkompatibilität

+ +
+ + +

{{Compat("javascript.operators.async_function_expression")}}

+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/await/index.html b/files/de/web/javascript/reference/operators/await/index.html new file mode 100644 index 0000000000..6684cb195c --- /dev/null +++ b/files/de/web/javascript/reference/operators/await/index.html @@ -0,0 +1,112 @@ +--- +title: await +slug: Web/JavaScript/Reference/Operators/await +tags: + - Experimental + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Operators/await +--- +
{{jsSidebar("Operators")}}
+ +

Der await Operator wird genutzt, um auf einen {{jsxref("Promise")}} zu warten. Er kann nur in einer {{jsxref("Statements/async_function", "async Funktion")}} benutzt werden.

+ +

Syntax

+ +
[rv] = await expression;
+ +
+
expression
+
Ein {{jsxref("Promise")}} oder jeder Wert, auf den gewartet wird.
+
rv
+
+

Gibt den ermittelten Wert des Promise zurück, oder den Wert selbst, wenn es sich nicht um ein Promise handelt.

+
+
+ +

Beschreibung

+ +

Der await Ausdruck lässt async Funktionen pausieren, bis ein Promise erfüllt oder abgewiesen ist, und führt die async danach weiter aus. Wenn die Funktion weiter ausgeführt wird, ist der Wert des await Ausdrucks der Wert des erfüllten Promise.

+ +

Wenn das Promise abgewiesen wird, wirft der await Ausdruck eine Exception mit dem zurückgewiesenen Wert.

+ +

Ist der Wert des Ausdrucks, der auf den await Operator folgt, kein Promise ist, wird dieser zu einem erfüllten Promise konvertiert.

+ +

Beispiele

+ +

Wenn ein Promise im await Ausdruck genutzt wird, wartet dieser, bis das Promise fertig ist und gibt den ermittelten Wert zurück.

+ +
function resolveAfter2Seconds(x) {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(x);
+    }, 2000);
+  });
+}
+
+async function f1() {
+  var x = await resolveAfter2Seconds(10);
+  console.log(x); // 10
+}
+f1();
+
+ +

Wenn der Wert kein Promise ist, wird dieser zu einem erfüllten Promise konvertiert und dessen Wert zurückgegeben.

+ +
async function f2() {
+  var y = await 20;
+  console.log(y); // 20
+}
+f2();
+ +

Wird ein Promise abgewiesen, so wird eine Exception mit dem zurückgewiesene Wert geworfen.

+ +
async function f3() {
+  try {
+    var z = await Promise.reject(30);
+  } catch(e) {
+    console.log(e); // 30
+  }
+}
+f3();
+ +

Abfangen von abgewiesenen Promises ohne try-Block.

+ +
var response = await promisedFunction().catch((err) => { console.log(err); });
+// response will be undefined if the promise is rejected
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ESDraft', '#sec-async-function-definitions', 'async functions')}}{{Spec2('ESDraft')}}Initiale Definition in ES2017.
+ +

Browserkompatibilität

+ +
+ + +

{{Compat("javascript.operators.await")}}

+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/bitwise_operatoren/index.html b/files/de/web/javascript/reference/operators/bitwise_operatoren/index.html new file mode 100644 index 0000000000..01b1ed5712 --- /dev/null +++ b/files/de/web/javascript/reference/operators/bitwise_operatoren/index.html @@ -0,0 +1,574 @@ +--- +title: Bitweise Operatoren +slug: Web/JavaScript/Reference/Operators/Bitwise_Operatoren +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators +--- +
{{jsSidebar("Operators")}}
+ +

Bitweise Operatoren werden auf Sequenzen aus 32 bit (Nullen und Einsen) angewandt im Gegensatz zu Operatoren, die mit Dezimal-, Hexadezimal- oder Oktalzahlen (numbers) arbeiten. Beispielsweise hat die Dezimalzahl neun die binäre Darstellung 1001. Auch wenn Bitweise Operatoren mit Binärdarstellungen arbeiten, sind deren Ausgabewerte Javascript Standardzahlenwerte.

+ +
{{EmbedInteractiveExample("pages/js/expressions-bitwiseoperators.html")}}
+ + + +

Die folgende Tabelle fasst Javascripts Bitweise Operatoren zusammen:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperatorEinsatzBeschreibung
Bitweises UNDa & bGibt 1 in jeder Bit Position zurück, an welcher beide Operanden 1 sind.
Bitweises ODERa | bGibt 1 in jeder Bit Position zurück, an welcher einer oder beide Operanden 1 sind.
Bitweises XORa ^ bGibt 1 in jeder Bit Position zurück, an welcher einer aber nicht beide Operanden 1 sind.
Bitweise Negation~ aInvertiert die Bits des Operanden
Linksverschiebunga << bVerschiebt a in binärer Repräsentation b (< 32) Bits nach links, von Rechts werden Nullen hereingeschoben.
Vorzeichen propagierende Rechtsverschiebunga >> bVerschiebt a in binärer Repräsentation b (< 32) Bits nach rechts, herausgeschobene Bits werden verworfen.
Null füllende Rechtsverschiebunga >>> bVerschiebt a in binärer Repräsentation b (< 32) Bits nach rechts, herausgeschobene Bits werden verworfen und Nullen werden von links hereingeschoben.
+ +

Vorzeichenbehaftete 32-Bit Integer

+ +

Die Operanden aller Bitweisen Operationen werden in vorzeichenbehaftete 32-Bit Integer im Zweierkomplementformat konvertiert. Zweierkomplementformat bedeutet, dass das Gegenstück einer negative Zahl alle Bits invertiert (Bitweise Negation einer Zahl oder auch Einerkomplement einer Zahl) plus eins ist. Zum Beispiel die codierte Integer 314:

+ +
00000000000000000000000100111010
+
+ +

Im Folgenden ist ~314 codiert, d. h. das Einerkomplement von 314:

+ +
11111111111111111111111011000101
+
+ +

Anschließend wird -314 codiert, d. h. das Zweierkomplement 314:

+ +
11111111111111111111111011000110
+
+ +

Das Zweierkomplement garantiert, dass das Bit ganz links 0 ist, wenn die Zahl Positiv ist und 1 ist, wenn die Zahl negativ ist. Dieses wird das Vorzeichenbit genannt.

+ +

Die Zahl 0 ist ein Integer, der komplett aus 0 Bits besteht.

+ +
0 (base 10) = 00000000000000000000000000000000 (base 2)
+
+ +

Die Zahl -1 ist ein Integer der komplett aus 1 Bits besteht.

+ +
-1 (base 10) = 11111111111111111111111111111111 (base 2)
+
+ +

Die Zahl -2147483648 (hexadezimale Repräsentation: -0x80000000) ist der Integer, welcher komplett aus 0 Bits besteht, außer dem ersten Bit (linkes Bit).

+ +
-2147483648 (base 10) = 10000000000000000000000000000000 (base 2)
+
+ +

Die Zahl 2147483647 (hexadezimale Repräsentation: -0x7fffffff) ist der Integer, welcher komplett aus 1 Bits besteht, außer dem ersten Bit (linkes Bit).

+ +
2147483647 (base 10) = 01111111111111111111111111111111 (base 2)
+
+ +

Die Zahlen -2147483648 und 2147483647 sind die minimalen und Maximalen Integers, die mit 32-Bit vorzeichenbehafteten Zahlen repräsentiert werden können.

+ +

Bitweise logische Operatoren

+ +

Konzeptionell arbeiten die bitweisen logischen Operatoren wie folgt:

+ + + +

& (Bitweises UND)

+ +

Führt die UND Operation auf jedem Bitpaar durch. a UND b ergibt 1, wenn beide a und b 1 sind. Die Wahrheitstabelle für den UND Operator ist:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
aba UND b
000
010
100
111
+ +
.    9 (Basis 10) = 00000000000000000000000000001001 (Basis 2)
+    14 (Basis 10) = 00000000000000000000000000001110 (Basis 2)
+                    --------------------------------
+14 & 9 (Basis 10) = 00000000000000000000000000001000 (Basis 2) = 8 (Basis 10)
+
+ +

Bitweises verUNDen jeder Zahl x mit 0 ergibt 0. Bitweises verUNDen jeder Zahl x mit -1 ergibt x.

+ +

| (Bitweises ODER)

+ +

Führt die ODER Operation auf jedem Bitpaar durch. a ODER b ergibt 1, wenn einer, a oder b, 1 sind. Die Wahrheitstabelle für den ODER Operator ist:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
aba ODER b
000
011
101
111
+ +
.    9 (Basis 10) = 00000000000000000000000000001001 (Basis 2)
+    14 (Basis 10) = 00000000000000000000000000001110 (Basis 2)
+                    --------------------------------
+14 | 9 (Basis 10) = 00000000000000000000000000001111 (Basis 2) = 15 (Basis 10)
+
+ +

Bitweises verODERn jeder Zahl x mit 0 ergibt x. Bitweises verODERn jeder Zahl x mit -1 ergibt -1.

+ +

^ (Bitweises XOR)

+ +

Führt die XOR Operation auf jedem Bitpaar durch. a XOR b ergibt 1, wenn sich a und b, unterscheiden. Die Wahrheitstabelle für den XOR Operator ist:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
aba XOR b
000
011
101
110
+ +
.    9 (Basis 10) = 00000000000000000000000000001001 (Basis 2)
+    14 (Basis 10) = 00000000000000000000000000001110 (Basis 2)
+                    --------------------------------
+14 ^ 9 (Basis 10) = 00000000000000000000000000000111 (Basis 2) = 7 (Basis 10)
+
+ +

Bitweises verXORn jeder Zahl x mit 0 ergibt x. Bitweises verXORn jeder Zahl x mit -1 ergibt ~x.

+ +

~ (Bitweise Negation)

+ +

Führt die Negationsoperation auf jedem Bit durch. NICHT a ergibt ergibt den invertierten Wert (d. h. das Einerkomplement) von a. Die Wahrheitstabelle für den Negationsoperator ist:

+ + + + + + + + + + + + + + + + +
aNICHT a
01
10
+ +
 9 (Basis 10) = 00000000000000000000000000001001 (Basis 2)
+                --------------------------------
+~9 (Basis 10) = 11111111111111111111111111110110 (Basis 2) = -10 (Basis 10)
+
+ +

Bitweises Negieren jeder Zahl x ergibt -(x + 1). Zum Beispiel ergibt ~-5 4.

+ +

Beispiel mit indexOf:

+ +
var str = 'rawr';
+var searchFor = 'a';
+
+// Das ist eine alternativer Weg um if (-1*str.indexOf('a') <= 0) zu tippen
+if (~str.indexOf(searchFor)) {
+  // searchFor is in the string
+} else {
+  // searchFor is not in the string
+}
+
+// Hier die Werte, die von (~str.indexOf(searchFor)) zurück gegeben werden
+// r == -1
+// a == -2
+// w == -3
+
+ +

Bitweise Verschiebeoperatoren

+ +

Die bitweisen Verschiebeoperatoren (shift Operatoren) haben zwei Operanden: Der erste ist der Anteil, der verschoben werden soll und der zweite ist die Anzahl der Positionen, um die der erste Operand verschoben werden soll. Die Richtung der Verschiebung wird durch den eingesetzten Operator festgelegt.

+ +

Verschiebeoperatoren konvertieren ihre Operanden in 32-Bit Integers in Bit-Endian Reihenfolge und geben als Resultat den gleichen Typ des linken Operanden zurück. Der rechte Operand sollte kleiner als 32 sein, aber wenn das nicht so ist, werden nur die kleinsten fünf Bits verwendet.

+ +

<< (Linksverschiebung)

+ +

Dieser Operator verschiebt den ersten Operand um die spezifizierte Anzahl von Bits nach links. Überflüssige Bits, die nach links verschoben wurden, werden verworfen. Von rechts wird mit 0-Bits aufgefüllt.

+ +

Zum Beispiel ergibt 9 << 2 36:

+ +
.    9 (Basis 10): 00000000000000000000000000001001 (Basis 2)
+                   --------------------------------
+9 << 2 (Basis 10): 00000000000000000000000000100100 (Basis 2) = 36 (Basis 10)
+
+ +

Bitweises Verschieben jeder Zahl x nach links mit y Bits ergibt x * 2 ** y.

+ +

>> (Vorzeichen propagierende Rechtsverschiebung)

+ +

Dieser Operator verschiebt den ersten Operand um die spezifizierte Anzahl von Bits nach rechts. Überflüssige Bits, die nach rechts verschoben wurden, werden verworfen. Kopien des linken Bits (Vorzeichenbits) werden von links hereingeschoben. Weil das neue Vorzeichenbit immer das selbe wie das alte Vorzeichenbit ist, ändert sich das linke Bit nicht. Daher kommt der Name "Vorzeichen propagierend" her.

+ +

Zum Beispiel ergibt 9 >> 2 2:

+ +
.    9 (base 10): 00000000000000000000000000001001 (base 2)
+                  --------------------------------
+9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
+
+ +

Likewise, -9 >> 2 yields -3, because the sign is preserved:

+ +
.    -9 (Basis 10): 11111111111111111111111111110111 (Basis 2)
+                    --------------------------------
+-9 >> 2 (Basis 10): 11111111111111111111111111111101 (Basis 2) = -3 (Basis 10)
+
+ +

>>> (Null füllende Rechtsverschiebung)

+ +

Dieser Operator verschiebt den ersten Operand um die spezifizierte Anzahl von Bits nach rechts. Überflüssige Bits, die nach rechts verschoben wurden, werden verworfen. Von link wird mit 0-Bits aufgefüllt. Das Vorzeichenbit wird 0, so dass das Ergebnis nie negativ ist.

+ +

Für nicht negative Zahlen ist das Ergebnis bei der Null füllenden Rechtsverschiebung und bei der Vorzeichen propagierenden Rechtsverschiebung das selbe. Zum Beispiel ergibt 9 >>> 2 2, das selbe wie 9 >> 2:

+ +
.     9 (Basis 10): 00000000000000000000000000001001 (Basis 2)
+                    --------------------------------
+9 >>> 2 (Basis 10): 00000000000000000000000000000010 (Basis 2) = 2 (Basis 10)
+
+ +

Jedoch ist das nicht der Fall für negative Zahlen. Zum Beispiel ergibt -9 >>> 2 1073741821, was sich unterschiedet von -9 >> 2 (was -3 ergibt):

+ +
.     -9 (Basis 10): 11111111111111111111111111110111 (Basis 2)
+                     --------------------------------
+-9 >>> 2 (Basis 10): 00111111111111111111111111111101 (Basis 2) = 1073741821 (Basis 10)
+
+ +

Beispiele

+ +

Flags und Bitmasken

+ +

Die bitweisen logischen Operatoren werden häufig eingesetzt, um Sequenzen von Flags zu erstellen, zu manipulieren und zu lesen, welche wie binäre Variablen sind. Variablen können statt dieser Sequenzen genutzt werden, aber binäre Flags verbrauchen weniger Speicher (um den Faktor 32).

+ +

Angenommen es gibt 4 Flags:

+ + + +

Diese Flags sind durch eine Sequenz von Bits repräsentiert: DCBA. Wenn ein Flag gesetzt wird, hat es den Wert 1. Wenn ein Flag geleert wird, hat es den Wert 0. Angenommen eine Variable flags hat den binären Wert 0101:

+ +
var flags = 5;   // binär 0101
+
+ +

Dieser Wert zeigt an:

+ + + +

Weil Bitweise Operatoren mit 32-Bit arbeiten, ist 0101 eigentlich 00000000000000000000000000000101, aber die führenden nullen können vernachlässigt werden, weil sie keine Informationen enthalten.

+ +

Eine Bitmaske ist eine Sequenz von Bits, die Flags manipulieren und/oder lesen kann. Typisch ist es, dass eine "primitive" Bitmaske für jedes Flag definiert ist:

+ +
var FLAG_A = 1; // 0001
+var FLAG_B = 2; // 0010
+var FLAG_C = 4; // 0100
+var FLAG_D = 8; // 1000
+
+ +

Neue Bitmasken können erstellt werden, indem bitweise logische Operatoren auf den primitiven Bitmasken angewendet werden. Zum Beispiel kann die Bitmaske 1011 mit VerODERn von FLAG_A, FLAG_B und FLAG_D erstellt werden:

+ +
var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011
+
+ +

Individuelle Flagwerte können durch das VerUNDen mit einer Bitmaske extrahiert werden, wobei jedes Bit mit dem Wert eins das korrespondierende Flag extrahiert. Die Bitmaske wirft nicht relevante Flags heraus, indem Nullen verUNDet werden (daher der Begriff "Bitmaske"). Zum Beispiel kann die Bitmaske 0100 genutzt werden, um zu sehen, ob Flag C gesetzt ist:

+ +
// Wenn man eine Katze besitzt
+if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true
+   // tu irgendetwas
+}
+
+ +

Eine Bitmaske mit mehreren gesetzten Flags funktioniert wie ein "entweder/oder". Zum Beispiel sind die beiden folgenden Ansätze äquivalent:

+ +
// wenn man eine Fledermaus besitzt oder eine Katze besitzt
+// (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true
+if ((flags & FLAG_B) || (flags & FLAG_C)) {
+   // do stuff
+}
+
+ +
// wenn man eine Fledermaus oder eine Katze besitzt
+var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110
+if (flags & mask) { // 0101 & 0110 => 0100 => true
+   // do stuff
+}
+
+ +

Flags können mit VerODERung mit einer Bitmaske gesetzt werden, wobei jedes Bit in der Bitmaske mit dem Wert 1 wird das korrespondierende Flag setzen, wenn es noch nicht gesetzt ist. Zum Beispiel kann die Bitmaske 1100 benutzt werden, um die Flags C und D zu setze:

+ +
// ja, man besitzt eine Katze und eine Ente
+var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100
+flags |= mask;   // 0101 | 1100 => 1101
+
+ +

Flags können mit VerUNDung mit einer Bitmaske geleert werden, wobei jedes Bit in der Bitmaske mit dem Wert 0 wird das korrespondierende Flag geleert, wenn es noch nicht geleert ist. Die Bitmaske dafür kann mit Negation primitiver Bitmasken erstellt werden Zum Beispiel kann die Bitmaske 1010 benutzt werden, um die Flags A und C zu leeren:

+ +
// no, we don't have an ant problem or own a cat
+var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010
+flags &= mask;   // 1101 & 1010 => 1000
+
+ +

The mask could also have been created with ~FLAG_A & ~FLAG_C (De Morgan's law):

+ +
// nein, mat hat kein Problem mit Ameisen und man besitzt keine Katze
+var mask = ~FLAG_A & ~FLAG_C;
+flags &= mask;   // 1101 & 1010 => 1000
+
+ +

Flags können mit VerXORung mit einer Bitmaske umgeschaltet werden, wobei jedes Bit in der Bitmaske mit dem Wert 1 wird das korrespondierende Flag umschaltet. Zum Beispiel kann die Bitmaske 0110 benutzt werden, um die Flags B und C umzuschalten:

+ +
// wenn man keine Fledermaus besitzt und und jetzt eine bekommt
+// and wenn man eine hat und die Fledermaus verabschiedet
+// das gleiche für eine Katze
+var mask = FLAG_B | FLAG_C;
+flags = flags ^ mask;   // 1100 ^ 0110 => 1010
+
+ +

Alle Flags können mit dem Negationsoperator umgedreht werden:

+ +
// entering parallel universe...
+flags = ~flags;    // ~1010 => 0101
+
+ +

Konvertierungsbeispiele

+ +

Konvertierung eines binär String zu einer dezimal Number:

+ +
var sBinString = '1011';
+var nMyNumber = parseInt(sBinString, 2);
+alert(nMyNumber); // prints 11, i.e. 1011
+
+ +

Konvertierung einer dezimal Number zu einem binär String:

+ +
var nMyNumber = 11;
+var sBinString = nMyNumber.toString(2);
+alert(sBinString); // prints 1011, i.e. 11
+
+ +

Bitmaskenerstellung automatisieren

+ +

Man kann, wie folgt, mehrere Masken von einer Menge von Boolean Werten erstellen:

+ +
function createMask() {
+  var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length;
+  for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++);
+  return nMask;
+}
+var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011
+var mask2 = createMask(false, false, true); // 4, i.e.: 0100
+var mask3 = createMask(true); // 1, i.e.: 0001
+// etc.
+
+alert(mask1); // prints 11, i.e.: 1011
+
+ +

Umgedrehter Algorithmus: Ein Array von Booleanen von einer Bitmaske

+ +

Wenn man ein Array mit Boolean Werten von einer Bitmaske haben möchte, kann man folgenden Code benutzen:

+ +
function arrayFromMask(nMask) {
+  // nMask must be between -2147483648 and 2147483647
+  if (nMask > 0x7fffffff || nMask < -0x80000000) {
+    throw new TypeError('arrayFromMask - out of range');
+  }
+  for (var nShifted = nMask, aFromMask = []; nShifted;
+       aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1);
+  return aFromMask;
+}
+
+var array1 = arrayFromMask(11);
+var array2 = arrayFromMask(4);
+var array3 = arrayFromMask(1);
+
+alert('[' + array1.join(', ') + ']');
+// prints "[true, true, false, true]", i.e.: 11, i.e.: 1011
+
+ +

Man kann beide Algorithmen gleichzeitig testen:

+ +
var nTest = 19; // our custom mask
+var nResult = createMask.apply(this, arrayFromMask(nTest));
+
+alert(nResult); // 19
+
+ +

Nur aus didaktischen Gründen (weil dort die Number.toString(2) Methode ist), zeigen wir, wie es möglich ist den arrayFromMask Algorithmus zu verändern, um einen String mit der Binärrepräsentation der Number statt eines Arrays von Booleanen:

+ +
function createBinaryString(nMask) {
+  // nMask must be between -2147483648 and 2147483647
+  for (var nFlag = 0, nShifted = nMask, sMask = ''; nFlag < 32;
+       nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1);
+  return sMask;
+}
+
+var string1 = createBinaryString(11);
+var string2 = createBinaryString(4);
+var string3 = createBinaryString(1);
+
+alert(string1);
+// prints 00000000000000000000000000001011, i.e. 11
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition.
{{SpecName('ES5.1', '#sec-11.7')}}{{Spec2('ES5.1')}}Definiert in verschiedenen Abschnitten der Spezifikation: Bitwise NOT operator, Bitwise shift operators, Binary bitwise operators
{{SpecName('ES6', '#sec-bitwise-shift-operators')}}{{Spec2('ES6')}}Definiert in verschiedenen Abschnitten der Spezifikation: Bitwise NOT operator, Bitwise shift operators, Binary bitwise operators
{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}{{Spec2('ESDraft')}}Definiert in verschiedenen Abschnitten der Spezifikation: Bitwise NOT operator, Bitwise shift operators, Binary bitwise operators
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.operators.bitwise")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/class/index.html b/files/de/web/javascript/reference/operators/class/index.html new file mode 100644 index 0000000000..1cc8a647e3 --- /dev/null +++ b/files/de/web/javascript/reference/operators/class/index.html @@ -0,0 +1,157 @@ +--- +title: Der class-Ausdruck +slug: Web/JavaScript/Reference/Operators/class +tags: + - Classes + - ECMAScript 2015 + - Expression + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/class +--- +
{{jsSidebar("Operators")}}
+ +

Der class-Ausdruck ist eine Methode zur Definition einer Klasse in ECMAScript 2015. Ähnlich wie beim {{jsxref("Operators/function", "function-Ausdruck")}} kann der class-Ausdruck benannt oder unbenannt sein. Ist er benannt, so gilt der Name nur lokal im Klassenkörper. JavaScript-Klassen nutzen prototyp-basierte Vererbung.

+ +

Syntax

+ +
var MyClass = class [className] [extends] {
+  // Klassenkörper
+};
+ +

Beschreibung

+ +

Ein class-Ausdruck hat die gleiche Syntax wie die {{jsxref("Statements/class", "class-Anweisung (Deklaration)")}}. Jedoch kann mit dem class-Ausdruck der Klassenname ("binding identifier") ausgelassen werden, was mit der class-Anweisung nicht möglich ist. Zusätzlich erlaubt ein class-Ausdruck das erneute Deklarieren einer Klasse, ohne dass ein Fehler wie bei der {{jsxref("Statements/class", "class-Deklaration")}} auftritt. Die constructor-Eigenschaft ist optional. Zudem wird der typeof-Operator bei so deklarierten Klassen immer den Typ "function" zurückgeben.

+ +

Genau wie mit class-Anweisungen wird der Körper der Klasse im {{jsxref("Strict_mode", "strict mode")}} ausgeführt.

+ +
'use strict';
+var Foo = class {}; // constructor-Eigenschaft ist optional
+var Foo = class {}; // erneute Deklaration is erlaubt
+
+typeof Foo;      // gibt "function" zurück
+typeof class {}; // gibt "function" zurück
+
+Foo instanceof Object;   // true
+Foo instanceof Function; // true
+class Foo {}; // erzeugt einen TypeError, weil eine erneute Deklaration nicht erlaubt ist
+
+ +

Beispiele

+ +

Ein einfacher Klassenausdruck

+ +

Dies ist nur ein einfacher anonymer class-Ausdruck der über die "Foo"-Variable angesprochen werden kann.

+ +
var Foo = class {
+  constructor() {}
+  bar() {
+    return "Hello World!";
+  }
+};
+
+var instance = new Foo();
+instance.bar(); // "Hello World!"
+Foo.name; // ""
+
+ +

Benannte class-Ausdrücke

+ +

Wenn Sie innerhalb des Klassenkörpers auf die aktuelle Klasse verweisen möchten, können Sie einen benannten class-Ausdruck verwenden. Dieser Name ist nur im Bereich der Klasse selbst gültig und sichtbar.

+ +
var Foo = class NamedFoo {
+  constructor() {}
+  whoIsThere() {
+    return NamedFoo.name;
+  }
+}
+var bar = new Foo();
+bar.whoIsThere(); // "NamedFoo"
+NamedFoo.name; // ReferenceError: NamedFoo is not defined
+Foo.name; // "NamedFoo"
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2015')}}erstmalige Definition
{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ESDraft')}} 
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunktionChromeFirefox (Gecko)Internet ExplorerOperaSafari
grundlegende Unterstützung{{CompatChrome(42.0)}}{{CompatGeckoDesktop(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FunktionAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
grundlegende Unterstützung{{CompatNo}}{{CompatChrome(42.0)}}{{CompatGeckoDesktop(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/comma_operator/index.html b/files/de/web/javascript/reference/operators/comma_operator/index.html new file mode 100644 index 0000000000..be04c939a6 --- /dev/null +++ b/files/de/web/javascript/reference/operators/comma_operator/index.html @@ -0,0 +1,107 @@ +--- +title: Kommaoperator +slug: Web/JavaScript/Reference/Operators/Comma_Operator +tags: + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Operators/Comma_Operator +--- +
{{jsSidebar("Operators")}}
+ +

Der Kommaoperator wertet jeden Operanden (von links nach rechts) aus und gibt den Wert des letzten Operanden zurück.

+ +
{{EmbedInteractiveExample("pages/js/expressions-commaoperators.html")}}
+ + + +

Syntax

+ +
ausdruck1, ausdruck2, ausdruck3...
+ +

Parameter

+ +
+
ausdruck1, ausdruck2, ausdruck3...
+
Beliebige Ausdrücke.
+
+ +

Beschreibung

+ +

Der Kommaoperator kann eingesetzt werden, um mehrere Ausdrücke an einer Stelle zu verwenden, die nur einen Ausdruck erwartet. Der häufigste Anwendungsfall für diesen Operator ist das Bereitstellen mehrerer Parameter in einer for Schleife.

+ +

Beispiele

+ +

Gegeben ist a in einem 2-dimensionalen Array mit 10 Elementen auf jeder Seite. Der folgende Code verwendet den Kommaoperator um zwei Variablen auf einmal hochzuzählen.

+ +

Der folgende Code gibt in der Konsole die Werte der diagonalen Elemente im Array aus:

+ +
for (var i = 0, j = 9; i <= 9; i++, j--)
+  console.log('a[' + i + '][' + j + '] = ' + a[i][j]);
+ +

Zu Beachten ist, dass das Komma in Zuweisungen, wie etwa bei der var Deklaration, nicht den erwarteten Effekt des Kommaoperators zu haben scheint, da Zuweisungen nicht in einem Ausdruck existieren. Im folgenden Beispiel wird a auf den Wert von b = 3 gesetzt (welcher 3 ist), aber c = 4 wird dennoch ausgewertet und dessen Ergebnis wird in der Konsole ausgegeben (i.e., 4). Das ist auf die Operator precedence zurückzuführen.

+ +
// Zu Beachten ist, dass nachfolgend globals erstellt werden,
+// die im Strict Mode nicht zulässig sind.
+
+a = b = 3, c = 4; // Rückgabe von 4 in der Konsole
+console.log(a); // 3 (ganz links)
+
+x = (y = 5, z = 6); // Rückgabe von 6 in der Konsole
+console.log(x); // 6 (ganz rechts)
+
+ +

Der Kommaoperator ist völlig anders als das Komma in Arrays, Objekten, Funktionsargumenten und -parametern.

+ +

Verarbeitung und dann zurückgeben

+ +

Ein weiteres Beispiel für die Verwendung des Kommaoperators ist die Verarbeitung vor der Rückgabe. Wie oben beschrieben, wird das letzte Element zurückgegeben, jedoch auch alle weiteren werden verarbeitet. So könnte folgendes gemacht werden:

+ +
function myFunc() {
+  var x = 0;
+
+  return (x += 1, x); // ist das Gleiche wie return ++x;
+}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES1', '#sec-11.14', 'Comma operator')}}{{Spec2('ES1')}}Initiale Definition
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.operators.comma")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/conditional_operator/index.html b/files/de/web/javascript/reference/operators/conditional_operator/index.html new file mode 100644 index 0000000000..895a2c5d55 --- /dev/null +++ b/files/de/web/javascript/reference/operators/conditional_operator/index.html @@ -0,0 +1,190 @@ +--- +title: Bedingter (ternärer) Operator +slug: Web/JavaScript/Reference/Operators/Conditional_Operator +tags: + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator +--- +
{{jsSidebar("Operators")}}
+ +

Der bedingte (ternäre) Operator ist der einzige Operator in JavaScript, der drei Operanden hat. Er wird häufig als Kurzform eines if Statements genutzt.

+ +
{{EmbedInteractiveExample("pages/js/expressions-conditionaloperators.html")}}
+ + + +

Syntax

+ +
Bedingung ? Ausdruck1: Ausdruck2
+ +

Parameter

+ +
+
Bedingung (oder Bedingungen)
+
Ein Ausdruck, der zu true oder false ausgewertet wird.
+
+ +
+
Ausdruck1, Ausdruck2
+
Ausdrücke mit Werten eines beliebigen Typs.
+
+ +

Beschreibung

+ +

Wenn Bedingung zu true ausgewertet wird, wird Ausdruck1 zurückgegeben; andernfalls wird Ausdruck2 zurückgegeben.

+ +

Ein einfaches Beispiel zeigt dieser Test, ob man in den USA alt genug ist, um Alkohol zu trinken.

+ +
var age = 26;
+var canDrinkAlcohol = (age >= 21) ? "True, 21 or older" : "False, under 21";
+console.log(canDrinkAlcohol); // "True, 21 or older"
+
+ +

Ein anderes Beispiel ist die Anzeige von verschiedenen Nachrichten, abhängig von der isMember Variable:

+ +
"The fee is " + (isMember ? "$2.00" : "$10.00")
+
+ +

Man kann auch Variablen abhängig von einem ternären Ergebnis zuweisen:

+ +
var elvisLives = Math.PI > 4 ? "Yep" : "Nope";
+ +

Mehrere ternäre Auswertungen hintereinander sind ebenfalls möglich (Beachte: der ternäre Operator ist rechtsassoziativ):

+ +
var firstCheck = false,
+    secondCheck = false,
+    access = firstCheck ? "Access denied" : secondCheck ? "Access denied" : "Access granted";
+
+console.log(access); // logt "Access granted"
+ +

Man kann ihn auch wie ein If Statement mit mehreren Bedingungen verwenden

+ +
var condition1 = true,
+    condition2 = false,
+    access = condition1 ? (condition2 ? "true true" : "true false") : (condition2 ? "false true" : "false false");
+
+console.log(access); // logt "true false"
+ +

Zu beachten ist, dass die Klammern nicht notwendig sind und das Ergebnis nicht verändern. Sie sind zur Übersichtshilfe vorhanden.

+ +

Man kann den ternären Operator alleinstehend verwenden, um verschiedene Operationen auszuführen:

+ +
var stop = false, age = 16;
+
+age > 18 ? location.assign("continue.html") : stop = true;
+
+ +

Man kann auch mehr als eine Operation pro Fall ausführen, indem die Operationen mit einem Komma getrennt und geklammert werden:

+ +
var stop = false, age = 23;
+
+age > 18 ? (
+    alert("OK, you can go."),
+    location.assign("continue.html")
+) : (
+    stop = true,
+    alert("Sorry, you are much too young!")
+);
+
+ +

Man kann auch mehrere Operationen während einer Zuweisung durchführen. In diesem Fall wird der letzte von Kommas getrennte Wert als Zuweisungswert benutzt.

+ +
var age = 16;
+
+var url = age > 18 ? (
+    alert("OK, you can go."),
+    // alert liefert "undefined" zurück, wird aber ignoriert
+    // weil es nicht der letzte Ausdruck in der Klammer ist.
+    "continue.html" // dieser Wert wird zugewiesen, wenn der
+                    //Wert > 18 ist.
+) : (
+    alert("You are much too young!"),
+    alert("Sorry :-("),
+    // etc. etc.
+    "stop.html" // dieser Wert wird zugewiesen wenn "age" <= 18 ist;
+
+location.assign(url); // "stop.html"
+ +

Rückgabe durch ternäre Statements

+ +

Der ternäre Operator ist nützlich für Funktionen, die einen Rückgabewert abhängig von einem if/else Statement zurückgeben.

+ +
var func1 = function ( .. ) {
+  if (condition1) { return value1; }
+  else { return value2; }
+}
+
+var func2 = function ( .. ) {
+  return condition1 ? value1 : value2;
+}
+ +

Ein häufiger Weg, um das legale Alter zum Trinken von Alkohol in den USA zurückzugeben:

+ +
function canDrinkAlcohol(age) {
+  return (age > 21) ? "True, over 21" : "False, under 21";
+}
+var output = canDrinkAlcohol(26);
+console.log(output); // "True, over 21"
+ +

Ein guter Weg, um herauszufinden, ob der ternäre Operator ein guter Ersatz für ein if/else Statement ist, ist wenn das return Schlüsselwort mehrfach eingesetzt wird und in jedem Block der einzige Ausdruck ist.

+ +

Beim Aufteilen des ternären Operators in mehrere Zeilen und extra Leerzeichen, kann dieser ein sehr sauberer Ersatz für eine längere Serie von if/else Statements sein. Dadurch wird ein leichter Weg für logisch gleiche Ausdrücke geschaffen:

+ +
var func1 = function ( .. ) {
+  if (condition1) { return value1; }
+  else if (condition2) { return value2; }
+  else if (condition3) { return value3; }
+  else { return value4; }
+}
+
+var func2 = function ( .. ) {
+  return condition1 ? value1
+       : condition2 ? value2
+       : condition3 ? value3
+       :              value4;
+}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}{{Spec2('ES5.1')}}
{{SpecName('ES1', '#sec-11.12', 'The conditional operator')}}{{Spec2('ES1')}}Initiale Definition. Implementiert in JavaScript 1.0.
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.operators.conditional")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/dekrement/index.html b/files/de/web/javascript/reference/operators/dekrement/index.html new file mode 100644 index 0000000000..16b185b35c --- /dev/null +++ b/files/de/web/javascript/reference/operators/dekrement/index.html @@ -0,0 +1,82 @@ +--- +title: Dekrement (--) +slug: Web/JavaScript/Reference/Operators/Dekrement +tags: + - Dekrement + - Dekrement-Operator + - Dekrementieren +translation_of: Web/JavaScript/Reference/Operators/Decrement +--- +
{{jsSidebar("Operators")}}
+ +

Der Dekrement-Operator (--) dekrementiert den Operanden um eins, zieht als eins vom Operanden ab und gibt einen Wert zurück.

+ +
{{EmbedInteractiveExample("pages/js/expressions-decrement.html")}}
+ +
+ + + +

Syntax

+ +
Operator: x-- or --x
+
+ +

Description

+ +

Wenn der Dekrement-Operator als Postfix benutzt wird, also der Operator hinter dem Operanden steht (z.B. x--), wird der Operand um eins reduziert aber der Wert vor dem Dekrementieren zurückgegeben. 

+ +

Wird der Dekrement-Operator als Präfix genutzt, steht also der Operator vor dem Operanden (z. B. --x), wird der Operator um eins reduziert und der Wert nach dieser Dekrementierung zurückgegeben.

+ +

Examples

+ +

Postfix decrement

+ +
let x = 3;
+y = x--;
+
+// y = 3
+// x = 2
+
+ +

Prefix decrement

+ +
let a = 2;
+b = --a;
+
+// a = 1
+// b = 1
+
+ +

Specifications

+ + + + + + + + + + +
Specification
{{SpecName('ESDraft', '#sec-postfix-decrement-operator', 'Decrement operator')}}
+ +

Browser compatibility

+ + + +

{{Compat("javascript.operators.decrement")}}

+ +

See also

+ + diff --git a/files/de/web/javascript/reference/operators/delete/index.html b/files/de/web/javascript/reference/operators/delete/index.html new file mode 100644 index 0000000000..dff87c8998 --- /dev/null +++ b/files/de/web/javascript/reference/operators/delete/index.html @@ -0,0 +1,295 @@ +--- +title: delete Operator +slug: Web/JavaScript/Reference/Operators/delete +tags: + - JavaScript + - Memory Management + - Object + - Operator + - Property + - Reference + - Release + - Unary + - delete +translation_of: Web/JavaScript/Reference/Operators/delete +--- +
{{jsSidebar("Operators")}}
+ +

Der JavaScript delete-Operator entfernt eine Eigenschaft eines Objekts. Wenn keine weitere Referenz auf dieselbe Eigenschaft mehr existiert, wird diese automatisch freigegeben.

+ +
{{EmbedInteractiveExample("pages/js/expressions-deleteoperator.html")}}
+ + + +

Syntax

+ +
delete Ausdruck
+ +

wobei Ausdruck zu eine Referenz auf eine Eigenschaft ausgewertet werden sollte, z. B.:

+ +
delete object.property
+delete object['property']
+
+ +

Parameter

+ +
+
object
+
Der Name eines Objekts oder ein Ausdruck der zu einem Objekt ausgewertet wird.
+
property
+
Die zu löschende Eigenschaft.
+
+ +

Rückgabewert

+ +

true für alle Fälle, außer wenn die Eigenschaft eine eigene nicht konfigurierbare Eigenschaft ist, in diesem Fall wird im nicht strict Modus false zurückgegeben.

+ +

Fehler

+ +

Erzeugt einen {{jsxref("Global_objects/SyntaxError")}} im strict Modus, wenn die Eigenschaft eine eigene nicht konfigurierbare Eigenschaft ist.

+ +

Beschreibung

+ +

Anders als es allgemein üblich ist, hat der delete Operator nichts mit dem Freigeben von Speichers zu tun. Speicherverwaltung wird indirekt über fehlende Referenzen gemacht, dazu mehr Details auf der Seite Speicherverwaltung.

+ +

Der delete Operator entfernt eigene gegebene Eigenschaft von einem Objekt. Ist dieses Erfolgreich, wird true zurückgegeben, andernfalls false. Jedoch ist es wichtig die folgenden Szenarien zu bedenken:

+ + + +

Der folgende Ausschnitt enthält ein einfaches Beispiel:

+ +
var Employee = {
+  age: 28,
+  name: 'abc',
+  designation: 'developer'
+}
+
+console.log(delete Employee.name);  // gibt true zurück
+console.log(delete Employee.age);   // gibt true zurück
+
+// Wenn versucht wird eine Eigenschaft zu löschen,
+// die nicht existiert, wird true zurückgegeben
+console.log(delete Employee.salery) // gibt true zurück
+ +

Nicht konfigurierbare Eigenschaften

+ +

Wenn eine Eigenschaft als nicht konfigurierbar markiert ist, hat delete keinen Effekt und wird false zurückgeben. Im strict Modus wird es zu einem SyntaxError kommen.

+ +
var Employee = {};
+Object.defineProperty(Employee, 'name', {configurable: false});
+
+console.log(delete Employee.name);  // gibt false zurück
+ +

{{jsxref("Statements/var","var")}}, {{jsxref("Statements/let","let")}} und {{jsxref("Statements/const","const")}} erstellen nicht konfigurierbare Eigenschaften, die nicht mit dem delete Operator gelöscht werden können.

+ +
var nameOther = 'XYZ';
+
+// Man kann die globale Eigenschaft mit folgenden erreichen:
+Object.getOwnPropertyDescriptor(window, 'nameOther');
+
+// output: Object {value: "XYZ",
+//                  writable: true,
+//                  enumerable: true,
+//                  configurable: false}
+
+// Wenn "nameOther" mit dem Schlüsselwort var hinzugefügt
+// wird, ist sie als nicht konfigurierbar markiert
+
+delete nameOther;   // gibt false zurück
+
+ +

Im strict Modus wird diese zu einem Fehler führen.

+ +

Strict vs. nicht strict Modus

+ +

Wenn im strict Mode delete direkt auf einer Referenz einer Variablen, eines Funktionsargumentes oder eines Funktionsnamens genutzt wird, wird ein {{jsxref("SyntaxError")}} erzeugt.

+ +

Jede Variable, die mit var definiert wird, wird als nicht konfigurierbar markiert. Im folgenden Beispiel ist salary nicht konfigurierbar und kann nicht gelöscht werden. Im nicht strict Modus wird der delete Operator false zurückgeben.

+ +
function Employee() {
+  delete salary;
+  var salary;
+}
+
+Employee();
+ +

Mal sehen, wie sich der selbe Code im strict Modus verhält. Statt dem Zurückgeben von false, wird das Statement zu einem SyntaxError führen.

+ +
"use strict";
+
+function Employee() {
+  delete salary;  // SyntaxError
+  var salary;
+}
+
+Employee();
+
+// Genauso führt jeder direkte Zugriff auf
+// eine Funktion mit delete zu einem SyntaxError
+
+funciton DemoFunction() {
+  // etwas Code
+}
+
+delete DemoFunction; // SyntaxError
+ +

Beispiele

+ +
// Die Eigenschaft adminName im globalen Gültigkeitsbereich erstellen
+adminName = 'xyz';
+
+// Die Eigenschaft empCount im globalen Gültigkeitsbereich erstellen
+// Weil var genutzt wurde, ist diese als nicht konfigurierbar markiert. Das selbe gibt auch für let und const.
+var empCount = 43;
+
+EmployeeDetails = {
+  name: 'xyz',
+  age: 5,
+  designation: 'Developer'
+};
+
+// adminName ist eine Eigenschaft im globalen Gültigkeitsbereich.
+// Sie kann gelöscht werden, weil sie nicht mit var erstellt wurde.
+// Demnach ist sie konfigurierbar.
+delete adminName     // gibt true zurück
+
+// Im Gegensatz dazu ist empCount nicht konfigurierbar,
+// weil var eingesetzt wurde
+delete empCount;     // gibt false zurück
+
+// delete kann für das Löschen von Eigenschaften von Objekte eingesetzt werden.
+delete EmployeeDetails.name // gibt true zurück
+
+// Auch wenn die Eigenschaft nicht existiert, wird "true" zurückgegeben.
+delete EmployeeDetails.salary; // gibt true zurück
+
+// delete hat keinen Effekt auf statische Eigenschaften von Standardobjekten.
+delete Math.PI; // gibt false zurück
+
+// EmployeeDetails ist eine Eigenschaft im globalen Gültigkeitsbereich.
+// Weil es ohne "var" definiert wurde, ist es als Konfigurierbar markiert.
+delete EmployeeDetails;  // gibt true zurück
+
+function f() {
+  var z = 44;
+
+  // delete hat keinen Effekt auf lokale Variablen
+  delete z;     // returns false
+}
+
+ +

delete und die Prototypenkette

+ +

Im folgenden Beispiel löschen wir eine eigene Eigenschaft eines Objektes, während ein Eigenschaft mit dem selben Namen in der Prototypenkette vorhanden ist:

+ +
function Foo(){
+  this.bar = 10;
+}
+
+Foo.prototype.bar = 42;
+
+var foo = new Foo();
+
+// gibt true zurück, weil die eigene Eigenschaft
+// vom foo Objekt gelöscht wird.
+delete foo.bar;
+
+// foo.bar ist weiter verfügbar, weil es
+// in der Prototypenkette verfügbar ist.
+console.log(foo.bar);
+
+// Löschen der Eigenschaft auf dem Prototypen
+delete Foo.prototype.bar;
+
+// gibt "undefined" aus, weil die Eigenschaft
+// nicht länger vererbt wird.
+console.log(foo.bar);
+ +

Arrayelemente löschen

+ +

Wenn ein Arrayelement gelöscht wird, hat das keinen Effekt auf die Arraylänge. Das funktioniert nur, wenn man das letzte Arrayelement lösche.

+ +

Wenn der delete Operator ein Arrayelement löscht, ist das Element nicht mehr länger im Array. Im folgenden Beispiel wird trees[3] mit delete gelöscht.

+ +
var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
+delete trees[3];
+if (3 in trees) {
+    // das wird nicht ausgeführt
+}
+ +

Wenn ein Arrayelement existent sein soll, aber den Wert undefined haben soll, benutzt man undefined statt dem delete Operator. Im folgenden Beispiel bekommt trees[3] den Wert undefined zugewiesen, aber das Arrayelement existiert noch:

+ +
var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
+trees[3] = undefined;
+if (3 in trees) {
+    // das wird ausgeführt
+}
+ +

Wenn stattdessen ein Arrayelement gelöscht werden soll, wobei auch der Inhalt des Arrays geändert werden soll, so benutzt man die {{jsxref("Array.splice", "splice")}} Methode. Das folgende Beispiel entfernt trees[3] komplett vom Array mit dem Einsatz von {{jsxref("Array.splice", "splice")}}:

+ +
var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
+trees.splice(3, 1);
+console.log(trees); // ["redwood", "bay", "cedar", "maple"];
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ESDraft', '#sec-delete-operator', 'The delete Operator')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-delete-operator', 'The delete Operator')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-11.4.1', 'The delete Operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES1', '#sec-11.4.1', 'The delete Operator')}}{{Spec2('ES1')}}Initiale Definition. Implementiert in JavaScript 1.2.
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.operators.delete")}}

+ +

Browserübergeifende Hinweise

+ +

Obwohl ECMAScript die Iterationsreihenfolge von Objekten, die von der Implementierung abhängig ist, vornimmt, scheint es, dass alle gängigen Browser eine Iterationsreihenfolge basierend auf der frühesten hinzugefügten Eigenschaft unterstützen (zumindest für Eigenschaften, die nicht auf dem Prototyp basieren). Wenn jedoch bei Internet Explorer delete für eine Eigenschaft verwendet wird, führt dies zu verwirrendem Verhalten und verhindert, dass andere Browser einfache Objekte wie Objektliterale als geordnete assoziative Arrays verwenden. Wenn im Explorer der Wert der Eigenschaft tatsächlich auf undefiniert festgelegt ist, wird die Eigenschaft, wenn sie später eine Eigenschaft mit demselben Namen zurückgibt, an der alten Position iteriert - nicht am Ende der Iterationssequenz, wie beim löschte und wieder einfügen der Eigenschaft erwartet.

+ +

Wenn man also ein geordnetes assoziatives Array in einer browserübergreifenden Umgebung simulieren möchten, muss man entweder zwei separate Arrays verwenden (eines für die Schlüssel und das andere für die Werte) oder ein Array von Objekten mit einer einzigen Eigenschaft erstellen. etc.

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/destrukturierende_zuweisung/index.html b/files/de/web/javascript/reference/operators/destrukturierende_zuweisung/index.html new file mode 100644 index 0000000000..1ece290e90 --- /dev/null +++ b/files/de/web/javascript/reference/operators/destrukturierende_zuweisung/index.html @@ -0,0 +1,404 @@ +--- +title: Destrukturierende Zuweisung +slug: Web/JavaScript/Reference/Operators/Destrukturierende_Zuweisung +tags: + - Destructuring + - ECMAScript 2015 + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment +--- +
{{jsSidebar("Operators")}}
+ +

Die destrukturierende Zuweisung ermöglicht es, Daten aus Arrays oder Objekten zu extrahieren, und zwar mit Hilfe einer Syntax, die der Konstruktion von Array- und Objekt-Literalen nachempfunden ist.

+ +
{{EmbedInteractiveExample("pages/js/expressions-destructuringassignment.html")}}
+ + + +

Syntax

+ +
var a, b, rest;
+[a, b] = [10, 20];
+console.log(a); // 10
+console.log(b); // 20
+
+[a, b, ...rest] = [10, 20, 30, 40, 50];
+console.log(a); // 10
+console.log(b): // 20
+console.log(rest); // [30, 40, 50]
+
+({ a, b } = { a: 10, b: 20 });
+console.log(a); // 10
+console.log(b); // 20
+
+
+// Stage 3 Vorschlag
+({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40 });
+console.log(a); // 10
+console.log(b); // 20
+console.log(rest); // {c: 30, d: 40}
+
+ +

Beschreibung

+ +

Die Objekt- und Array-Literal Ausdrücke stellen einen einfachen Weg für die Erstellung von ad hoc Datenpaketen zur Verfügung.

+ +
var x = [1, 2, 3, 4, 5];
+ +

Die destrukturierende Zuweisung nutzt eine ähnliche Syntax, aber auf der linken Seite der Zuweisung, um zu definieren, welche Werte von der Quellvariablen ausgepackt werden muss.

+ +
var x = [1, 2, 3, 4, 5];
+var [y, z] = x;
+console.log(y); // 1
+console.log(z); // 2
+
+ +

Diese Fähigkeit ist so ähnlich wie in den Sprachen Perl und Python.

+ +

Array-Destrukturierung

+ +

Einfaches Variablenzuweisung

+ +
var foo = ['one', 'two', 'three'];
+
+var [one, two, three] = foo;
+console.log(one); // "one"
+console.log(two); // "two"
+console.log(three); // "three"
+
+ +

Zuweisung separat von Deklaration

+ +

Eine destrukturierende Zuweisung kann ohne Deklaration im Zuweisungsstatement vorgenommen werden.

+ +
var a, b;
+
+[a, b] = [1, 2];
+console.log(a); // 1
+console.log(b); // 2
+ +

Standardwerte

+ +

Einer Variablen kann ein Standardwert zugewiesen werden, welcher greift, wenn der Wert im Fall vom auspacken des Arrays undefined ist.

+ +
var a, b;
+
+[a=5, b=7] = [1];
+console.log(a); // 1
+console.log(b); // 7
+ +

Variablen tauschen

+ +

Zwei Variablenwerte können mit destrukturierenden Zuweisungen vertauscht werden.

+ +

Ohne destrukturierende Zuweisung benötigt man für den Tausch zweier Werte eine temporäre Variable (oder, in manchen Low-level Sprachen, den XOR-swap Trick).

+ +
var a = 1;
+var b = 3;
+
+[a, b] = [b, a];
+console.log(a); // 3
+console.log(b); // 1
+ +

Array von Funktion zurückgeben und einlesen

+ +

Es ist immer möglich einen Array von einer Funktion zurückzugeben. Destrukturierung kann mit dem Arrayrückgabewert verwendet werden um mehrerer Werte auszuwählen.

+ +

In diesem Beispiel gibt f() den Wert [1, 2] zurück, welcher in einer Zeile mittels Destrukturierung eingelesen werden kann.

+ +
function f() {
+  return [1, 2];
+}
+
+var a, b;
+[a, b] = f();
+console.log(a); // 1
+console.log(b); // 2
+
+ +

Rückgabewerte teilweise ignorieren

+ +

Man kann auch Rückgabewerte, an denen man nicht interessiert ist, ignorieren:

+ +
function f() {
+  return [1, 2, 3];
+}
+
+var [a, , b] = f();
+console.log("A ist " + a + " B ist " + b);
+
+ +

Nach Ausführung dieses Codes ist a =1 und b = 3. Der Wert 2 wird ignoriert. Auf diese Art kann man jegliche (auch alle) zurückgegebene Werte ignorieren. Zum Beispiel:

+ +
[,,] = f();
+ +

Den Rest eines Arrays einer Variablen zuweisen

+ +

Wenn ein Array destrukturiert wird, kann man beim Auspacken den restlichen Teil eines Arrays einer Varaible mit dem Restpattern zuweisen:

+ +
var [a, ...b] = [1, 2, 3];
+console.log(a); // 1
+console.log(b); // [2, 3]
+ +

Zu beachten ist, dass ein {{jsxref("SyntaxError")}} erzeugt wird, wenn auf der linken Seite des Restelements ein trennendes Komma steht:

+ +
var [a, ...b,] = [1, 2, 3];
+// SyntaxError: rest element may not have a trailing comma
+ +

Auspacken von Treffern eines regulären Ausdrucks

+ +

Wenn die Methode exec() für reguläre Ausdrücke einen Treffer findet, gibt sie ein Array zurück, das erstens, den gesamten, passenden Teil des Strings und dann die Teile des Strings enthält, die den einzelnen geklammerten Gruppen im regulären Ausdruck entsprechen. Destrukturierende erlaubt es die Teile aus diesem Array auf einfache Art herauszuziehen, wobei der String mit dem kompletten Treffer ignoriert werden kann, falls er nicht benötigt wird.

+ +
function parseProtocol(url) {
+  var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
+  if(!parsedURL) {
+    return false;
+  }
+  console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]
+
+  var [, protocol, fullhost, fullpath] = parsedURL;
+  return protocol;
+}
+
+console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https"
+
+ +

Objektdestrukturierung

+ +

Einfache Zuweisung

+ +
var o = {p: 42, q: true};
+var {p, q} = o;
+
+console.log(p); // 42
+console.log(q); // true
+
+ +

Zuweisung ohne Deklaration

+ +

Die destrukturierende Zuweisung kann ohne eine Deklaration im Zuweisungs-Statement durchgeführt werden.

+ +
var a, b;
+
+({a, b} = {a: 1, b: 2});
+ +
+

Die runden Klammern ( ... ) wird benötigt wenn man die destrukturierende Zuweisung mit Objektliteralen ohne eine Deklaration durchführen möchte.

+ +

{a, b} = {a: 1, b: 2} ist keine valide eigenständige Syntax, weil {a, b} auf der linken Seite als ein Block und nicht als Objektliteral erkannt wird.

+ +

({a, b} = {a: 1, b: 2}) ist genauso gültig wie var {a, b} = {a: 1, b: 2}

+ +

HINWEIS: Der ( ... ) Ausdruck muss durch ein vorangestelltes Semikolen benutzt werden oder es führt eine Funktion aus der vorherigen Zeile aus.

+
+ +

Zu neuen Varaiblennamen zuweisen

+ +

Eine Eigenschaft kann aus einem Objekt ausgepackt werden und zu einer Variablen mit einem anderen Namen zugewiesen werden.

+ +
var o = {p: 42, q: true};
+var {p: foo, q: bar} = o;
+
+console.log(foo); // 42
+console.log(bar); // true
+ +

Standardwerte

+ +

Einer Variablen können Standardwerte zugewiesen werden, wenn der ausgepackte Wert aus dem Objekt undefined ist.

+ +
var {a = 10, b = 5} = {a: 3};
+
+console.log(a); // 3
+console.log(b); // 5
+ +

Zuweisen eines neuen Variablennamen und eines Standardwertes

+ +

Eine Eigenschaft kann sowohl 1) aus einem Objekt ausgepackt werden und einer Variablen mit einem andern Namen zugewiesen werden und 2) einen Standardwert unterstützen, wenn der ausgepackte Wert undefined ist.

+ +
var {a:aa = 10, b:bb = 5} = {a: 3};
+
+console.log(aa); // 3
+console.log(bb); // 5
+ +

Standardwerte für Funktionsparamter setzen

+ +

ES5 Version

+ +
function drawES5Chart(options) {
+  options = options === undefined ? {} : options;
+  var size = options.size === undefined ? 'big' : options.size;
+  var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;
+  var radius = options.radius === undefined ? 25 : options.radius;
+  console.log(size, cords, radius);
+  // jetzt zeichnen wir endlich ein paar Charts
+}
+
+drawES5Chart({
+  cords: { x: 18, y: 30 },
+  radius: 30
+});
+ +

ES2015-Version

+ +
function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {})
+{
+  console.log(size, cords, radius);
+  // zeichne ein paar Graphen
+}
+
+drawES2015Chart({
+  cords: { x: 18, y: 30 },
+  radius: 30
+});
+ +
+

In der Funktionssignatur für drawES2015Chart oben ist der destrukturierten linken Seite ein leeres Objektliteral zugewiesen, auf der rechten Seite: {size = 'big', cords = {x: 0, y: 0}, radius = 25} = {}. Man kann die Funktion auch ohne die rechte Zuweisungsseite schreiben. Wenn jedoch die Zuweisung auf der rechten Seite weglassen wird, sucht die Funktion nach mindestens einem Argument, das beim Aufruf bereitgestellt wird, während man in der aktuellen Form einfach drawES2015Chart() aufrufen kann, ohne Parameter anzugeben. Das aktuelle Design ist nützlich, wenn man die Funktion, ohne Parameter anzugeben, aufrufen möchte. Das andere ist nützlich, um sicherzustellen , dass ein Objekt an die Funktion übergeben wird.

+
+ +

Destrukturierung von verschachtelten Objekten und Arrays

+ +
var metadata = {
+    title: "Scratchpad",
+    translations: [
+      {
+        locale: "de",
+        localization_tags: [ ],
+        last_edit: "2014-04-14T08:43:37",
+        url: "/de/docs/Tools/Scratchpad",
+        title: "JavaScript-Umgebung"
+      }
+    ],
+    url: "/en-US/docs/Tools/Scratchpad"
+};
+
+var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
+
+console.log(englishTitle); // "Scratchpad"
+console.log(localeTitle);  // "JavaScript-Umgebung"
+ +

"for of" Iteration und Destrukturierung

+ +
var people = [
+  {
+    name: "Mike Smith",
+    family: {
+      mother: "Jane Smith",
+      father: "Harry Smith",
+      sister: "Samantha Smith"
+    },
+    age: 35
+  },
+  {
+    name: "Tom Jones",
+    family: {
+      mother: "Norah Jones",
+      father: "Richard Jones",
+      brother: "Howard Jones"
+    },
+    age: 25
+  }
+];
+
+for (var {name: n, family: { father: f } } of people) {
+  console.log("Name: " + n + ", Father: " + f);
+}
+
+// "Name: Mike Smith, Father: Harry Smith"
+// "Name: Tom Jones, Father: Richard Jones"
+ +

Auspacken von Objektfeldern, die als Funktionsparameter übergeben werden

+ +
function userId({id}) {
+  return id;
+}
+
+function whois({displayName: displayName, fullName: {firstName: name}}){
+  console.log(displayName + " is " + name);
+}
+
+var user = {
+  id: 42,
+  displayName: "jdoe",
+  fullName: {
+      firstName: "John",
+      lastName: "Doe"
+  }
+};
+
+console.log("userId: " + userId(user)); // "userId: 42"
+whois(user); // "jdoe is John"
+ +

Dies ermittelt id, displayName und firstName vom user Objekt und gibt sie aus.

+ +

Berechnete Objekteigenschaftsnamen und Destrukturierung

+ +

Berechnete Eigenschaftsnamen, wie bei Objektliteralen, können bei der Destruktierung verwendet werden.

+ +
let key = "z";
+let { [key]: foo } = { z: "bar" };
+
+console.log(foo); // "bar"
+
+ +

Rest in Objektdestrukturierung

+ +

Die Rest/Spread Eigenschaften für den ECMAScript Vorschlag (Stage 3) fügt die Rest-Syntax zur Destrukturierung hinzu. Rest Eigenschaften sammeln die restlichen, eigenen, aufzählbaren Eigenschaftsschlüssel, die noch nicht von der Destrukturierung erfasst wurden, auf.

+ +
var {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
+a; // 10
+b; // 20
+rest; // { c: 30, d: 40 }
+ +

Ungültige JavaScript Bezeichner als Eigenschaftsnamen

+ +

Destrukturierung kann mit Eigenschaftsnamen benutzt werden, die keine gültigen JavaScript Bezeichner sind, indem ein alternativer valider Beizeichner angegeben wird.

+ +
const foo = { 'fizz-buzz': true }
+const { 'fizz-buzz': fizzBuzz } = foo
+
+console.log(fizzBuzz); // "true"
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}{{Spec2('ESDraft')}} 
Rest/Spread Properties for ECMAScriptDraftStage 3 Entwurf.
+ +

Browserkompatibilität

+ +
+ + +

{{Compat("javascript.operators.destructuring")}}

+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/expression_closures/index.html b/files/de/web/javascript/reference/operators/expression_closures/index.html new file mode 100644 index 0000000000..16bda73cd4 --- /dev/null +++ b/files/de/web/javascript/reference/operators/expression_closures/index.html @@ -0,0 +1,76 @@ +--- +title: Ausdrucks Closures +slug: Web/JavaScript/Reference/Operators/Expression_closures +tags: + - Functions + - JavaScript + - Reference +translation_of: Archive/Web/JavaScript/Expression_closures +--- +
Nicht Standardisiert. Nicht benutzen!
+Die Ausdrucks Closure-Syntax ist eine veraltete Firefox spezifische Funktion und wurde mit Firefox 60 entfernt. In Zukunft sollten Pfeilfunktionen genutzt werden.
+ +
{{jsSidebar("Operators")}}
+ +

Ausdrucks Closures sind eine kurze Funktionssyntax für das Schreiben einfacher Funktionen.

+ +

Syntax

+ +
function [name]([param1[, param2[, ..., paramN]]])
+   expression
+
+ +

Parameter

+ +
+
name
+
Der Funktionsname. Kann bei anonymen Funktionen weggelassen werden. Der Name ist nur lokal im Funktionskörper verfügbar.
+
paramN
+
Der Name eines Arguments, welcher der Funktion übergeben wird. Eine Funktion kann bis zu 255 Argumente haben.
+
expression
+
Der Ausdruck, welcher den Funktionskörper einer Funktion bildet.
+
+ +

Beschreibung

+ +

Diese Funktion ist nicht mehr als eine eine Kurzschreibweise für einfache Funktionen, die der Sprache einer typischen Lambda Notation ähnelt.

+ +

JavaScript 1.7 und älter:

+ +
function(x) { return x * x; }
+ +

JavaScript 1.8:

+ +
function(x) x * x
+ +

Die Syntax erlaubt es die Klammern und das 'return' Statement wegzulassen - sie sind implizit. Es gibt keine weiteren Vorteile, wenn man den Code so schreibt, außer dass es kürzer ist.

+ +

Beispiele

+ +

Eine Kurzschreibweise für Eventlistener:

+ +
 document.addEventListener('click', function() false, true);
+
+ +

Einsatz dieser Notation mit der Array Funktion some aus JavaScript 1.6:

+ +
elems.some(function(elem) elem.type == 'text');
+
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.operators.expression_closures")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/function/index.html b/files/de/web/javascript/reference/operators/function/index.html new file mode 100644 index 0000000000..e6734ae8f8 --- /dev/null +++ b/files/de/web/javascript/reference/operators/function/index.html @@ -0,0 +1,151 @@ +--- +title: Funktionsausdruck +slug: Web/JavaScript/Reference/Operators/function +tags: + - Funktion + - JavaScript + - Operator + - Primary Expressions +translation_of: Web/JavaScript/Reference/Operators/function +--- +
{{jsSidebar("Operators")}}
+ +

Das Schlüsselwort function kann benutzt werden, um eine Funktion innerhalb eines Ausdrucks zu definieren.

+ +

Man kann Funktionen auch mit Hilfe des Function-Konstruktors oder als Funktionsdeklarationen definieren.

+ +
{{EmbedInteractiveExample("pages/js/expressions-functionexpression.html")}}
+ + + +

Syntax

+ +
var meineFunktion = function [name]([param1[, param2[, ..., paramN]]]) {
+   statements
+};
+ +

Seit ES2015 können außerdem Pfeilfunktionen benutzt werden.

+ +

Parameter

+ +
+
name
+
Der Funktionsname. Kann weggelassen werden, wenn es sich um eine anonyme Funktion handelt. Der Name ist nur im Funktionskörper referenzierbar.
+
paramN
+
Der Name eines Argumentes, welches der Funktion übergeben wird.
+
statements
+
Die Befehle, aus denen der Funktionskörper besteht.
+
+ +

Beschreibung

+ +

Ein Funktionsausdruck ist einem Funktionsstatement sehr ähnlich und hat fast die gleiche Syntax (siehe Funktionsstatement). Der größte Unterschied zwischen einem Funktionsausdruck und einem Funktionsstatement ist der Funktionsname, der in der Funktionsausdruck weggelassen werden kann, um eine anonyme Funktion zu erstellen. Ein Funktionsausdruck kann als IIFE (Immediately Invoked Function Expression) genutzt werden, die sofort nach Definition ausgeführt wird. Im Kapitel Funktionen finden sich weitere Informationen.

+ +

Hoisting von Funktionsausdrücken

+ +

Funktionsausdrücke in Javascript werden nicht automatisch an den Beginn des Scopes gehoben (hoisted), anders als {{jsxref("Statements/function", "Funktionsdeklarationen", "#Hochziehen_der_Funktionsdeklaration")}}. Funktionsausdrücke können nicht vor Definition im Code aufgerufen werden.

+ +
notHoisted(); // TypeError: notHoisted is not a function
+
+var notHoisted = function() {
+   console.log('bar');
+};
+
+ +

Benannte Funktionsausdrücke

+ +

Wenn man die aktuelle Funktion innerhalb des Funktionskörpers referenzieren will, muss ein Benannter Funktionsausdruck erstellt werden. Dieser Name ist nur im Funktionskörper referenzierbar. Das verhindert den Gebrauch der nicht standardisierten arguments.callee Eigenschaft.

+ +
var math = {
+  'fakultaet': function fakultaet(n) {
+    if (n <= 1)
+      return 1;
+    return n * fakultaet(n - 1);
+  }
+};
+
+math.fakultaet(3) //3;2;1;
+
+ +

Die Variable, der ein Funktionsausdruck zugewiesen wurde, hat eine name Eigenschaft. Wenn der Name der Funktion ausgelassen wird, wird dies der Variablenname sein (implizierter Name). Ist die Funktion benannt, wird in der Eigenschaft der Funktionsname zu finden sein (expliziter Name). Dies trifft auch auf Pfeilfunktionen zu (diese haben keinen Namen so dass der Variablenname nur implizit gesetzt werden kann)

+ +
var foo = function() {}
+foo.name // "foo"
+
+var foo2 = foo
+foo2.name // "foo"
+
+var bar = function baz() {}
+bar.name // "baz"
+
+console.log(foo === foo2); // true
+console.log(typeof baz);   // undefined
+console.log(bar === baz);  // false (Fehler, weil baz == undefined)
+
+ +

Beispiele

+ +

Das folgende Beispiel definiert eine unbenannte Funktion und weist sie x zu. Die Funktion gibt das Quadrat ihres Argumentes zurück.

+ +
var x = function(y) {
+   return y * y;
+};
+
+ +

Meistens werden Funktionsausdrücke in Callbacks genutzt:

+ +
button.addEventListener('click', function(event) {
+    console.log('button wurde geklickt!')
+})
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-13', 'Function definition')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-13', 'Function definition')}}{{Spec2('ES3')}}Initiale Fefinition. Implementiert in JavaScript 1.5.
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.operators.function")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/function_star_/index.html b/files/de/web/javascript/reference/operators/function_star_/index.html new file mode 100644 index 0000000000..578d88ccc6 --- /dev/null +++ b/files/de/web/javascript/reference/operators/function_star_/index.html @@ -0,0 +1,91 @@ +--- +title: function* Ausdruck +slug: Web/JavaScript/Reference/Operators/function* +tags: + - ECMAScript 2015 + - Function + - Iterator + - JavaScript + - Operator + - Primary Expression +translation_of: Web/JavaScript/Reference/Operators/function* +--- +
{{jsSidebar("Operators")}}
+ +

Das function* Schlüsselwort kann benutzt werden, um Generatorfunktionen in einem Ausdruck zu definieren.

+ +
{{EmbedInteractiveExample("pages/js/expressions-functionasteriskexpression.html")}}
+ + + +

Syntax

+ +
function* [name]([param1[, param2[, ..., paramN]]]) {
+   statements
+}
+ +

Parameter

+ +
+
name
+
Der Funktionsname. Kann weggelassen werden, wenn es ein anonymen Funktion ist. Der Name ist nur im Funktionskörper referenzierbar.
+
paramN
+
Der Name eines Argumentes, welches der Funktion übergeben wird. Eine Funktion kann bis zu 255 Argumente haben.
+
statements
+
Die Statements, die den Rumpf der Funktion darstellen.
+
+ +

Beschreibung

+ +

Ein function* Ausdruck sehr ähnlich zu {{jsxref('Statements/function*', 'function* Statements')}} und hat die selbe Syntax. Der Hauptunterschied zwischen einem function* Ausdruck und function* Statement ist der Funktionsname, welcher in einem function* Ausdruck weggelassen werden kann, um eine anonyme Funktion zu erstellen. Mehr Informationen sind im Kapitel Funktionen enthalten.

+ +

Beispiele

+ +

Das folgende Beispiel definiert eine namenlose Generatorfunktion und weist diese x zu. Die Funktion liefert das Quadrat ihres Argumentes:

+ +
var x = function*(y) {
+   yield y * y;
+};
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKomment
{{SpecName('ES2015', '#', 'function*')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#', 'function*')}}{{Spec2('ESDraft')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.operators.function_star")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/generator_comprehensions/index.html b/files/de/web/javascript/reference/operators/generator_comprehensions/index.html new file mode 100644 index 0000000000..843865b399 --- /dev/null +++ b/files/de/web/javascript/reference/operators/generator_comprehensions/index.html @@ -0,0 +1,172 @@ +--- +title: Generator Comprehensions +slug: Web/JavaScript/Reference/Operators/Generator_comprehensions +tags: + - Iterator + - JavaScript + - Non-standard + - Reference +translation_of: Archive/Web/JavaScript/Generator_comprehensions +--- +
Non standardisiert. Nicht einsetzen!
+Die Generator Comprehensions Syntax ist nicht standardisiert und wurde mit Firefox 58 entfernt. Zukünftig sollte stattdessen {{jsxref("Statements/function*", "Generatoren", "", 1)}} eingesetzt werden.
+ +
{{jsSidebar("Operators")}}
+ +

Die Generator Comprehensions Syntax war ein JavaScript Ausdruck welcher es erlaubt schnell einen neuen Generator auf Basis eines existierenden Iterable Objektes zu erstellen. Jedoch wurde diese aus dem Standard und der Firefox Implementierung entfernt. Sie soll nicht mehr eingesetzt werden!

+ +

Syntax

+ +
(for (x of iterable) x)
+(for (x of iterable) if (condition) x)
+(for (x of iterable) for (y of iterable) x + y)
+
+ +

Beschreibung

+ +

In der Generator Comprehension gibt es zwei erlaubte Arten von Komponenten:

+ + + +

Die for-of Iteration ist immer die erste Komponente. Mehrere for-of Iterationen oder if Statements sind erlaubt.

+ +

Ein signifikanter Nachteil von {{jsxref("Operators/Array_comprehensions","Array Comprehensions","","true")}} ist, dass diese ein völlig neues Array im Speicher erstellt wird. Wenn der Input für die Comprehension selbst ein kleines Array ist, ist der entstehende Overhead nicht signifikant — aber wenn der Input ein langes Array ist oder ein teurer (oder tatsächlich unendlicher) Generator ist, kann die Erstellung eines neuen Arrays problematisch werden.

+ +

Generatoren erlauben das nachträgliche Berechnen von Sequenzen, mit Elementen, die dann Berechnet werden, wenn sie benötigt werden. Generator Comprehensions sind syntaktisch fast identisch zu Array Comprehensions — sie benutzen runde Klammern statt eckigen Klammern — jedoch erstellen sie Generator statt eines Arrays, welcher dann ausgeführt werden kann, wenn es benötigt wird. Man kann diese Funktion als Kurzsyntax für das Erstellen von Generatoren sehen.

+ +

Angenommen man hat ein Iterator it welcher über eine große Sequenz von Integers iteriert. Wir wollen einen neuen Iterator erstellen, der über das Doppelte des Integers iteriert. Eine Array Comprehension würde ein volles Array im Speicher erstellen, welches die doppelten Werte enthält:

+ +
var doubles = [for (i in it) i * 2];
+
+ +

Auf der anderen Seite würde eine Generator Comprehension einen neuen Iterator erstellen, welcher die verdoppelten Werte erste dann erstellt, wenn sie benötigt werden:

+ +
var it2 = (for (i in it) i * 2);
+console.log(it2.next()); // The first value from it, doubled
+console.log(it2.next()); // The second value from it, doubled
+
+ +

Wenn eine Generator Comprehension als Argument einer Funktion eingesetzt wird, können durch die Funktionsaufrufsklammern die äußeren Klammern weggelassen werden:

+ +
var result = doSomething(for (i in it) i * 2);
+
+ +

Der signifikante Unterschied zwischen den beiden Beispiel ist beim Einsatz der Generator Comprehension, dass man nur einmal über die ganze Datenstruktur iterieren muss, während bei der Array Comprehension zweimal iteriert werden muss, beim Erstellen und beim eigentlichen Iterieren.

+ +

Beispiele

+ +

Einfache Generator Comprehensions

+ +
(for (i of [1, 2, 3]) i * i );
+// generator function which yields 1, 4, and 9
+
+[...(for (i of [1, 2, 3]) i * i )];
+// [1, 4, 9]
+
+var abc = ['A', 'B', 'C'];
+(for (letters of abc) letters.toLowerCase());
+// generator function which yields "a", "b", and "c"
+
+ +

Generator Comprehensions mit if Statement

+ +
var years = [1954, 1974, 1990, 2006, 2010, 2014];
+
+(for (year of years) if (year > 2000) year);
+// generator function which yields 2006, 2010, and 2014
+
+(for (year of years) if (year > 2000) if (year < 2010) year);
+// generator function which yields 2006, the same as below:
+
+(for (year of years) if (year > 2000 && year < 2010) year);
+// generator function which yields 2006
+
+ +

Generator Comprehensions verglichen mit Generatorfunktionen

+ +

Ein einfacher Weg um Generator Comprehension Syntax zu verstehen ist es sie mit Generatorfunktionen zu vergleichen.

+ +

Beispiel 1: Einfacher Generator:

+ +
var numbers = [1, 2, 3];
+
+// Generator function
+(function*() {
+  for (let i of numbers) {
+    yield i * i;
+  }
+})();
+
+// Generator comprehension
+(for (i of numbers) i * i );
+
+// Result: both return a generator which yields [1, 4, 9]
+
+ +

Beispiel 2: Einsatz von if in Generatoren.

+ +
var numbers = [1, 2, 3];
+
+// Generator function
+(function*() {
+  for (let i of numbers) {
+    if (i < 3) {
+      yield i * 1;
+    }
+  }
+})();
+
+// Generator comprehension
+(for (i of numbers) if (i < 3) i);
+
+// Result: both return a generator which yields [1, 2]
+ +

Spezifikationen

+ +

Generator Comprehensions waren initial in dem ECMAScript 2015 Entwurf, jedoch wurden sie in der Überarbeitung 27 (August 2014) entfernt. Für Spezifikationssemantik muss in früheren Überarbeitungen von ES2015 nachgeschaut werden.

+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.operators.generator_comprehensions")}}

+ +

Unterschiede zu den älteren JS1.7/JS1.8 Comprehensions

+ +
JS1.7/JS1.8 Comprehensions wurden von Gecko 46 entfernt ({{bug(1220564)}}).
+ +

Alte Comprehensions Syntax (nicht mehr benutzen!):

+ +
(X for (Y in Z))
+(X for each (Y in Z))
+(X for (Y of Z))
+
+ +

Unterschiede:

+ + + +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/grouping/index.html b/files/de/web/javascript/reference/operators/grouping/index.html new file mode 100644 index 0000000000..f4056fc12c --- /dev/null +++ b/files/de/web/javascript/reference/operators/grouping/index.html @@ -0,0 +1,91 @@ +--- +title: Gruppierungsoperator +slug: Web/JavaScript/Reference/Operators/Grouping +tags: + - JavaScript + - Operator + - Primary Expressions +translation_of: Web/JavaScript/Reference/Operators/Grouping +--- +
{{jsSidebar("Operators")}}
+ +

Der Gruppierungsoperator ( ) kontrolliert die Priorität beim Auswerten von Ausdrücken.

+ +
{{EmbedInteractiveExample("pages/js/expressions-groupingoperator.html")}}
+ + + +

Syntax

+ +
 ( )
+ +

Beschreibung

+ +

Der Gruppierungsoperator besteht aus einem runden Klammernpaar um einen Ausdruck oder Teilausdruck, um die normale Operator Priorität zu überschreiben, so dass Ausdrücke mit niedriger Priorität vor Ausdrücken mit hoher Priorität ausgewertet werden können. So wie es klingt, gruppiert dieser Operator alles in den Klammern.

+ +

Beispiele

+ +

Überschreiben von Multiplikation und Division zu erst, wenn Addition und Subtraktion als erstes ausgewertet werden sollen.

+ +
var a = 1;
+var b = 2;
+var c = 3;
+
+// normale Priorität
+a + b * c     // 7
+// wird wie folgt ausgewertet
+a + (b * c)   // 7
+
+// überschreiben der Priorität
+// Addition vor Multiplikation
+(a + b) * c   // 9
+
+// was äquivalent zu folgendem ist
+a * c + b * c // 9
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ESDraft', '#sec-grouping-operator', 'The Grouping Operator')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-grouping-operator', 'The Grouping Operator')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-11.1.6', 'The Grouping Operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES1', '#sec-11.1.4', 'The Grouping Operator')}}{{Spec2('ES1')}}Initiale Definition. Implementiert in JavaScript 1.0.
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.operators.grouping")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/in/index.html b/files/de/web/javascript/reference/operators/in/index.html new file mode 100644 index 0000000000..8cf0f27136 --- /dev/null +++ b/files/de/web/javascript/reference/operators/in/index.html @@ -0,0 +1,145 @@ +--- +title: in operator +slug: Web/JavaScript/Reference/Operators/in +tags: + - JavaScript + - Operator + - Relational Operators +translation_of: Web/JavaScript/Reference/Operators/in +--- +
{{jsSidebar("Operators")}}
+ +

Der in operator gibt true zurück, falls die gegebene Eigenschaft im gegebenen Objekt existiert.

+ +
{{EmbedInteractiveExample("pages/js/expressions-inoperator.html")}}
+ + + +

Syntax

+ +
prop in object
+ +

Parameter

+ +
+
prop
+
Ein String oder Symbol welches einen Namen einer Eigenschaft oder einen Arrayindex (nicht Symbole werden in einen String konvertiert).
+
+ +
+
object
+
Objekt, bei welchem überprüft wird, ob eine Eigenschaft mit spezifiziertem Namen enthalten ist (oder in der Prototypenkette enthalten ist).
+
+ +

Beschreibung

+ +

Die folgenden Beispiele zeigen einige Verwendungen des Operators

+ +
// Arrays
+var trees = ["redwood", "bay", "cedar", "oak", "maple"];
+0 in trees        // gibt true zurück
+3 in trees        // gibt true zurück
+6 in trees        // gibt false zurück
+"bay" in trees    // gibt false zurück (man muss den Index
+                  // spezifizieren, nicht den Wert an dem Index)
+"length" in trees // gibt true (length ist eine Eigenschaft von Array
+Symbol.iterator in trees // gibt true zurück (Arrays sind iterable, funktioniert nur in ES2015+))
+
+// Vordefinierte Objekte
+"PI" in Math     //  gibt true zurück
+
+// Eigene Objekte
+var mycar = {make: "Honda", model: "Accord", year: 1998};
+"make" in mycar  // gibt true zurück
+"model" in mycar // gibt true zurück
+
+ +

Man muss auf der rechten Seite des in Operators ein Objekt benutzen. Zum Beispiel kann ein String, der durch einen Konstruktor erstellt wurde, benutzt werden, jedoch funktioniert kein Stringliteral.

+ +
var color1 = new String("green");
+"length" in color1 // gibt true zurück
+
+var color2 = "coral";
+// erzeugt einen Fehler (color2 ist kein String Objekt)
+"length" in color2
+
+ +

Einsatz von in mit gelöschten oder undefined Eigenschaften.

+ +

Wenn eine Eigenschaft mit dem delete Operator gelöscht wird, wird der in für diese Eigenschaft false zurückgeben.

+ +
var mycar = {make: "Honda", model: "Accord", year: 1998};
+delete mycar.make;
+"make" in mycar;  // gibt false zurück
+
+var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
+delete trees[3];
+3 in trees; // gibt false zurück
+
+ +

Wenn eine Eigenschaft auf {{jsxref("Global_Objects/undefined", "undefined")}} gesetzt wird, aber nicht gelöscht wird, wird der in Operator true zurückgeben.

+ +
var mycar = {make: "Honda", model: "Accord", year: 1998};
+mycar.make = undefined;
+"make" in mycar;  // gibt true zurück
+
+ +
var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
+trees[3] = undefined;
+3 in trees; // gibt true zurück
+
+ +

Vererbte Eigenschaften

+ +

Der in Operator gibt true für Eigenschaften in der Prototype-Kette zurück.

+ +
"toString" in {}; // gibt true zurück
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}{{Spec2('ESDraft')}} 
{{SpecName('ES2015', '#sec-relational-operators', 'Relational Operators')}}{{Spec2('ES2015')}} 
{{SpecName('ES5.1', '#sec-11.8.7', 'The in Operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-11.8.7', 'The in Operator')}}{{Spec2('ES3')}}Initiale Definition. Implementiert in JavaScript 1.4.
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.operators.in")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/index.html b/files/de/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..407f5d8c1c --- /dev/null +++ b/files/de/web/javascript/reference/operators/index.html @@ -0,0 +1,303 @@ +--- +title: Ausdrücke und Operatoren +slug: Web/JavaScript/Reference/Operators +tags: + - JavaScript + - Operators +translation_of: Web/JavaScript/Reference/Operators +--- +
{{jsSidebar("Operators")}}
+ +

Dieses Kapitel behandelt alle JavaScript Sprachoperatoren, Ausdrücke und Schlüsselwörter.

+ +

Ausdrücke und Operatoren geordnet nach Kategorie

+ +

Die alphabetische Sortierung finden Sie in der linken Seitenspalte.

+ +

Grundlegende Ausdrücke

+ +

Elementare Schlüsselwörter und allgemeine Ausdrücke in JavaScript.

+ +
+
{{jsxref("Operators/this", "this")}}
+
Das this Schlüsselwort referenziert eine spezielle Eigenschaft des Ausführungskontexts.
+
{{jsxref("Operators/function", "function")}}
+
Der function Schlüsselbegriff definiert einen Funktionsausdruck.
+
{{jsxref("Operators/class", "class")}}
+
Das class Schlüsselwort definiert einen Klassenausdruck.
+
{{jsxref("Operators/function*", "function*")}}
+
Das function* Schlüsselword definiert einen Generatorfunktionsausdruck.
+
{{jsxref("Operators/yield", "yield")}}
+
Eine Generatorfunktion anhalten und fortsetzen.
+
{{jsxref("Operators/yield*", "yield*")}}
+
Delegiert zu einer anderen Generatorfunktion oder Iterable Objekt.
+
{{experimental_inline}} {{jsxref("Operators/async_function", "async function*")}}
+
async function definiert einen asynchron Funktionsausdruck.
+
{{experimental_inline}} {{jsxref("Operators/await", "await")}}
+
Hält eine asynchrone Funktion an und setzt sie fort und wartet dabei auf ein erfolgreichen oder nicht erfolgreichen Promise.
+
{{jsxref("Global_Objects/Array", "[]")}}
+
Array-Initialisierungs/Literal-Syntax.
+
{{jsxref("Operators/Object_initializer", "{}")}}
+
Objekt-Initialisierungs/Literal-Syntax.
+
{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}
+
Literal-Syntax für reguläre Ausdrücke.
+
{{jsxref("Operators/Grouping", "( )")}}
+
Gruppierungs-Operator.
+
+ +

Linke-Seite-Ausdrücke

+ +

Werte auf der linken Seite sind das Ziel einer Zuweisung.

+ +
+
{{jsxref("Operators/Property_accessors", "Eigenschaftszugriff", "", 1)}}
+
Member-Operatoren ermöglichen den Zugriff auf eine Objektvariable oder eine Methode eines Objekts (object.property und object["property"]).
+
{{jsxref("Operators/new", "new")}}
+
Der new Operator erzeugt eine Instanz über einen Konstruktor.
+
new.target
+
In Konstruktoren referenziert new.target auf den Konstruktor, welcher mit {{jsxref("Operators/new", "new")}} aufgerufen wurde.
+
{{jsxref("Operators/super", "super")}}
+
Das super Schlüsselwort ruft den Elternkonstruktor auf.
+
{{jsxref("Operators/Spread_operator", "...obj")}}
+
Der Spread-Operator ermöglicht es einem Ausdruck in Situationen erweitert zu werden, wo mehrfache Argumente (für Funktionsaufrufe) oder mehrfache Elemente (für Array-Literale) erwartet werden.
+
+ +

Inkrement und Dekrement

+ +

Postfix/Prefix-Inkrement- und Postfix/Prefix-Dekrement-Operatoren.

+ +
+
{{jsxref("Operators/Arithmetic_Operators", "A++", "#Increment")}}
+
Postfix-Inkrementoperator.
+
{{jsxref("Operators/Arithmetic_Operators", "A--", "#Decrement")}}
+
Postfix-Dekrementoperator.
+
{{jsxref("Operators/Arithmetic_Operators", "++A", "#Increment")}}
+
Prefix-Inkrementoperator.
+
{{jsxref("Operators/Arithmetic_Operators", "--A", "#Decrement")}}
+
Prefix-Dekrementoperator.
+
+ +

Unäre Operatoren

+ +

Ein unärer Operation ist ein Operation mit nur einem Operanden.

+ +
+
{{jsxref("Operators/delete", "delete")}}
+
Der delete-Operator entfernt eine Eigenschaft eines Objektes.
+
{{jsxref("Operators/void", "void")}}
+
Der void-Operator verwirft den Rückgabewert eines Ausdrucks.
+
{{jsxref("Operators/typeof", "typeof")}}
+
Der typeof-Operator ermittelt den Typ des angegebenen Objekts.
+
{{jsxref("Operators/Arithmetic_Operators", "+", "#Unary_plus")}}
+
Der unäre Plusoperator wandelt seinen Operand in einen Zahlentyp um.
+
{{jsxref("Operators/Arithmetic_Operators", "-", "#Unary_negation")}}
+
Der unäre Negationsoperator wandelt seinen Operand in einen Zahlentyp um und negiert ihn.
+
{{jsxref("Operators/Bitwise_Operators", "~", "#Bitwise_NOT")}}
+
Bitweiser NICHT-Operator.
+
{{jsxref("Operators/Logical_Operators", "!", "#Logical_NOT")}}
+
Logischer NICHT-Operator.
+
+ +

Arithmetische Operatoren

+ +

Arithmetische Operatoren nehmen numerische Werte (entweder Literale oder Variablen) als ihre Operanden und geben genau einen numerischen Wert zurück.

+ +
+
{{jsxref("Operators/Arithmetic_Operators", "+", "#Addition")}}
+
Additionsoperator.
+
{{jsxref("Operators/Arithmetic_Operators", "-", "#Subtraction")}}
+
Subtraktionsoperator.
+
{{jsxref("Operators/Arithmetic_Operators", "/", "#Division")}}
+
Divisionsoperator.
+
{{jsxref("Operators/Arithmetic_Operators", "*", "#Multiplication")}}
+
Multiplikationsoperator.
+
{{jsxref("Operators/Arithmetic_Operators", "%", "#Remainder")}}
+
Restoperator.
+
{{jsxref("Operators/Arithmetic_Operators", "**", "#Exponentiation")}}
+
Potenzierungsoperator.
+
+ +

Vergleichsoperatoren

+ +

Ein Vergleichsoperator vergleicht seine Operanden und gibt einen Booleschen Wert zurück, basierend dem Ergebnis des Vergleiches.

+ +
+
{{jsxref("Operators/in", "in")}}
+
Der in-Operator ermittelt ob ein Objekt die gegebene Objektvariable enthält.
+
{{jsxref("Operators/instanceof", "instanceof")}}
+
Der instanceof-Operator ermittelt ob ein Objekt eine Instanz eines anderen Objekts ist.
+
{{jsxref("Operators/Comparison_Operators", "<", "#Less_than_operator")}}
+
Kleiner-als-Operator.
+
{{jsxref("Operators/Comparison_Operators", ">", "#Greater_than_operator")}}
+
Größer-als-Operator.
+
{{jsxref("Operators/Comparison_Operators", "<=", "#Less_than_or_equal_operator")}}
+
"Kleiner als oder gleich" - Operator.
+
{{jsxref("Operators/Comparison_Operators", ">=", "#Greater_than_or_equal_operator")}}
+
"Größer als oder gleich" - Operator.
+
+ +
+

Hinweis: => is kein Operator, aber die Notation für Pfeilfunktionen.

+
+ +

Gleichheitsoperatoren

+ +

Das Ergebnis der Auswertung eines Gleichheitoperators ist immer vom Typ Boolean, basierend auf dem Ergebnis des Vergleiches.

+ +
+
{{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}
+
Gleichheitsoperator.
+
{{jsxref("Operators/Comparison_Operators", "!=", "#Inequality")}}
+
Ungleichheitsoperator.
+
{{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}
+
Identitätsoperator.
+
{{jsxref("Operators/Comparison_Operators", "!==", "#Nonidentity")}}
+
"Nicht Identitäts"-Operator.
+
+ +

Bitweise-Verschieben-Operatoren

+ +

Operationen, die alle Bits eines Operanden verschieben.

+ +
+
{{jsxref("Operators/Bitwise_Operators", "<<", "#Left_shift")}}
+
Operator für bitweises Verschieben nach links.
+
{{jsxref("Operators/Bitwise_Operators", ">>", "#Right_shift")}}
+
Operator für bitweises Verschieben nach rechts.
+
{{jsxref("Operators/Bitwise_Operators", ">>>", "#Unsigned_right_shift")}}
+
Operator für vorzeichenloses bitweises Verschieben nach rechts.
+
+ +

Binäre bitweise Operatoren

+ +

Bitweise Operatoren behandeln ihre Operanden als eine Menge von 32 Bits und geben einen in JavaScript üblichen numerischen Werte zurück.

+ +
+
{{jsxref("Operators/Bitwise_Operators", "&", "#Bitwise_AND")}}
+
Bitweises UND.
+
{{jsxref("Operators/Bitwise_Operators", "|", "#Bitwise_OR")}}
+
Bitweises ODER.
+
{{jsxref("Operators/Bitwise_Operators", "^", "#Bitwise_XOR")}}
+
Bitweises XOR.
+
+ +

Binäre logische Operatoren

+ +

Logische Operatoren werden normalerweise mit Booleschen (logischen) Werten benutzt und sie liefern dann einen Booleschen Wert zurück.

+ +
+
{{jsxref("Operators/Logical_Operators", "&&", "#Logical_AND")}}
+
Logisches UND.
+
{{jsxref("Operators/Logical_Operators", "||", "#Logical_OR")}}
+
Logisches ODER.
+
+ +

Bedingter (ternärer) Operator

+ +
+
{{jsxref("Operators/Conditional_Operator", "(Bedingung ? wennTrue : wennFalse)")}}
+
+

Der bedingte Operator liefert einen von zwei Werten zurück, in Abhängigkeit des logischen Wertes der Bedingung.

+
+
+ +

Zuweisungsoperator

+ +

Der Zuweisungsoperator weist seinem linken Operand einen Wert zu, in Abhängigkeit des Wertes seines rechten Operanden.

+ +
+
{{jsxref("Operators/Assignment_Operators", "=", "#Assignment")}}
+
Zuweisungsoperator.
+
{{jsxref("Operators/Assignment_Operators", "*=", "#Multiplication_assignment")}}
+
Multiplikationszuweisung.
+
{{jsxref("Operators/Assignment_Operators", "/=", "#Division_assignment")}}
+
Teilungszuweisung.
+
{{jsxref("Operators/Assignment_Operators", "%=", "#Remainder_assignment")}}
+
Restzuweisung.
+
{{jsxref("Operators/Assignment_Operators", "+=", "#Addition_assignment")}}
+
Additionszuweisung.
+
{{jsxref("Operators/Assignment_Operators", "-=", "#Subtraction_assignment")}}
+
Subtraktionszuweisung.
+
{{jsxref("Operators/Assignment_Operators", "<<=", "#Left_shift_assignment")}}
+
Links-verschieben-Zuweisung.
+
{{jsxref("Operators/Assignment_Operators", ">>=", "#Right_shift_assignment")}}
+
Rechts-verschieben-Zuweisung.
+
{{jsxref("Operators/Assignment_Operators", ">>>=", "#Unsigned_right_shift_assignment")}}
+
Vorzeichenlose (unsigned) Rechts-verschieben-Zuweisung.
+
{{jsxref("Operators/Assignment_Operators", "&=", "#Bitwise_AND_assignment")}}
+
Bitweise UND-Zuweisung.
+
{{jsxref("Operators/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}
+
Bitweise ENTWEDER-ODER-Zuweisung.
+
{{jsxref("Operators/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}
+
Bitweise ODER-Zuweisung.
+
{{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}
+ {{jsxref("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}
+
+

Destrukturierende Zuweisung ermöglicht das Zuweisen von Daten aus Arrays oder Objekten an Variablen, mit einer ähnlichen Syntax wie bei Array- oder Objekt-Literalen.

+
+
+ +

Kommaoperator

+ +
+
{{jsxref("Operators/Comma_Operator", ",")}}
+
+ +

Der Kommaoperator erlaubt es mehrere Ausdrücke innerhalb eines einzigen Ausdrucks zu evaluieren und liefert das Ergebnis des letzten Ausdrucks.

+ +

Nicht standardisierte Funktionen

+ +
+
{{non-standard_inline}} {{jsxref("Operators/Legacy_generator_function", "Legacy generator function", "", 1)}}
+
Das function Schlüsselwort kann benutzt werden, um eine veraltete Generatorfunktion in einem Ausdruck zu schreiben. Um die Funktion zu einem veralteten Generator zu machen, muss der Funktionskörper mindestens ein {{jsxref("Operators/yield", "yield")}} Ausdruck enthalten.
+
{{non-standard_inline}} {{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}}
+
Die Ausdrucks Closure Syntax ist eine Kurzform für eine einfache Funktion.
+
{{non-standard_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}
+
Array Comprehensions.
+
{{non-standard_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}
+
Generator Comprehensions.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES1', '#sec-11', 'Expressions')}}{{Spec2('ES1')}}Initiale Definition.
{{SpecName('ES5.1', '#sec-11', 'Expressions')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}{{Spec2('ES6')}}Neu: Spread Syntax, Rest Syntax, destrukturierte Zuweisungen, super Schlüsselwort.
{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}{{Spec2('ESDraft')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.operators")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/inkrement/index.html b/files/de/web/javascript/reference/operators/inkrement/index.html new file mode 100644 index 0000000000..74289b92e1 --- /dev/null +++ b/files/de/web/javascript/reference/operators/inkrement/index.html @@ -0,0 +1,80 @@ +--- +title: Inkrement (++) +slug: Web/JavaScript/Reference/Operators/Inkrement +tags: + - Inkrement + - Inkrement-Operator + - Inkrementieren +translation_of: Web/JavaScript/Reference/Operators/Increment +--- +
{{jsSidebar("Operators")}}
+ +

Der Inkrement-Operator (++) inkrementiert einen Operanden, addiert also eins hinzu und gibt einen Wert zurück.

+ +
{{EmbedInteractiveExample("pages/js/expressions-increment.html")}}
+ + + +

Syntax

+ +
Operator: x++ or ++x
+
+ +

Description

+ +

Wird der Inkrement-Operator als Postfix benutzt, wobei der Operator hinter dem Operanden steht (z.B. x++), wird der Operand um eins erhöht und der Wert vor dem Inkrementieren zurück gegeben.

+ +

Wird der Inkrement-Operator als Prefix benutzt, wobei der Operator vor dem Operanden steht (z.B. ++x), wird der Operand um eins erhöht und der Wert nach dem Inkrementieren  zurück gegeben.

+ +

Examples

+ +

Postfix increment

+ +
let x = 3;
+y = x++;
+
+// y = 3
+// x = 4
+
+ +

Prefix increment

+ +
let a = 2;
+b = ++a;
+
+// a = 3
+// b = 3
+
+ +

Specifications

+ + + + + + + + + + +
Specification
{{SpecName('ESDraft', '#sec-postfix-increment-operator', 'Increment operator')}}
+ +

Browser compatibility

+ + + +

{{Compat("javascript.operators.increment")}}

+ +

See also

+ + diff --git a/files/de/web/javascript/reference/operators/instanceof/index.html b/files/de/web/javascript/reference/operators/instanceof/index.html new file mode 100644 index 0000000000..a6729bb709 --- /dev/null +++ b/files/de/web/javascript/reference/operators/instanceof/index.html @@ -0,0 +1,172 @@ +--- +title: instanceof +slug: Web/JavaScript/Reference/Operators/instanceof +tags: + - JavaScript + - Object + - Operator + - Prototype + - Relational Operators + - instanceof +translation_of: Web/JavaScript/Reference/Operators/instanceof +--- +
{{jsSidebar("Operators")}}
+ +

Der instanceof Operator prüft, ob ein Objekt die prototype Eigenschaft einer Konstruktorfunktion in seiner Prototypenkette besitzt.

+ +
{{EmbedInteractiveExample("pages/js/expressions-instanceof.html")}}
+ + + +

Syntax

+ +
object instanceof constructor
+ +

Parameter

+ +
+
object
+
Das zu prüfende Objekt.
+
+ +
+
constructor
+
Gegen die zu testende Funktion.
+
+ +

Beschreibung

+ +

Der instanceof Operator prüft die Anwesenheit des constructor.prototype in der Prototypenkette eines Objekts.

+ +
// Konstruktoren definieren
+function C(){}
+function D(){}
+
+var o = new C();
+
+// true, weil: Object.getPrototypeOf(o) === C.prototype
+o instanceof C;
+
+// false, weil D.prototype nirgends in o's Prototypenkette ist
+o instanceof D;
+
+o instanceof Object; // true, weil:
+C.prototype instanceof Object // true
+
+C.prototype = {};
+var o2 = new C();
+
+o2 instanceof C; // true
+
+// false, weil C.prototype nirgends in
+// o's Prototypenkette ist
+o instanceof C;
+
+D.prototype = new C(); // Einsatz von Vererbung
+var o3 = new D();
+o3 instanceof D; // true
+o3 instanceof C; // true
+
+ +

Zu beachten ist, dass sich das Ergebnis des instanceof Tests ändern kann, wenn die prototype Eigenschaft eines Konstruktors geändert wird und auch, wenn ein Objektprototyp mit Object.setPrototypeOf geändert wird. Es ist auch möglich die nicht standardisierte Pseudoeigenschaft __proto__ zu nutzen.

+ +

instanceof und verschiedene Kontexte (z. B. Frames oder Windows)

+ +

Verschiedene Scopes haben verschiedene Ausführungsumgebungen. Das bedeutet, sie haben verschiedene Standardobjekte (verschiedene globale Objekte, verschiedene Konstruktoren, etc.). Das kann zu unerwarteten Resultaten führt. Zum Beispiel gibt [] instanceof window.frames[0].Array false zurück, weil Array.prototype !== window.frames[0].Array ist und Arrays vom Ersteren erben.

+ +

Auf den ersten Blick ergibt das nicht viel Sinn, fängt man jedoch an Objekte zwischen verschiedenen Frames oder Windows zwischen Kontexten auszutauschen, wäre das valide und ein großes Problem. Zum Beispiel kann man mit sicher testen ob ein Objekt ein Array ist, indem man Array.isArray(myObj) benutzt.

+ +

Zur Prüfung ob ein Node ein SVGElement ist kann myNode instanceof myNode.ownerDocument.defaultView.SVGElement genutzt werden.

+ +
Hinweis for Mozilla Entwickler:
+In Code mit XPCOM, hat instanceof einen speziellen Effekt: obj instanceof xpcomInterface (z. B. Components.interfaces.nsIFile) ruft obj.QueryInterface(xpcomInterface) auf und gibt true zurück, wenn QueryInterface erfolgreich war. Ein Seiteneffekt ist, dass Eigenschaften von xpcomInterface auf obj aufgerufen werden können, wenn erfolgreich mit instanceof getestet wurde. Im Gegensatz zu JavaScripts Standardobjekten, funktioniert obj instanceof xpcomInterface wie erwartet, auch wenn obj aus ein anderen Scope stammt.
+ +

Beispiele

+ +

Demonstration, dass String und Date vom Typ Object sind und Ausnahmefälle

+ +

Der folgende Quelltext nutzt instanceof, um zu demonstrieren, dass String und Date Objekte von Typ Object sind (sie sind von Object abgeleitet).

+ +

Immer, wenn ein Objekt durch die Objekt Literal Notation erstellt wird, ist das eine Ausnahme: Auch wenn der Prototype undefined ist, ergibt instanceof Object true.

+ +
var simpleStr = "This is a simple string";
+var myString  = new String();
+var newStr    = new String("String created with constructor");
+var myDate    = new Date();
+var myObj     = {};
+var myNonObj  = Object.create(null);
+
+simpleStr instanceof String; // gibt false zurück; kontrolliert die Prototypenkette und findet undefined
+myString  instanceof String; // gibt true zurück
+newStr    instanceof String; // gibt true zurück
+myString  instanceof Object; // gibt true zurück
+
+myObj    instanceof Object;    // gibt true zurück, trotz eines undefined Prototypen
+({})     instanceof Object;    // gibt true zurück, gleicher Fall wie oben
+myNonObj instanceof Object;    // gibt false zurück, ein Weg ein Objekt zu erstellen, welches keine Instanz von Object ist
+
+myString instanceof Date;   // gibt false zurück
+
+myDate instanceof Date;     // gibt true zurück
+myDate instanceof Object;   // gibt true zurück
+myDate instanceof String;   // gibt false zurück
+
+ +

Demonstration, dass mycar vom Typ Car und vom Typ Object ist

+ +

Der folgende Quelltext erstellt ein Objekttyp Car und einen Instanz dieses Typen, mycar. Der instanceof Operator demonstriert, dass das mycar Objekt vom Typ Car und Object ist.

+ +
function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+var mycar = new Car("Honda", "Accord", 1998);
+var a = mycar instanceof Car;    // gibt true zurück
+var b = mycar instanceof Object; // gibt true zurück
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-relational-operators', 'Relational Operators')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-11.8.6', 'The instanceof operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-11.8.6', 'The instanceof operator')}}{{Spec2('ES3')}}Initiale Definition. Implementiert in JavaScript 1.4.
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.operators.instanceof")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/logische_operatoren/index.html b/files/de/web/javascript/reference/operators/logische_operatoren/index.html new file mode 100644 index 0000000000..89c24eb33c --- /dev/null +++ b/files/de/web/javascript/reference/operators/logische_operatoren/index.html @@ -0,0 +1,246 @@ +--- +title: Logische Operatoren +slug: Web/JavaScript/Reference/Operators/Logische_Operatoren +tags: + - JavaScript + - Logic + - Logical Operators + - Not + - Operator + - Reference + - and + - or +translation_of: Web/JavaScript/Reference/Operators +--- +
{{jsSidebar("Operators")}}
+ +

Logische Operatoren werden typischerweise im Zusammenhang mit {{jsxref("Boolean")}} (logischen) Werten verwendet. Die Operatoren && (Logisches UND) und || (Logisches ODER) geben dabei den Wert von einem der Operanden zurück. Sind die Operanden mit nicht-booleschen Werten belegt, geben diese Operatoren entsprechend nicht-boolesche Werte zurück.

+ +
{{EmbedInteractiveExample("pages/js/expressions-logicaloperator.html")}}
+ + + +

Beschreibung

+ +

In der folgenden Tabelle werden die logischen Operatoren erläutert.

+ + + + + + + + + + + + + + + + + + + + + + + + +
OperatorVerwendungBeschreibung
Logisches UND (&&)ausdruck1 && ausdruck2Gibt ausdruck1 zurück, wenn er zu false konvertiert werden kann; anderfalls wird ausdruck2 zurückgegeben. Sind beide Operanden true, gibt && true zurück, Andernfalls false.
Logisches ODER (||)ausdruck1 || ausdruck2Gibt ausdruck1 zurück, wenn er zu true konvertiert werden kann; andernfalls wird ausdruck2 zurückgegeben. Ist einer der Operanden true, gibt || true zurück.
Logisches NICHT (!)!ausdruckGibt false zurück, wenn der Operand zu true konvertiert werden kann. Andernfalls wird true zurückgegeben.
+ +

Wenn ein Wert zu true konvertiert werden kann, wird er {{Glossary("truthy")}} genannt. Wenn ein Wert zu false konvertiert werden kann, wird er {{Glossary("falsy")}} genannt.

+ +

Beispiele für Ausdrücke, die zu false konvertiert werden können:

+ + + +

Auch wenn die Operatoren && und || mit nichtbooleschen Operanden verwendet werden können, gehören sie trotzdem zur Gruppe der logischen Operatoren, da ihre Rückgabewerte immer zu booleschen Werten konvertiert werden können.

+ +

Kurschlussauswertung (Short-Circuit Evaluation)

+ +

Logische Ausdrücke werden von links nach rechts ausgewertet und hierbei wird anhand der folgenden Regeln getestet, ob Kurzschlussauswertungen möglich sind:

+ + + +

Die Regeln der Logik garantieren, dass diese Auswertungen immer korrekt sind. Zu beachten ist, dass der irgendwas Teil nicht ausgewertet wird, so dass keine Seiteneffekte die von diesem Teil ausgehen ausgeführt werden. Zu beachten ist zudem, dass der irgendwas Teil ein einzelner Ausdruck ist (wie die Klammern anzeigen).

+ +

Beispielhaft betrachten wir die folgenden äquivalenten Funktionen:

+ +
function shortCircuitEvaluation() {
+  // Logisches ODER (||)
+  doSomething() || doSomethingElse();
+
+  // Logisches UND (&&)
+  doSomething() && doSomethingElse();
+}
+
+function equivalentEvaluation() {
+
+  // Logisches ODER (||)
+  var orFlag = doSomething();
+  if (!orFlag) {
+    doSomethingElse();
+  }
+
+  // Logisches UND (&&)
+  var andFlag = doSomething();
+  if (andFlag) {
+    doSomethingElse();
+  }
+}
+
+ +

Die folgenden Ausdrücke sind aufgrund der Operatorrangfolgen nicht äquivalent und betont, wie wichtig es ist, dass der rechte Operand ein einzelner Ausdruck ist (gruppiert, falls in Klammern erforderlich).

+ +
false &&  true || true      // wird zu true
+false && (true || true)     // wird zu false
+ +

Logisches UND (&&)

+ +

Im Folgenden sind Beispiele des && (logisches UND) Operators zu sehen.

+ +
a1 = true  && true      // t && t wird zu true
+a2 = true  && false     // t && f wird zu false
+a3 = false && true      // f && t wird zu false
+a4 = false && (3 == 4)  // f && f wird zu false
+a5 = 'Cat' && 'Dog'     // t && t wird zu "Dog"
+a6 = false && 'Cat'     // f && t wird zu false
+a7 = 'Cat' && false     // t && f wird zu false
+a8 = ''    && false     // f && f wird zu ""
+a9 = false && ''        // f && f wird zu false
+
+ +

Logisches ODER (||)

+ +

Im Folgenden sind Beispiele des || (logisches ODER) Operators zu sehen.

+ +
o1 = true  || true       // t || t wird zu true
+o2 = false || true       // f || t wird zu true
+o3 = true  || false      // t || f wird zu true
+o4 = false || (3 == 4)   // f || f wird zu false
+o5 = 'Cat' || 'Dog'      // t || t wird zu "Cat"
+o6 = false || 'Cat'      // f || t wird zu "Cat"
+o7 = 'Cat' || false      // t || f wird zu "Cat"
+o8 = ''    || false      // f || f wird zu false
+o9 = false || ''         // f || f wird zu ""
+
+ +

Logisches NICHT (!)

+ +

Im Folgenden sind Beispiele des ! (logisches NICHT) Operators zu sehen.

+ +
n1 = !true              // !t wird zu false
+n2 = !false             // !f wird zu true
+n3 = !"Cat"             // !t wird zu false
+
+ +

Konvertierungsregeln

+ +

Konvertierung von UND zu ODER

+ +

Die folgende Operation nutzt Booleane:

+ +
bCondition1 && bCondition2
+ +

ist äquivalent zum folgenden Ausdruck:

+ +
!(!bCondition1 || !bCondition2)
+ +

Konvertierung von ODER zu UND

+ +

Die folgende Operation nutzt Booleane:

+ +
bCondition1 || bCondition2
+ +

ist äquivalent zu folgendem Ausdruck:

+ +
!(!bCondition1 && !bCondition2)
+ +

Negierung des logischen NICHT

+ +

Die folgende Operation nutzt Booleane:

+ +
!!bCondition
+ +

ist äquivalent mit:

+ +
bCondition
+ +

Klammern in logischen Ausdrücken auflösen

+ +

Ein logischer Ausdruck wird von links nach rechts ausgewertet. Es ist immer möglich runde Klammern von einem komplexen Ausdruck zu entfernen, wenn einige Regeln beachtet werden.

+ +

Geschachteltes AND entfernen

+ +

Die folgende Operation nutzt Booleane:

+ +
bCondition1 || (bCondition2 && bCondition3)
+ +

ist äquivalent mit:

+ +
bCondition1 || bCondition2 && bCondition3
+ +

Geschachteltes OR entfernen

+ +

Die folgende Operation nutzt Booleane:

+ +
bCondition1 && (bCondition2 || bCondition3)
+ +

ist äquivalent mit:

+ +
!(!bCondition1 || !bCondition2 && !bCondition3)
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition.
{{SpecName('ES5.1', '#sec-11.11')}}{{Spec2('ES5.1')}}Definiert in mehreren Kapiteln der Spezifikation: Logical NOT Operator, Binary Logical Operators
{{SpecName('ES6', '#sec-binary-logical-operators')}}{{Spec2('ES6')}}Definiert in mehreren Kapiteln der Spezifikation: Logical NOT Operator, Binary Logical Operators
{{SpecName('ESDraft', '#sec-binary-logical-operators')}}{{Spec2('ESDraft')}}Definiert in mehreren Kapiteln der Spezifikation: Logical NOT Operator, Binary Logical Operators
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.operators.logical")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/modulo/index.html b/files/de/web/javascript/reference/operators/modulo/index.html new file mode 100644 index 0000000000..19403ab883 --- /dev/null +++ b/files/de/web/javascript/reference/operators/modulo/index.html @@ -0,0 +1,78 @@ +--- +title: Modulo (%) +slug: Web/JavaScript/Reference/Operators/Modulo +tags: + - Division mit Rest + - Divisionsalgorithmus + - Restwert + - Restwertberechnung +translation_of: Web/JavaScript/Reference/Operators/Remainder +--- +
{{jsSidebar("Operators")}}
+ +

Der Modulo-Operator (%) gibt den Restwert zurück, der übrig bleibt wenn ein Operand durch einen anderen geteilt wird. Das Vorzeichen ergibt sich aus der Wahl der Quotienten.

+ +
{{EmbedInteractiveExample("pages/js/expressions-remainder.html")}}
+ +
+ + + +

Syntax

+ +
Operator: var1 % var2
+
+ +

Examples

+ +

Remainder with positive dividend

+ +
 12 % 5  //  2
+ 1 % -2 //  1
+ 1 % 2  //  1
+ 2 % 3  //  2
+5.5 % 2 // 1.5
+
+ +

Remainder with negative dividend

+ +
-12 % 5 // -2
+-1 % 2  // -1
+-4 % 2  // -0
+ +

Remainder with NaN

+ +
NaN % 2 // NaN
+ +

Specifications

+ + + + + + + + + + +
Specification
{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Remainder operator')}}
+ +

Browser compatibility

+ + + +

{{Compat("javascript.operators.remainder")}}

+ +

See also

+ + diff --git a/files/de/web/javascript/reference/operators/new.target/index.html b/files/de/web/javascript/reference/operators/new.target/index.html new file mode 100644 index 0000000000..83f4a85b1c --- /dev/null +++ b/files/de/web/javascript/reference/operators/new.target/index.html @@ -0,0 +1,102 @@ +--- +title: new.target +slug: Web/JavaScript/Reference/Operators/new.target +tags: + - Classes + - ECMAScript 2015 + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Operators/new.target +--- +
{{JSSidebar("Operators")}}
+ +

Die new.target Eigenschaft lässt erkennen, ob eine Funktion oder ein Konstruktor mit dem new Operator aufgerufen wurde. In Konstruktoren und Funktionen die mit dem new Operator instanziiert wurde, gibt new.target eine Referenz zu dem Konstruktor oder der Funktion zurück. In normalen Funktionsaufrufen hat new.target den Wert {{jsxref("undefined")}}.

+ +
{{EmbedInteractiveExample("pages/js/expressions-newtarget.html")}}
+ + + +

Syntax

+ +
new.target
+ +

Beschreibung

+ +

Die new.target Syntax besteht aus dem Schlüsselwort "new", einem Punkt und dem Eigenschaftnamen "target". Normalerweise steht "new." für einen Eigenschaftszugriff, jedoch ist "new." kein Objekt. In Konstruktoraufrufen referenziert new.target auf den Konstruktor, der mit new aufgerufen wurde und somit bekommt "new." einen virtuellen Kontext.

+ +

Die new.target Eigenschaft ist eine Metaeigenschaft, die in allen Funktionen erreichbar ist. In Pfeilfunktionen referenziert new.target zum new.target der umschließenden Funktion.

+ +

Beispiele

+ +

new.target in Funktionsaufrufen

+ +

In normalen Funktionsaufrufen (im Gegensatz zu Konstruktorfunktionsaufrufen) ist new.target {{jsxref("undefined")}}. Damit lässt sich herausfinden, ob eine Funktion mit new als Konstruktor aufgerufen wurde.

+ +
function Foo() {
+  if (!new.target) throw 'Foo() must be called with new';
+  console.log('Foo instantiated with new');
+}
+
+Foo(); // throws "Foo() must be called with new"
+new Foo(); // logs "Foo instantiated with new"
+
+ +

new.target in Konstruktoren

+ +

In Klassenkonstruktoren referenziert new.target den Konstruktor, der direkt mit new aufgerufen wurde. Das ist auch der Fall, wenn der Konstruktor in einer Elternklasse ist und vom Kinderkonstruktor weiter delegiert wurde.

+ +
class A {
+  constructor() {
+    console.log(new.target.name);
+  }
+}
+
+class B extends A { constructor() { super(); } }
+
+var a = new A(); // logs "A"
+var b = new B(); // logs "B"
+
+class C { constructor() { console.log(new.target); } }
+class D extends C { constructor() { super(); } }
+
+var c = new C(); // logs class C{constructor(){console.log(new.target);}}
+var d = new D(); // logs class D extends C{constructor(){super();}}
+ +

Aus dem obigen Beispiel der Klasse C und D scheint es also, dass new.target auf die Klassendefinition der Klasse zeigt, die initialisiert wird. Wenn beispielsweise D mit new initialisiert wurde, wurde die Klassendefinition von D ausgegeben und in ähnlicher Weise wurde im Fall von c die Klasse C ausgegeben.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-built-in-function-objects', 'Built-in Function Objects')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}}{{Spec2('ESDraft')}}
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.operators.new_target")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/new/index.html b/files/de/web/javascript/reference/operators/new/index.html new file mode 100644 index 0000000000..b3ba18f108 --- /dev/null +++ b/files/de/web/javascript/reference/operators/new/index.html @@ -0,0 +1,190 @@ +--- +title: new Operator +slug: Web/JavaScript/Reference/Operators/new +tags: + - JavaScript + - Left-hand-side expressions + - Operator +translation_of: Web/JavaScript/Reference/Operators/new +--- +
{{jsSidebar("Operators")}}
+ +

Der new Operator erzeugt eine Instanz eines benutzerdefinierten Objekttyps oder eines Standardtyps, welcher eine Konstruktorfunktion besitzt.

+ +
{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}}
+ + + +

Syntax

+ +
new constructor[([arguments])]
+ +

Parameter

+ +
+
constructor
+
Eine Funktion, welche den Typ der Objektinstanz spezifiziert.
+
+ +
+
arguments
+
Eine Liste von Werten, die dem constructor übergeben wird.
+
+ +

Beschreibung

+ +

Das erstellen eines benutzerdefinierten Objektes benötigt zwei Schritte:

+ +
    +
  1. Definieren eines Objekttypen indem eine Funktion geschrieben wird.
    2. +
  2. Erstellen einer Instanz des Objektes mit new.
    3. +
+ +

Um ein neuen Objekttypen zu definieren, erstellt man eine Funktion für den Objekttypen, die seinen Namen und Eigenschaften spezifiziert. Ein Objekt kann Eigenschaften haben, die ebenfalls Objekte sind. Sie dazu das Beispiel unten.

+ +

Wenn der Code new Foo(...) ausgeführt wird, passieren folgende Dinge:

+ +
    +
  1. Ein neues Objekt wird erstellt, welches von Foo.prototype erbt.
    2. +
  2. Die Konstruktorfunktion Foo wird mit den spezifizierten Argumenten aufgerufen und this wird an das neu erstellte Objekt gebunden. new Foo ist gleichbedeutend mit new Foo(), d. h. wenn keine Argumentenliste spezifiziert ist, wird Foo ohne Argumente aufgerufen.
    3. +
  3. Das Objekt, welches von der Konstruktorfunktion zurückgegeben wird, ist das Resultat des ganzen new Ausdrucks. Wenn die Konstruktorfunktion nicht explizit ein Objekt zurück gibt, wird stattdessen das erstellte Objekt aus Schritt 1 zurückgegeben. (Normalerweise geben Konstruktoren keinen Wert zurück, aber sie können es tun, um den normalen Objekterstellungsprozess zu überschreiben.)
    4. +
+ +

Man kann immer eine Eigenschaft zu dem vorher erstellten Objekt hinzufügen. Zum Beispiel fügt das Statement auto1.farbe = "schwarz" die Eigenschaft farbe zu auto1 hinzu und weist dieser den Wert "schwarz" zu. Jedoch hat das keinen Effekt auf andere Objekte. Um die Eigenschaft zu allen Objekten des selben Typs hinzuzufügen, muss die Eigenschaft dem Auto Objekttypen hinzugefügt werden.

+ +

Man kann eine geteilte Eigenschaft zum vorher definierten Objekttypen hinzufügen, indem die Function.prototype Eigenschaft genutzt wird. Diese definiert eine geteilte Eigenschaft mit allen Objekten, die mit der gleichen Funktion erstellt wurde, und nicht nur bei einer Instanz des Objekttypen. Der folgende Code fügt die farbe Eigenschaft mit dem Wert "originale Farbe" zu allen Objekten des Typs Auto hinzu und überschreibt diesen Wert mit dem String "schwarz" nur in dem Instanzobjekt auto1. Für weitere Informationen siehe Prototype.

+ +
function Auto() {}
+auto1 = new Auto();
+auto2 = new Auto();
+
+console.log(auto1.farbe);    // undefined
+
+Auto.prototype.farbe = "originale Farbe";
+console.log(auto1.farbe);    // originale Farbe
+
+auto1.farbe = "schwarz";
+console.log(auto1.farbe);   // schwarz
+
+console.log(auto1.__proto__.farbe); // originale Farbe
+console.log(auto2.__proto__.farbe); // originale Farbe
+console.log(auto1.farbe);           // schwarz
+console.log(auto2.farbe);           // originale Farbe
+
+ +
+

Wenn man den new Operator nicht benutzt, wird die Konstruktorfunktion wie eine normale Funktion ausgeführt, ohne ein Objekt zu erstellen. In diesem Fall ist der Wert von this ebenfalls anders.

+
+ +

Beispiele

+ +

Objekttyp und Objektinstanz

+ +

Angenommen man möchte ein Objekttypen für Autos erstellen, man möchte den Objekttypen Auto nennen und man möchte Eigenschaften für die Marke, das Modell und das Jahr haben. Um das zu erreichen muss folgende Funktion geschrieben werden:

+ +
function Auto(marke, modell, jahr) {
+  this.marke = marke;
+  this.modell = modell;
+  this.jahr = jahr;
+}
+
+ +

Nun kann man ein Objekt mit dem Namen meinAuto wie folgt erstellen:

+ +
var meinAuto = new Auto("Eagle", "Talon TSi", 1993);
+
+ +

Dieses Statement erstellt meinAuto und wiest die spezifizierten Werte den Eigenschaften zu. Dann ist der Wert von meinAuto.marke der String "Eagle", von meinAuto.jahr die Zahl 1993 und so weiter.

+ +

Man kann beliebig viele Objekte von Auto mit new erstellen. Zum Beispiel:

+ +
var kensAuto = new Auto("Nissan", "300ZX", 1992);
+
+ +

Objekteigenschaft, die selber ein Objket

+ +

Angenommen man Definiert ein Objekt mit dem Namen Person wie folgt:

+ +
function Person(name, alter, geschlecht) {
+  this.name = name;
+  this.alter = alter;
+  this.geschlecht = geschlecht;
+}
+
+ +

Dann instantiiert man zwei neue Person Objekte wie folgt:

+ +
var rand = new Person("Rand McNally", 33, "M");
+var ken = new Person("Ken Jones", 39, "M");
+
+ +

Dann erneuert man die Definition von Auto um eine besitzer Eigenschaft , die ein Person Objekt ist, wie folgt:

+ +
function Auto(marke, modell, jahr, besitzer) {
+  this.marke = marke;
+  this.modell = modell;
+  this.jahr = jahr;
+  this.besitzer = besitzer;
+}
+
+ +

Um das neue Objekt zu instantiiert benutzt man dann folgendes:

+ +
var auto1 = new Auto("Eagle", "Talon TSi", 1993, rand);
+var auto2 = new Auto("Nissan", "300ZX", 1992, ken);
+
+ +

Statt ein Stringliteral oder einen Zahlenwert beim erstellen zu benutzen, übergibt das obere Beispiel die Objekte rand und ken als Parameter für den Besitzer. Um den Namen des Besitzers von auto2 zu erfahren, muss man die Eigenschaft wie folgt abfragen:

+ +
auto2.besitzer.name
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ESDraft', '#sec-new-operator', 'The new Operator')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-new-operator', 'The new Operator')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-11.2.2', 'The new Operator')}}{{Spec2('ES5.1')}}
{{SpecName('ES3', '#sec-11.2.2', 'The new Operator')}}{{Spec2('ES3')}}
{{SpecName('ES1', '#sec-11.2.2', 'The new Operator')}}{{Spec2('ES1')}}Initiale Definition. Implementiert in JavaScript 1.0.
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.operators.new")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/objekt_initialisierer/index.html b/files/de/web/javascript/reference/operators/objekt_initialisierer/index.html new file mode 100644 index 0000000000..32c30b7f16 --- /dev/null +++ b/files/de/web/javascript/reference/operators/objekt_initialisierer/index.html @@ -0,0 +1,315 @@ +--- +title: Objekt Initialisierer +slug: Web/JavaScript/Reference/Operators/Objekt_Initialisierer +tags: + - ECMAScript 2015 + - JSON + - JavaScript + - Literal + - Methods + - Object + - Primary Expression + - computed + - mutation + - properties +translation_of: Web/JavaScript/Reference/Operators/Object_initializer +--- +
{{JsSidebar("Operators")}}
+ +

Objekte können mit new Object(), Object.create(), oder mit der literal Notation (Initialisierungs Notation) initialisiert werden. Ein Objekt Initialisierer ist eine Komma getrennte Liste von null oder mehreren Paaren von Eigenschafts-Namen und zugehörigen Werten eines Objektes, eingeschlossen in geschwungene Klammern ({}).

+ +
{{EmbedInteractiveExample("pages/js/expressions-objectinitializer.html")}}
+ + + +

Syntax

+ +
var o = {};
+var o = { a: "foo", b: 42, c: {} };
+
+var a = "foo", b = 42, c = {};
+var o = { a: a, b: b, c: c };
+
+var o = {
+  property: function ([parameters]) {},
+  get property() {},
+  set property(value) {},
+};
+
+ +

Neue Schreibweisen in ECMAScript 2015

+ +

Man sollte in der Kompatibilitätstabelle die Unterstützung dieser Schreibweisen nachschlagen. In Umgebungen, die diese nicht unterstützen, entstehen Syntaxfehler.

+ +
// Kurzschreibweisen für Eigenschaftsnamen (ES2015)
+var a = "foo", b = 42, c = {};
+var o = { a, b, c };
+
+// Kurzschreibweise Methoden Namen (ES2015)
+var o = {
+  property([parameters]) {}
+};
+
+// Berechnete Eigenschaftsnamen (ES2015)
+var prop = "foo";
+var o = {
+  [prop]: "hey",
+  ["b" + "ar"]: "there",
+};
+ +

Beschreibung

+ +

Ein Objekt Initialisierer ist ein Ausdruck welcher die Initialisierung eines {{jsxref("Object")}} beschreibt. Objekte bestehen aus Eigenschaften, welche verwendet werden, um ein Objekt zu beschreiben. Die Werte der Objekt Eigenschaften können {{Glossary("primitive")}} Datentypen oder andere Objekte enthalten.

+ +

Objekte erzeugen

+ +

Ein leeres Objekt ohne Eigenschaften kann wie folgt erzeugt werden:

+ +
var object = {};
+ +

Jedoch: die Vorteile der literalen oder Initialisierer Notation versetzen Sie in die Lage, Objekte inklusive Eigenschaften, innerhalb geschwungener Klammern, schneller zu erzeugen. Sie schreiben einfach eine Liste von Schlüssel:Werte Paaren, getrennt durch ein Komma. Der folgende Quellcode erzeugt ein Objekt mit drei Eigenschaften mit den Schlüsseln "foo", "age" und "baz". Die Werte dieser Schlüssel sind: die Zeichenkette "bar", die Zahl 42 und die dritte Eigenschaft hat ein anderes Objekt als Wert.

+ +
var object = {
+  foo: "bar",
+  age: 42,
+  baz: { myProp: 12 },
+}
+ +

Auf Eigenschaften zugreifen

+ +

Sobald ein Objekt erzeugt worden ist, möchte man auf seine Eigenschaften lesend oder schreibend zugreifen. Auf die Eigenschaften eines Objektes kann mit der Punktnotation oder der Klammer-Notation zugegriffen werden. Siehe Eigenschaftszugriffe für weiter Informationen.

+ +
object.foo; // "bar"
+object["age"]; // 42
+
+object.foo = "baz";
+
+ +

Eigenschaften definieren

+ +

Wir haben bereits gelernt, wie man Eigenschaften mit Hilfe der Initialisierungs Syntax schreibt. Oft gibt es Variablen im Code, die Sie in einem Objekt verwenden möchten. Man sieht oft Quellcode wie den folgenden:

+ +
var a = "foo",
+    b = 42,
+    c = {};
+
+var o = {
+  a: a,
+  b: b,
+  c: c
+};
+ +

Mit ECMAScript 2015 ist eine kürzere Schreibweise verfügbar, um das Gleiche zu erreichen:

+ +
var a = "foo",
+    b = 42,
+    c = {};
+
+// Kurzschreibweise für Eigenschaftsnamen in ES2015
+var o = { a, b, c };
+
+// In anderen Worten
+console.log(); // true
+ +

Doppelte Eigenschaftsnamen

+ +

Bei Verwendung des gleichen Namens für Ihre Eigenschaften, wird die zweite Eigenschaft die erste überschreiben.

+ +
var a = {x: 1, x: 2};
+console.log(a); // { x: 2}
+
+ +

Im strikten Modus von ECMAScript 5 wurden doppelte Eigenschaftsnamen als {{jsxref("SyntaxError")}} gewertet. Mit der Einführung von berechneten Eigenschaftsnamen in ECMAScript 2015 wurde diese Einschränkung entfernt, was Duplikate zur Laufzeit möglich macht.

+ +
function haveES2015DuplicatePropertySemantics(){
+  "use strict";
+  try {
+    ({ prop: 1, prop: 2 });
+
+    // No error thrown, duplicate property names allowed in strict mode
+    return true;
+  } catch (e) {
+    // Error thrown, duplicates prohibited in strict mode
+    return false;
+  }
+}
+ +

Methoden Definitionen

+ +

Eine Eigenschaft eines Objekts kann auch auf eine Funktion oder einen Getter oder Setter-Methode verweisen.

+ +
var o = {
+  property: function ([parameters]) {},
+  get property() {},
+  set property(value) {},
+};
+ +

In ECMAScript 2015 gibt es eine kürzere Schreibweise, mit der das Schlüsselwort "function" überflüssig wird.

+ +
// Kurzschreibweise für Methoden Namen (ES2015)
+var o = {
+  property([parameters]) {},
+  * generator() {}
+};
+ +

In ECMAScript 2015 gibt es eine Möglichkeit Eigenschaften mit einer Generatorfunktion zu definierten:

+ +
var o = {
+  *generator() {
+    ........
+  }
+};
+ +

Diese ist gleich zur ES5 ähnlichen Notation (aber ECMAScript 5 hat keine Generatorfunktionen):

+ +
var o = {
+  generator = function* () {
+    ........
+  }
+}
+ +

Für weitere Informationen und Beispiele zu Methoden, siehe Methodendefinitionen.

+ +

Berechnete Bezeichnernamen

+ +

Beginnend mit ECMAScript 2015, unterstützt die Objekt Initialisierer Syntax auch berechnete Bezeichnernamen für Objekt Eigenschaften. Das gestatt dem Programmierer einen Ausdruck in eckigen Klammern anzugeben, aus welchem der Bezeichnernamen für die Objekt Eigenschaft berechnet wird. Die Schreibweise dafür ist analog zu der Klammer-Notation für den Zugriff auf Objekt Eigenschaften welche Sie bereits benutzt haben. Dieselbe Syntax kann nun für Eigenschaften Bezeichner verwendet werden:

+ +
// Computed property names (ES2015)
+var i = 0;
+var a = {
+  ["foo" + ++i]: i,
+  ["foo" + ++i]: i,
+  ["foo" + ++i]: i
+};
+
+console.log(a.foo1); // 1
+console.log(a.foo2); // 2
+console.log(a.foo3); // 3
+
+var param = 'size';
+var config = {
+  [param]: 12,
+  ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4
+};
+
+console.log(config); // { size: 12, mobileSize: 4 }
+ +

Spread Eigenschaften

+ +

Die Vorschlag von Rest/Spread Eigenschaft für ECMAScript (Stage 4) fügt Spread Eigenschaften zu Objektliteralen hinzu. Er kopiert eigene aufzählbare Eigenschaften des genutzten Objektes in ein neues Objekt.

+ +

Oberflächliches Clonen (ausgenommen Eigenschaften) oder Verschmelzen von Objekten ist nun mit einer Kürzeren Syntax als {{jsxref("Object.assign()")}} möglich.

+ +
var obj1 = { foo: 'bar', x: 42 };
+var obj2 = { foo: 'baz', y: 13 };
+
+var clonedObj = { ...obj1 };
+// Object { foo: 'bar', x: 42 };
+
+var mergeObj = { ...obj1, ...obj2 };
+// Object { foo: 'baz', x: 42, y: 13 }
+ +

Zu beachten ist, dass {{jsxref("Object.assign()")}} Setters benutzt, was der Spread Operator nicht macht.

+ +

Prototypmutationen

+ +

Eine Eigenschaft Definition der Form __proto__: Wert oder "__proto__": Wert erzeugt keine Eigenschaft mit dem Namen __proto__. Wenn der angegebene Wert ein Objekt oder null ist, wird stattdessen der [[Prototyp]] des erzeugten Objektes auf den angegebenen Wert geändert. (Das Objekt wird nicht verändert, falls der Wert kein Objekt oder null ist.)

+ +
var obj1 = {};
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+
+var obj2 = { __proto__: null };
+assert(Object.getPrototypeOf(obj2) === null);
+
+var protoObj = {};
+var obj3 = { "__proto__": protoObj };
+assert(Object.getPrototypeOf(obj3) === protoObj);
+
+var obj4 = { __proto__: "not an object or null" };
+assert(Object.getPrototypeOf(obj4) === Object.prototype);
+assert(!obj4.hasOwnProperty("__proto__"));
+
+ +

Pro Objekt-Literal ist nur eine einzelne Prototypmutation erlaubt: mehrfache Prototyp Mutationen führen zu einem Syntax Fehler.

+ +

Eigenschaftsdefinitionen welche nicht von der Doppelpunkt Notation Gebrauch machen, sind keine Prototyp Mutationen: es sind Eigenschaftsdefinitionen die sich verhalten wie jede andere Definition von Eigenschaftsbezeichnern auch.

+ +
var __proto__ = "variable";
+
+var obj1 = { __proto__ };
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+assert(obj1.hasOwnProperty("__proto__"));
+assert(obj1.__proto__ === "variable");
+
+var obj2 = { __proto__() { return "hello"; } };
+assert(obj2.__proto__() === "hello");
+
+var obj3 = { ["__prot" + "o__"]: 17 };
+assert(obj3.__proto__ === 17);
+
+ +

Objektliteral-Notation vs JSON

+ +

Die Objekt-Literal Notation ist nicht dasselbe wie die JavaScript Object Notation (JSON). Obwohl sie ähnlich aussehen, gibt es Unterschiede zwischen ihnen:

+ + + +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition.
{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}{{Spec2('ES5.1')}}Getter und Setter hinzugefügt.
{{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}}{{Spec2('ES2015')}}Kurzschreibweise für Methoden-/Eigenschaftsnamen und berechnete Eigenschaftsnamen hinzugefügt.
{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}{{Spec2('ESDraft')}}
Rest/Spread Properties for ECMAScript EntwurfStage 4 (Fertig).
+ +

Browserkompatibilität

+ +
+ + +

{{Compat("javascript.operators.object_initializer")}}

+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/operator_precedence/index.html b/files/de/web/javascript/reference/operators/operator_precedence/index.html new file mode 100644 index 0000000000..e258a96525 --- /dev/null +++ b/files/de/web/javascript/reference/operators/operator_precedence/index.html @@ -0,0 +1,318 @@ +--- +title: Operatorenpriorität +slug: Web/JavaScript/Reference/Operators/Operator_Precedence +tags: + - JavaScript + - Operator + - precedence +translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence +--- +

{{jsSidebar("Operators")}}

+ +

Die Operatorpriorität bestimmt, in welcher Reihenfolge Operatoren ausgeführt werden. Operatoren, die in der Rangfolge zuerst kommen, werden auch zuerst ausgeführt.

+ +

{{EmbedInteractiveExample("pages/js/expressions-operatorprecedence.html")}}

+ +

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

+ +

Assoziativität

+ +

Assoziativität, bestimmt in welcher Reihenfolge Operatoren der selben Rangfolge ausgeführt werden. Betrachten wir als Beispiel den folgenden Ausdruck:

+ +
a OP b OP c
+
+ +

Linksassoziativ (links nach rechts) bedeutet, dass der Code als (a OP b) OP c ausgeführt wird, während rechtssassoziativ (rechts nach links) heißt, dass der Code wie a OP (b OP c) ausgeführt wird. Zuordnungsoperatoren sind rechtssassoziativ, also kann man schreiben:

+ +
a = b = 5;
+
+ +

mit dem erwarteten Resultat, dass sowohl a als auch b den Wert 5 haben. Das liegt daran, dass Zuordnungsopertoren den Wert zurükgeben, den sie zuerst zugeordnet haben: Zuerst wird b auf 5 gesetzt; daraufhin wird a auf 5, also den Rückgabewert von b = 5, gesetzt.

+ +

Tabelle

+ +

Die nachfolgende Tabelle geordnet von der höchsten (20) bis zur kleinsten (1) Priorität.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrioritätOperatorAssoziativitätEinzelner Operator
20{{jsxref("Operators/Grouping", "Gruppieren")}}n/a( … )
19{{jsxref("Operators/Property_Accessors", "Eigenschaftszugriff", "#Dot_notation")}}links nach rechts… . …
{{jsxref("Operators/Property_Accessors", "Berechnete Eigenschaften Access","#Bracket_notation")}}links nach rechts… [ … ]
{{jsxref("Operators/new","new")}} (mit Argumentenliste)n/anew … ( … )
Funktionsaufruflinks nach rechts… ( … )
18{{jsxref("Operators/new","new")}} (ohne Argumentenliste)rechts nach linksnew …
17{{jsxref("Operators/Arithmetic_Operators","Postfix Inkrement","#Increment")}}n/a… ++
{{jsxref("Operators/Arithmetic_Operators","Postfix Dekrement","#Decrement")}}… --
16Logisches NICHTrechts nach links! …
Bitweises NICHT~ …
Unäres Plus+ …
Unäres Minus- …
Prefix Inkrement++ …
Prefix Dekrement-- …
typeoftypeof …
voidvoid …
deletedelete …
awaitawait …
15Potenzierungrechts nach links… ** …
14Multiplikationlinks nach rechts… * …
Division… / …
Rest… % …
13Additionlinks nach rechts… + …
Subtraktion… - …
12Bitweise Linksverschiebunglinks nach rechts… << …
Bitweise Rechtsverschiebung… >> …
Bitweise Vorzeichnelose Rechtsverschiebung… >>> …
11Kleiner alslinks nach rechts… < …
Kleiner als oder gleich… <= …
Größer als… > …
Größer als oder gleich… >= …
in… in …
instanceof… instanceof …
10Gleichheitlinks nach rechts… == …
Ungleichheit… != …
Strikte Gleichheit… === …
Strikte Ungleichheit… !== …
9Bitweises UNDlinks nach rechts… & …
8Bitweises Exklusiv ODER (XOR)links nach rechts… ^ …
7Bitweises ODERlinks nach rechts… | …
6Logisches UNDlinks nach rechts… && …
5Logisches ODERlinks nach rechts… || …
4Bedingtrechts nach links… ? … : …
3Zuweisungrechts nach links… = …
… += …
… -= …
… **= …
… *= …
… /= …
… %= …
… <<= …
… >>= …
… >>>= …
… &= …
… ^= …
… |= …
2yieldrechts nach linksyield …
yield*yield* …
1Spreadn/a... …
0Komma / Sequenzlinks nach rechts… , …
diff --git a/files/de/web/javascript/reference/operators/optionale_verkettung/index.html b/files/de/web/javascript/reference/operators/optionale_verkettung/index.html new file mode 100644 index 0000000000..8ef763b3cd --- /dev/null +++ b/files/de/web/javascript/reference/operators/optionale_verkettung/index.html @@ -0,0 +1,194 @@ +--- +title: Optionale Verkettung +slug: Web/JavaScript/Reference/Operators/Optionale_Verkettung +tags: + - Experimentell + - JavaScript + - Operator + - Optionale Verkettung + - Referenz + - Verkettung +translation_of: Web/JavaScript/Reference/Operators/Optional_chaining +--- +
{{JSSidebar("Operators")}}
+ +

{{SeeCompatTable}}

+ +

Der Optionale-Verkettungs-Operator (Optional Chaining) ?. ermöglicht es, einen Wert aus einer Eigenschaft tief innerhalb einer Verkettung von Objekt-Eigenschaften auszulesen, ohne dabei explizit überprüfen zu müssen, ob jede Referenz in der Kette valide ist.Der ?. Operator funktioniert ähnlich wie der . -Verkettungs Operator, außer dass er keinen Fehler bei einem {{glossary("nullish")}} ({{JSxRef("null")}} oder {{JSxRef("undefined")}}) Wert auswirft, sondern stattdessen den Ausdruck beendet und undefined zurückgibt. Wird er mit Funktionsaufrufen verwendet, wirft der Aufruf undefined zurück, wenn die Funktion nicht existiert.

+ +

Das Ergebnis sind kürzere und einfacherere Anweisungen wenn auf verkettete Eigenschaften zugegriffen wird, bei denen die Möglichkeit besteht, dass sie fehlen. Er kann außerdem hilfreich sein, wenn man den Inhalt eines Objektes erhalten möchte wenn es keine Garantie dafür gibt welche Eigenschaften benötigt werden.

+ +
{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html")}}
+ +
+ + + +

Syntax

+ +
obj?.prop
+obj?.[expr]
+arr?.[index]
+func?.(args)
+
+ +

Beschreibung

+ +

Der Optionale-Verkettungs-Operator ermöglicht einen Weg auf Werte in einer Verkettung aus Eigenschaften zuzugreifen, wenn die Möglichkeit existiert, dass eine der Referenzen oder Funktionen in der Kette undefined oder null sind.

+ +

Als Beispiel nehmen wir ein Objekt obj, dass eine verschachtelte Struktur besitzt. Ohne Optionale Verkettung müssen wir beim Zugriff auf einen Wert jede Referenz innerhalb der Kette auf ihre Existenz überprüfen:

+ +
let nestedProp = obj.first && obj.first.second;
+ +

Der Wert von obj.first wird darauf geprüft nicht-null (und nicht-undefined) zu sein und erst dann greifen wir auf den Wert obj.first.second zu. Dies verhindet einen Fehler der auftreten würde wenn wir direkt obj.first.second ansprechen ohne zuvor obj.first zu prüfen.

+ +

Mit dem Optionale-Verkettungs-Operator (?.) allerdings müssen wir nicht explizit testen und können eine Abkürzung auf Basis des Wertes von obj.first nutzen bevor auf auf obj.first.second zugreifen:

+ +
let nestedProp = obj.first?.second;
+ +

Durch die Verwendung des ?.-Operators statt nur dem . stellet JavaScript sicher, dass zuvor geprüft wird ob obj.first nicht null oder undefined ist bevor auf obj.first.second zugegriffen wird. Wenn obj.first null oder undefined ist, wird der Ausdruck automatisch sofort beendet und wirft den Wert undefined zurück

+ +

Das ist dasselbe wie folgender Ausdruck:

+ +
let nestedProp = ((obj.first === null || obj.first === undefined) ? undefined : obj.first.second);
+ +

Optionale Verkettung mit Funktionsaufrufen

+ +

Optionale Verkettung kann verwendet werden um Funktionen aufzurufen, die womöglich nicht existeiren. Das kann hilfreich sein wenn man z.B. eine API verwenden möchte die möglicherweise nicht verfügbar ist, entweder durch das Alter der Implementierung oder weil die Funktionalität nicht für das Gerät verfügbar ist.

+ +

Verwendet man optionale Verkettung mit Funktionsaufrufen, wird der Ausdruck automatisch undefined zurückwerfen, sollte die Funktion nicht existieren:

+ +
let result = someInterface.customMethod?.();
+ +
+

Note: Wenn eine Eigenschaft mit dem Namen existiert, die aber keine Funktion ist, wird ?. trotzdem eine {{JSxRef("TypeError")}} Ausnahme auslösen (x.y ist keine Funktion).

+
+ +

Optionale Callbacks oder Event Handler handhaben

+ +

If you use callbacks or fetch methods from an object with a destructuring assignment, you may have non-existent values that you cannot call as functions unless you have tested their existence. Using ?., you can avoid this extra test:

+ +
// Written as of ES2019
+function doSomething(onContent, onError) {
+  try {
+    // ... do something with the data
+  }
+  catch (err) {
+    if (onError) { // Testing if onError really exists
+      onError(err.message);
+    }
+  }
+}
+
+ +
// Using optional chaining with function calls
+function doSomething(onContent, onError) {
+  try {
+   // ... do something with the data
+  }
+  catch (err) {
+    onError?.(err.message); // no exception if onError is undefined
+  }
+}
+
+ +

Optional chaining with expressions

+ +

You can also use the optional chaining operator when accessing properties with an expression using the bracket notation of the property accessor:

+ +
let nestedProp = obj?.['prop' + 'Name'];
+
+ +

Array item access with optional chaining

+ +
let arrayItem = arr?.[42];
+ +

Examples

+ +

Basic example

+ +

This example looks for the value of the name property for the member bar in a map when there is no such member. The result is therefore undefined.

+ +
let myMap = new Map();
+myMap.set("foo", {name: "baz", desc: "inga"});
+
+let nameBar = myMap.get("bar")?.name;
+ +

Short-circuiting evaluation

+ +

When using optional chaining with expressions, if the left operand is null or undefined, the expression will not be evaluated. For instance:

+ +
let potentiallyNullObj = null;
+let x = 0;
+let prop = potentiallyNullObj?.[x++];
+
+console.log(x); // 0 as x was not incremented
+
+ +

Stacking the optional chaining operator

+ +

With nested structures, it is possible to use optional chaining multiple times:

+ +
let customer = {
+  name: "Carl",
+  details: {
+    age: 82,
+    location: "Paradise Falls" // detailed address is unknown
+  }
+};
+let customerCity = customer.details?.address?.city;
+
+// … this also works with optional chaining function call
+let duration = vacations.trip?.getTime?.();
+
+ +

Combining with the nullish coalescing operator

+ +

The nullish coalescing operator may be used after optional chaining in order to build a default value when none was found:

+ +
let customer = {
+  name: "Carl",
+  details: { age: 82 }
+};
+const customerCity = customer?.city ?? "Unknown city";
+console.log(customerCity); // Unknown city
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
Proposal for the "optional chaining" operatorStage 4
+ +

Browser compatibility

+ +
+ + +

{{Compat("javascript.operators.optional_chaining")}}

+
+ +

Implementation Progress

+ +

The following table provides a daily implementation status for this feature, because this feature has not yet reached cross-browser stability. The data is generated by running the relevant feature tests in Test262, the standard test suite of JavaScript, in the nightly build, or latest release of each browser's JavaScript engine.

+ +
{{EmbedTest262ReportResultsTable("optional-chaining")}}
+ +

See also

+ + diff --git a/files/de/web/javascript/reference/operators/pipeline_operator/index.html b/files/de/web/javascript/reference/operators/pipeline_operator/index.html new file mode 100644 index 0000000000..653e1a859d --- /dev/null +++ b/files/de/web/javascript/reference/operators/pipeline_operator/index.html @@ -0,0 +1,67 @@ +--- +title: Pipeline Operator +slug: Web/JavaScript/Reference/Operators/Pipeline_operator +tags: + - Experimental + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator +--- +
{{jsSidebar("Operators")}} {{SeeCompatTable}}
+ +

Der experimentelle Pipline Operator |> (aktuell in Stage 1) erlaubt es verkettete Funktionsaufrufe in einer Lesbaren form zu erstellen. Grundsätzlich ist der Pipline Operator syntaktischer Zucker für den Aufruf einer Funktion mit einem Argument. Er erlaubt es

+ +

'%21' |> decodeURI statt decodeURI('%21') zu schreiben.

+ +

Syntax

+ +
expression |> function
+ +

Beispiele

+ +

Verkettete Funktionsaufrufe

+ +

Der Pipline Operator kann die Lesbarkeit von verketteten Funktionsaufrufen verbessern.

+ +
const double = (n) => n * 2;
+const increment = (n) => n + 1;
+
+// Ohne Pipeline Operator
+double(increment(double(double(5)))); // 42
+
+// mit Pipeline Operator
+5 |> double |> double |> increment |> double; // 42
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
Pipeline operator draftStage 1Kein Teil der ECMAScript Spezifikation.
+ +

Browserkompatibilität

+ +
+ + +

{{Compat("javascript.operators.pipeline")}}

+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/property_accessors/index.html b/files/de/web/javascript/reference/operators/property_accessors/index.html new file mode 100644 index 0000000000..9dac328d6a --- /dev/null +++ b/files/de/web/javascript/reference/operators/property_accessors/index.html @@ -0,0 +1,150 @@ +--- +title: Eigenschaftszugriff +slug: Web/JavaScript/Reference/Operators/Property_Accessors +tags: + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Operators/Property_Accessors +--- +
{{jsSidebar("Operators")}}
+ +

Eigenschaftszugriffe erlauben den Zugriff auf Eigenschaften eines Objekts, indem die Punktnotation oder Klammernotation benutzt wird.

+ +
{{EmbedInteractiveExample("pages/js/expressions-propertyaccessors.html")}}
+ + + +

Syntax

+ +
object.property
+object['property']
+
+ +

Beschreibung

+ +

Man kann ein Objekt wie ein assoziatives Array (auch bekannt als Map, Dictionary, Hash, lookup table) vorstellen. Die Schlüssel im Array sind die Namen der Eigenschaften des Objekts. Es ist typisch, wenn man von Eigenschaften eines Objekts spricht, zwischen Eigenschaften und Methoden zu unterscheiden. Die Eigenschaften/Methoden-Unterscheidung ist jedoch nur eine Konvention. Eine Methode ist einfach eine Eigenschaft die aufgerufen werden kann, zum Beispiel wenn sie als Wert eine Referenz auf eine Funktions Instanz hat.

+ +

Es gibt zwei Wege auf Eigenschaften zuzugreifen: Die Punktnotation und die Klammernotation.

+ +

Punktnotation

+ +
get = object.property;
+object.property = set;
+
+ +

In diesem Quelltext muss property ein gültiger Bezeichner ein, d. h. eine Sequenz von alphanumerischen Zeichen inklusive Unterstrich (_) und Dollarzeichen ($) die nicht mit einer Nummer beginnen können. Zum Beispiel ist object.$1 gültig währenddem object.1 nicht gültig ist.

+ +
document.createElement('pre');
+
+ +

Hier wird die Methode namens "createElement" von document erfragt und aufgerufen.

+ +

Wenn man eine Methode für ein numerisches Literal nutzt, das keinen Exponenten und keine Kommastelle besitzt, können vor dem Punkt, der vor dem Methodenaufruf steht, Whitespaces stehen, um die Interpretation des Punktes als Komma zu verhindern.

+ +
77 .toExponential();
+// oder
+77
+.toExponential();
+// oder
+(77).toExponential();
+// oder
+77..toExponential();
+// oder
+77.0.toExponential();
+// weil 77. === 77.0, keine Zweideutigkeit
+ +

Klammernotation

+ +
get = object[property_name];
+object[property_name] = set;
+
+ +

property_name ist ein String. Der String muss kein gültiger Bezeichner sein; er kann einen beliebigen Wert haben, z. B. "1foo", "!bar!" oder sogar " "  (ein Leerzeichen).

+ +
document['createElement']('pre');
+
+ +

Dieses macht genau dasselbe wie das vorherige Beispiel.

+ +

Ein Leerzeichen vor der Klammernotation ist erlaubt.

+ +
document ['createElement']('pre');
+ +

Eigenschaftensnamen

+ +

Eigenschaftsnamen müssen Strings sein. Das bedeutet dass Objekte, die kein String sind, nicht als Schlüssel in einem Objekt verwendet werden können. Jedes Objekt das keine String ist, inklusive Zahlen, wird mittels toString in einen String umgewandelt.

+ +
var object = {};
+object['1'] = 'value';
+console.log(object[1]);
+
+ +

Dies gibt "value" aus, weil 1 in '1' umgewandelt wird.

+ +
var foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {};
+object[foo] = 'value';
+console.log(object[bar]);
+
+ +

Dies gibt auch "value" aus, weil beide Objekte, foo und bar, in den gleiche String umgewandelt werden. In der SpiderMonkey JavaScript Engine ist dieser String "['object Object']".

+ +

Methodenbindung

+ +

Eine Methode ist nicht an ein Objekt gebunden zu dem sie gehört. Vor allem this ist nicht an eine Methode gebunden, d. h. this muss nicht unbedingt auf das Objekt verweisen das die Methode enthält. this wird stattdessen vom Funktionsaufruf gesetzt. Siehe auch this dazu.

+ +

Hinweis zu eval

+ +

JavaScript-Anfänger machen oft den Fehler eval zu nutzen wo die Klammernotation verwendet werden kann. Zum Beispiel sieht man folgende Syntax häufig in vielen Skripten.

+ +
x = eval('document.forms.form_name.elements.' + strFormControl + '.value');
+
+ +

eval ist langsam und sollte wenn möglich vermieden werden. Außerdem würde strFormControl auch einen Bezeichner beinhalten müssen der für Namen und IDs von Formularelementen nicht benötigt wird. Es ist besser die Klammernotation zu verwenden.

+ +
x = document.forms['form_name'].elements[strFormControl].value;
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ESDraft', '#sec-property-accessors', 'Property Accessors')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-property-accessors', 'Property Accessors')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-11.2.1', 'Property Accessors')}}{{Spec2('ES5.1')}} 
{{SpecName('ES1', '#sec-11.2.1', 'Property Accessors')}}{{Spec2('ES1')}}Initiale Definition. Implementiert in JavaScript 1.0.
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.operators.property_accessors")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/spread_operator/index.html b/files/de/web/javascript/reference/operators/spread_operator/index.html new file mode 100644 index 0000000000..13b3070be5 --- /dev/null +++ b/files/de/web/javascript/reference/operators/spread_operator/index.html @@ -0,0 +1,219 @@ +--- +title: Spread-Operator +slug: Web/JavaScript/Reference/Operators/Spread_operator +tags: + - ECMAScript 2015 + - Iterator + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +--- +
{{jsSidebar("Operators")}}
+ +

Mit der Spread-Syntax kann ein einzelner Ausdruck dort expandiert werden, wo mehrere Argumente (bei Funktionsaufrufen), mehrere Elemente (für Array-Literale) oder mehrere Variablen (für destrukturierende Anweisungen) erwartet werden.

+ +

Syntax

+ +

Für Funktionsaufrufe:

+ +
myFunction(...iterableObj);
+
+ +

Für Array-Literale:

+ +
[...iterableObj, 4, 5, 6]
+ +

Beispiele

+ +

Ein besseres "apply"

+ +

Beispiel: Für gewöhnlich wird {{jsxref( "Function.prototype.apply")}} verwendet, wenn man die Elemente eines Arrays als Argumente eines Funktionsaufrufs nutzen möchte:

+ +
function myFunction(x, y, z) { }
+var args = [0, 1, 2];
+myFunction.apply(null, args);
+ +

Mit dem ES2015 Spread-Operator kann das nun wie folgt geschrieben werden:

+ +
function myFunction(x, y, z) { }
+var args = [0, 1, 2];
+myFunction(...args);
+ +

Die Spread-Syntax kann für jedes beliebige Argument der Argumentliste verwendet werden, und sie kann auch mehrmals verwendet werden:

+ +
function myFunction(v, w, x, y, z) { }
+var args = [0, 1];
+myFunction(-1, ...args, 2, ...[3]);
+ +

Ein mächtigeres Array-Literal

+ +

Beispiel: Wenn man ohne den Spread-Operator ein neues Array erstellen will, bei dem ein Teil davon ein bereits bestehendes Array sein soll, dann ist die Array-Literal-Syntax nicht mehr ausreichend und man muss auf imperative Programmierung mit einer Kombination aus push, splice, concat, etc. zurückgreifen. Mit der Spread-Syntax jedoch kann das viel prägnanter ausgedrückt werden:

+ +
var parts = ['shoulders', 'knees'];
+var lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "and", "toes"]
+
+ +

Genau wie der Spread-Operator für Argumentlisten kann ... überall im Array-Literal verwendet werden, auch mehrmals.

+ +

"Apply" für "new"

+ +

Beispiel: In ES5 kann new nicht mit apply kombiniert werden (nach den ES5-Regeln führt apply einen [[Call]] aus, keinen [[Construct]]). Die Spread-Syntax von ES2015 unterstützt dies auf ganz natürliche Weise:

+ +
var dateFields = readDateFields(database);
+var d = new Date(...dateFields);
+ +

Ein Array kopieren

+ +
var arr = [1,2,3];
+var arr2 = [...arr]; // wie arr.slice()
+arr2.push(4);        // arr2 wird [1,2,3,4], arr bleibt unverändert.
+ +

Ein besseres "push"

+ +

Beispiel: {{jsxref("Global_Objects/Array/push", "push")}} wird oft verwendet um alle Elemente eines Arrays an das Ende eines bestehenden Arrays anzuhängen. Das wird in ES5 oft wie folgt umgesetzt:

+ +
var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// Append all items from arr2 onto arr1
+Array.prototype.push.apply(arr1, arr2);
+ +

Mit dem Spread-Operator von ES2015 wird daraus:

+ +
var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1.push(...arr2);
+ +

Nur "apply" für iterables

+ +
var obj = {"key1":"value1"};
+function myFunction(x) {
+    console.log(x) // undefined
+}
+myFunction(...obj);
+var args = [...obj];
+console.log(args, args.length); // [] 0
+ +

Rest-Syntax (Parameter)

+ +

Rest-Syntax sieht genauso aus wie die Spread-Syntax und wird für das Destrukturieren von Arrays und Objekten eingesetzt. Rest-Syntax ist sozusagen das Gegenteil von Spread-Syntax:  Spread klappt die einzelnen Bestandteile eines Arrays aus, während Rest verschiedene einzelne Elemente zu einem Array zusammenfasst.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-array-initializer')}}{{Spec2('ES2015')}}Definiert in verschiedenen Abschnitten der Spezifikation: Array Initializer, Argument Lists
{{SpecName('ESDraft', '#sec-array-initializer')}}{{Spec2('ESDraft')}} 
+ +

Browser-Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Spread-Operation innerhalb von Array-Literalen{{CompatChrome("46")}}{{CompatGeckoDesktop("16")}}{{CompatIE("Edge")}}{{CompatNo}}7.1
Spread-Operation innerhalb von Funktionsaufrufen{{CompatChrome("46")}}{{CompatGeckoDesktop("27")}}{{CompatIE("Edge")}}{{CompatNo}}7.1
Spread-Operation beim Destrukturieren ("destructuring"){{CompatChrome("49")}}{{CompatGeckoDesktop("34")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Spread-Operation innerhalb von Array-Literalen{{CompatNo}}{{CompatChrome("46")}}{{CompatGeckoMobile("16")}}{{CompatNo}}{{CompatNo}}8{{CompatChrome("46")}}
Spread-Operation innerhalb von Funktionsaufrufen{{CompatNo}}{{CompatChrome("46")}}{{CompatGeckoMobile("27")}}{{CompatNo}}{{CompatNo}}8{{CompatChrome("46")}}
Spread-Operation beim Destrukturieren ("destructuring"){{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("34")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/spread_syntax/index.html b/files/de/web/javascript/reference/operators/spread_syntax/index.html new file mode 100644 index 0000000000..cf1e6da016 --- /dev/null +++ b/files/de/web/javascript/reference/operators/spread_syntax/index.html @@ -0,0 +1,236 @@ +--- +title: Spread syntax +slug: Web/JavaScript/Reference/Operators/Spread_syntax +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +--- +
{{jsSidebar("Operators")}}
+ +
Die Spread-Syntax erlaubt es, einen einzelnen Array-Ausdruck oder String an Stellen zu expandieren, an denen Null oder mehr Argumente (für Funktionsaufrufe) oder Elemente (für Array-Literale) erwartet werden, oder einen Objekt-Ausdruck an Stellen zu expandieren, an denen Null oder mehr Schlüssel-Wert-Paare (für Objektliterale) erwartet werden.
+ +
{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}
+ + + +

Syntax

+ +

Für Funktionsaufrufe:

+ +
myFunction(...iterableObj);
+
+ +

Für Array-Literale oder Strings:

+ +
[...iterableObj, '4', 'fünf', 6];
+ +

Für Objektliterale (neu in ECMAScript 2018):

+ +
let objClone = { ...obj };
+ +

Beispiele

+ +

Spread in Funktionsaufrufen

+ +

Apply ersetzen

+ +

Es ist üblich {{jsxref( "Function.prototype.apply")}} zu benutzen, wenn man die Elemente eines Arrays als Argumente eines Funktionsaufrufs nutzen möchte.

+ +
function myFunction(x, y, z) { }
+var args = [0, 1, 2];
+myFunction.apply(null, args);
+ +

Mit der Spread-Syntax lässt sich das ganze wie folgt schreiben:

+ +
function myFunction(x, y, z) { }
+var args = [0, 1, 2];
+myFunction(...args);
+ +

Jedes Argument der Argumentliste kann die Spread-Syntax verwenden, und sie kann auch mehrfach verwendet werden.

+ +
function myFunction(v, w, x, y, z) { }
+var args = [0, 1];
+myFunction(-1, ...args, 2, ...[3]);
+ +

Apply bei new

+ +

Beim Aufruf eines Konstruktors mit new, ist es nicht möglich ein Array und apply direkt zu benutzen (apply führt [[Call]] und nicht [[Construct]] aus). Allerdings kann dank der Spread-Syntax ein Array mit new verwendet werden:

+ +
var dateFields = [1970, 0, 1];  // 1. Januar 1970
+var d = new Date(...dateFields);
+
+ +

Um new mit einem Array ohne die Spread-Syntax zu nutzen, müsste man das indirekt mit Partial Application umsetzen:

+ +
function applyAndNew(constructor, args) {
+  function partial () {
+    return constructor.apply(this, args);
+  };
+  if (typeof constructor.prototype === "object") {
+    partial.prototype = Object.create(constructor.prototype);
+  }
+  return partial;
+}
+
+
+function myConstructor () {
+  console.log("arguments.length: " + arguments.length);
+  console.log(arguments);
+  this.prop1="val1";
+  this.prop2="val2";
+};
+
+var myArguments = ["hi", "wie", "geht's", "dir", "kumpel", null];
+var myConstructorWithArguments = applyAndNew(myConstructor, myArguments);
+
+console.log(new myConstructorWithArguments);
+// (internal log of myConstructor):           arguments.length: 6
+// (internal log of myConstructor):           ["hi", "wie", "geht's", "dir", "kumpel", null]
+// (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}
+ +

Spread bei Array-Literalen

+ +

Ein mächtigeres Array-Literal

+ +

Ohne Spread-Syntax ist die Array-Literal-Syntax nicht ausreichend, um ein neues Array zu erzeugen, das aus einem bereits existierenden Array besteht. Man muss dann auf imperative Programmierung mit einer Kombination aus push, splice, concat, etc. umsteigen. Mit Spread-Syntax wird der Code kurz und bündig:

+ +
var parts = ['Schultern', 'Knie'];
+var lyrics = ['Kopf', ...parts, 'und', 'Zehen'];
+// ["Kopf", "Schultern", "Knie", "und", "Zehen"]
+
+ +

Genau wie bei Argumentlisten von Funktionsaufrufen kann ... überall und mehrach bei Array-Literalen benutzt werden.

+ +

Ein Array kopieren

+ +
var arr = [1, 2, 3];
+var arr2 = [...arr]; // wie arr.slice()
+arr2.push(4);
+
+// arr2 enthält[1, 2, 3, 4]
+// arr bleibt unverändert
+
+ +

Bemerkung: Spread-Syntax geht beim Kopieren eines Arrays effektiv eine Ebene tief. Daher kann es für das Kopieren mehrdimensionaler Arrays ungeeignet sein, wie das folgende Beispiel zeigt (dasselbe gilt für {{jsxref("Object.assign()")}} und Spread-Syntax).

+ +
var a = [[1], [2], [3]];
+var b = [...a];
+b.shift().shift(); // 1
+// Auch Array a wurde verändert. [[], [2], [3]]
+
+ +

Eine bessere Möglichkeit, Arrays zu verketten

+ +

{{jsxref("Array.concat")}} wird oft verwendet, um ein Array an das Ende eines bestehenden Arrays anzuhängen. Ohne Spread-Syntax wird dies wie folgt gemacht:

+ +
var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// Hänge alle Elemente von arr2 an arr1
+arr1 = arr1.concat(arr2);
+ +

Mit Spread-Syntax wird daraus:

+ +
var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1 = [...arr1, ...arr2];
+
+ +

{{jsxref("Array.unshift")}} wird oft verwendet, um ein Array von Werten am Anfang eines bestehenden Arrays einzufügen. Ohne Spread-Syntax wird dies wie folgt gemacht:

+ +
var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// Alle Items von arr2 auf arr1 voranstellen
+Array.prototype.unshift.apply(arr1, arr2) // arr1 ist jetzt [3, 4, 5, 0, 1, 2]
+ +

Bei der Spread-Syntax wird dies zu [Beachten Sie jedoch, dass dies ein neues Array arr1 erzeugt. Im Gegensatz zu {{jsxref("Array.unshift")}} ändert es nicht das ursprüngliche Array arr1 in-place]:

+ +
var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1 = [...arr2, ...arr1]; // arr1 ist jetzt [3, 4, 5, 0, 1, 2]
+
+ +

Spread für Objektliterale

+ +

Der Vorschlag zu Rest-/Spread-Attributen für ECMAScript (Stufe 4) fügt Spread-Attribute zu Objektliteralen hinzu. Dadurch werden die abzählbaren Attribute von einem gegebenen Objekt zu einem neuen hinzugefügt.

+ +

Flaches Klonen (ohne prototype) oder Zusammenführen von Objekten ist nun mit einer kürzeren Syntax als {{jsxref("Object.assign()")}} möglich.

+ +
var obj1 = { foo: 'bar', x: 42 };
+var obj2 = { foo: 'baz', y: 13 };
+
+var clonedObj = { ...obj1 };
+// Object { foo: "bar", x: 42 }
+
+var mergedObj = { ...obj1, ...obj2 };
+// Object { foo: "baz", x: 42, y: 13 }
+ +

Beachten Sie, dass {{jsxref("Object.assign()")}}} im Gegensatz zur Spread-Syntax Setter auslöst.

+ +

Beachten Sie, dass Sie die Funktion {{jsxref("Object.assign()")}} weder ersetzen noch nachahmen können:

+ +
var obj1 = { foo: 'bar', x: 42 };
+var obj2 = { foo: 'baz', y: 13 };
+const merge = ( ...objects ) => ( { ...objects } );
+
+var mergedObj = merge ( obj1, obj2);
+// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: "baz", y: 13 } }
+
+var mergedObj = merge ( {}, obj1, obj2);
+// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: "baz", y: 13 } }
+ +

Im obigen Beispiel funktioniert der Spread-Operator nicht wie erwartet: er klappt ein Array von Argumenten aus und liefert ein Array dieser, aufgrund des rest Parameters.

+ +

Nur für iterierbare Objekte

+ +

Spread-Syntax (anders als bei Spread-Eigenschaften) kann nur auf iterierbare Objekte angewendet werden:

+ +
var obj = {'key1': 'value1'};
+var array = [...obj]; // TypeError: obj is not iterable
+
+ +

Spread mit mehreren Werten

+ +

Beachten Sie bei der Verwendung von Spread-Syntax für Funktionsaufrufe die Möglichkeit der Überschreitung der Argumentlängenbegrenzung der JavaScript-Engine. Siehe apply() für weitere Details.

+ +

Rest-Syntax (Parameter)

+ +

Rest-Syntax sieht genauso aus wie die Spread-Syntax und wird für das Destrukturieren von Arrays und Objekten eingesetzt. Rest-Syntax ist sozusagen das Gegenteil von Spread-Syntax: Spread klappt die einzelnen Bestandteile eines Arrays aus, während Rest verschiedene einzelne Elemente zu einem Array zusammenfasst. Siehe Rest-Parameter.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-array-initializer')}}{{Spec2('ES2015')}}Definiert in mehreren Abschnitten der Spezifikation: Array Initializer, Argument Lists
{{SpecName('ESDraft', '#sec-array-initializer')}}{{Spec2('ESDraft')}}Keine Änderungen
{{SpecName('ESDraft', '#sec-object-initializer')}}{{Spec2('ESDraft')}}Definiert in Object Initializer
+ +

Browser-Kompatibilität

+ + + +

{{Compat("javascript.operators.spread")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/super/index.html b/files/de/web/javascript/reference/operators/super/index.html new file mode 100644 index 0000000000..44e7cf8b8f --- /dev/null +++ b/files/de/web/javascript/reference/operators/super/index.html @@ -0,0 +1,184 @@ +--- +title: super +slug: Web/JavaScript/Reference/Operators/super +tags: + - Classes + - ECMAScript 2015 + - JavaScript + - Left-hand-side expression + - Operator +translation_of: Web/JavaScript/Reference/Operators/super +--- +
{{jsSidebar("Operators")}}
+ +
Das super Schlüsselwort wird verwendet, um Funktionen in einem Vaterobjekt auszuführen.
+ +
 
+ +
Die super.prop und super[expr] Ausdrücke sind in allen Methodendefinitionen von Klassen und Objekt Literalen verfügbar.
+ +

Syntax

+ +
super([arguments]); // calls the parent constructor.
+super.functionOnParent([arguments]);
+
+ +

Beschreibung

+ +

Wenn ein Konstruktor verwendet wird, muss das super Schlüsselwort verwendet werden, bevor das this Schlüsselwort verwendet werden kann. Mit dem super Schlüsselwort kann man auch Funktionen im Vaterobjekt ausführen.

+ +

Beispiel

+ +

super in Klassen verwenden

+ +

Der Codeabschnitt ist vom classes Beispiel (Live Demo). Hier wird super() aufgerufen, um das duplizieren von Teilen des Konstruktors zu vermeiden, was zwischen Rectangle und Square üblich ist.

+ +
class Rectangle {
+  constructor(height, width) {
+    this.name = 'Rectangle';
+    this.height = height;
+    this.width = width;
+  }
+  sayName() {
+    console.log('Hi, I am a ', this.name + '.');
+  }
+  get area() {
+    return this.height * this.width;
+  }
+  set area(value) {
+    this.height = this.width = Math.sqrt(value);
+  }
+}
+
+class Square extends Rectangle {
+  constructor(length) {
+    this.height; // ReferenceError, super needs to be called first!
+
+    // Here, it calls the parent class' constructor with lengths
+    // provided for the Polygon's width and height
+    super(length, length);
+
+    // Note: In derived classes, super() must be called before you
+    // can use 'this'. Leaving this out will cause a reference error.
+    this.name = 'Square';
+  }
+}
+ +

super Aufruf in statischen Methoden

+ +

super kann auch in statischen Methoden verwendet werden.

+ +
class Rectangle {
+  constructor() {}
+  static logNbSides() {
+    return 'I habe 4 sides';
+  }
+}
+
+class Square extends Rectangle {
+  constructor() {}
+  static logDescription() {
+    return super.logNbSides() + ' wich are all equal';
+  }
+}
+Square.logDescription(); // 'I habe 4 sides wich are all equal'
+
+ +

Das Löschen von Supereigenschaften erzeugt einen Fehler

+ +

Man kann den delete Operator in Verbindung mit super.prop oder super[expr] nicht einsetzen, um Eigenschaften zu löschen, es führt zu einem {{jsxref("ReferenceError")}}.

+ +
class Base {
+  constructor() {}
+  foo() {}
+}
+class Derived extends Base {
+  constructor() {}
+  delete() {
+    delete super.foo;
+  }
+}
+
+new Derived().delete(); // ReferenceError: invalid delete involving 'super'.
+ +

super.prop kann keine schreibgeschützten Eigenschaften überschreiben

+ +

Wenn eine schreibgeschützte Eigenschaft mit z.B. {{jsxref("Object.defineProperty")}}" erzeugt wird, kann der Wert nicht mit super überschrieben werden.

+ +
class X {
+  constructor() {
+    Object.defineProperty(this, "prop", {
+      configurable: true,
+      writable: false,
+      value: 1
+    });
+  }
+}
+
+class Y extends X {
+  constructor() {
+    super();
+  }
+  foo() {
+    super.prop = 2;  // Der Wert kann nicht überschrieben werden
+  }
+}
+
+var y = new Y();
+x.foo(); // TypeError: "prop" is read-only
+console.log(y.prop); // 1
+
+ +

Nutzen von super.prop in Objektliteralen

+ +

super kann auch in der object initializer / literal Notation verwendet werden. In diesem Beispiel definieren zwei Objekte eine Methode. Im zweiten Beispiel wird mit super die Funktion im ersten Objekt aufgerufen. Das funktioniert mit Hilfe von {{jsxref("Object.setPrototypeOf()")}}. Damit ist es möglich den Prototypen von obj2 auf obj1 zu setzen, damit super method1 in obj1 findet.

+ +
var obj1 = {
+  method1() {
+    console.log("method 1");
+  }
+}
+
+var obj2 = {
+  method2() {
+   super.method1();
+  }
+}
+
+Object.setPrototypeOf(obj2, obj1);
+obj2.method2(); // logs "method 1"
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-super-keyword', 'super')}}{{Spec2('ES2015')}}Initiale Definition
{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}{{Spec2('ESDraft')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.operators.super")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/this/index.html b/files/de/web/javascript/reference/operators/this/index.html new file mode 100644 index 0000000000..d9c36c61d6 --- /dev/null +++ b/files/de/web/javascript/reference/operators/this/index.html @@ -0,0 +1,394 @@ +--- +title: this +slug: Web/JavaScript/Reference/Operators/this +tags: + - JavaScript + - Operator + - Primary Expressions + - Reference +translation_of: Web/JavaScript/Reference/Operators/this +--- +
{{jsSidebar("Operators")}}
+ +

Das this Schlüsselwort einer Funktion in JavaScript verhält sich verglichen mit anderen Sprachen ein bisschen anders. Es gibt zudem Unterschiede zwischen dem strict Modus und nicht strict Modus.

+ +

In den meisten Fällen ist der Wert von this der Aufrufer der Funktion. Der Wert kann nicht während der Ausführung zugewiesen werden und kann sich jedes Mal, wenn die Funktion aufgerufen wird unterscheiden. ES5 führte die bind Methode ein, um den Wert vom this einer Funktion zu setzen (egal, wie sie aufgerufen wird). ECMAScript 2015 hat die Pfeilfunktionen implementiert, die kein eigenes this besitzt (this verweist auf das this des umschließenden Ausführungskontextes).

+ +
{{EmbedInteractiveExample("pages/js/expressions-this.html")}}
+ + + +

Syntax

+ +
this
+ +

Globaler Kontext

+ +

Im globalen Ausführungskontext (außerhalb jeder Funktion), referenziert this auf das globale Objekt, egal ob im strict Modus oder nicht.

+ +
// Im Webbrowser ist das window Objekt das globale Objekt:
+console.log(this === window); // true
+
+a = 37;
+console.log(window.a); // 37
+
+this.b = "MDN";
+console.log(window.b);  // "MDN"
+console.log(b);         // "MDN"
+
+ +

Funktionskontext

+ +

Innerhalb einer Funktion hängt der Wert von this davon ab, wie die Funktion aufgerufen wird.

+ +

Einfacher Aufruf

+ +

Weil der folgende Code nicht im strict Modus ist und weil this nicht vom Aufruf gesetzt wird, referenziert this das globale Objekt, welches in einem Browser window ist.

+ +
function f1(){
+  return this;
+}
+
+// In einem Browser:
+f1() === window; // true
+
+// In Node:
+f1() === global; // true
+ +

Im strict Modus bleibt der Wert von this jedoch auf dem Wert, auf den er beim Eingeben des Ausführungskontextes festgelegt wurde. Im folgenden Fall wird dies standardmäßig auf undefined sein:

+ +
function f2(){
+  "use strict"; // see strict mode
+  return this;
+}
+
+f2() === undefined; // true
+
+ +

Wenn this im strict Modus nicht vom Ausführungskontext definiert wird, bleibt dieser undefined.

+ +
Im zweiten Beispiel sollte this undefined sein, weil f2 direkt und nicht als eine Methode oder Eigenschaft eines Objektes (z. B. window.f2()) aufgerufen wird. Diese Funktionalität war noch nicht in allen Browsern implementiert, als der Support für den strict Modus gestartet wurde. Als Folge, gaben diese fälschlicherweise das window Objekt zurück.
+ +

Um den Wert von this von einem in den anderen Kontext zu überführen, benutzt man call oder apply:

+ +
// Ein Objekt kann als erstes Argument beim Aufruf von call oder apply benutzt werden
+// welches an den Aufruf gebunden wird.
+var obj = {a: 'Custom'};
+
+// Dieses Objekt wird auf dem globalen Objekt definiert
+var a = 'Global';
+
+function whatsThis() {
+  return this.a; // Der Wert von this hängt davon ab, wie die Funktion aufgerufen wird.
+}
+
+whatsThis();          // 'Global'
+whatsThis.call(obj);  // 'Custom'
+whatsThis.apply(obj); // 'Custom'
+ +

Wenn eine Funktion das this Schlüsselwort im Körper verwendet, kann dessen Wert an ein Objekt gebunden werden, wenn die call oder apply Methode genutzt wird, die alle Funktion von Function.prototype erben.

+ +
function add(c, d) {
+  return this.a + this.b + c + d;
+}
+
+var o = {a: 1, b: 3};
+
+// Der erste Parameter ist das Objekt, welches als
+// 'this' genutzt wird. Alle weiteren Parameter werden als
+// Argumente für den Funktionsaufruf benutzt.
+add.call(o, 5, 7); //16
+
+// Der erste Parameter ist das Objekt, welches als
+// 'this' genutzt wird. Der zweite Parameter ist ein Array.
+// Dessen Elemente werden als Argumente für den Funktionsaufruf benutzt.
+add.apply(o, [10, 20]); // 34
+ +

Bei call und apply ist zu beachten, dass wenn der für this übergebene Wert kein Objekt ist, wird dieser mit der internen Operation ToObject zu einem Objekt konvertiert. Ist der übergebene Wert ein primitiver Typ wie 7 oder 'foo', wird dieser mit einem zugehörigen Konstruktor zu einem Objekt konvertiert, so dass die primitive Nummer 7 mit new Number(7) und 'foo' mit new String('foo') zu ein Objekt konvertiert wird.

+ +
function bar() {
+  console.log(Object.prototype.toString.call(this));
+}
+
+bar.call(7);     // [object Number]
+bar.call('foo'); // [object String]
+ +

Die bind Methode

+ +

ECMAScript 5 hat Function.prototype.bind eingeführt. Der Aufruf von f.bind(someObject) erstellt eine neue Funktion mit dem selben Körper und Gültigkeitsbereich von f, aber this unterscheidet sich zur original Funktion. In der neuen Funktion ist this permanent mit dem Parameter von bind gebunden, egal wie die Funktion benutzt wird.

+ +
function f(){
+  return this.a;
+}
+
+var g = f.bind({a: 'azerty'});
+console.log(g()); // azerty
+
+var h = g.bind({a: 'yoo'}); // bind funktioniert nur einmal!
+console.log(h()); // azerty
+
+var o = {a: 37, f: f, g: g, h: h};
+console.log(o.f(), o.f(), o.g(), o.h()); // 37, 37, azerty, azerty
+ +

Pfeilfunktionen

+ +

In Pfeilfunktionen, wird this auf das this des umschließenden lexikalischen Kontextes gesetzt. In globalem Code wird es auf das globale Objekt gesetzt.

+ +
var globalObject = this;
+var foo = (() => this);
+console.log(foo() === globalObject); // true
+ +
+

Hinweis: Wenn das this Argument von call, bind oder apply auf einer Pfeilfunktion benutzt werden, wird dieser ignoriert. Man kann dem Aufruf weitere Argumente hinzufügen, das erste Argument (thisArg) sollte aber null sein.

+
+ +
// Aufruf als Methode eines Objektes
+var obj = {foo: foo};
+console.log(obj.foo() === globalObject); // true
+
+// Versuch this mit call zu setzen
+console.log(foo.call(obj) === globalObject); // true
+
+// Versuch this mit bind zu setzen
+foo = foo.bind(obj);
+console.log(foo() === globalObject); // true
+ +

Es ist egal, auf welches this für foo beim erstellen gesetzt wurde (im Beispiel oben das globale Objekt). Das selbe gilt für Pfeilfunktionen, die in einer anderen Funktion erstellt werden: ihr this wird auf das this des äußeren Ausführungskontext gesetzt.

+ +
// Erstellt obj mit einer Methode bar, die eine Funktion zurück gibt,
+// die ihr this zurück gibt. Die zurückgegebene  Funktion wird als
+// Pfeilfunktion erstellt, so dass ihr this permanent an die umschließende
+// Funktion gebunden ist. Der Wert von bar kann im Aufruf festgelegt werden,
+// der wiederum den Wert der zurückgegebenen Funktion festlegt.
+var obj = { bar : function() {
+                    var x = (() => this);
+                    return x;
+                  }
+          };
+
+// Der Aufruf von bar als Methode von obj, setzt das this auf obj,
+// Weist eine Referenz der zurückgegebenen Funktion fn zu.
+var fn = obj.bar();
+
+// Aufruf von fn ohne this zu setzen, wird normalerweise zum
+// golbalen Objekt oder undefined im strict Modus führen.
+console.log(fn() === obj); // true
+
+// Aber achtung, wenn man die Methode von obj referenziert ohne sie aufzurufen
+var fn2 = obj.bar;
+// Wenn dann die Pfeilfunktion aufgerufen wird, ist this gleich dem globalen Objekt,
+// weil es dem this von bar folgt.
+console.log(fn2()() == window); // true
+
+ +

Im oberen Beispiel, gibt die Funktion (nennen wir sie anonyme Funktion A), die zu obj.bar zugewiesen ist, gibt eine andere Funktion (nennen wir sie anonyme Funktion B) zurück, die als Pfeilfunktion erstellt wurde. Als Ergebnis ist das this von B permanent das this von obj.bar (Funktion A) beim Aufruf. Wenn die zurückgegebene Funktion (Funktion B) aufgerufen wird, ist der this Wert immer der, der er initial war. Im obigen Beispielcode ist das this der Funktion B auf das this der Funktion A gesetzt, welches obj ist, so dass es auf obj gesetzt bleibt, während hingegen normalerweise this undefined oder das globale Objekt (oder jede andere Methode wie im vorherigen Beispiel im globalen Ausführungskontext) ist.

+ +

Alseine Objektmethode

+ +

Wenn eine Funktion als Methode eines Objektes aufgerufen wird, hat this eine Referenz auf das Objekt, auf dem die Methode aufgerugen wurde.

+ +

Im folgenden Beispiel ist this innerhalb der Funktion auf o gebunden, wenn o.f() ausgeführt wird.

+ +
var o = {
+  prop: 37,
+  f: function() {
+    return this.prop;
+  }
+};
+
+console.log(o.f()); // 37
+
+ +

Zu beachten ist, dass dieses Verhalten nicht davon beeinflusst ist wie und wo die Funktion definiert ist. Im folgenden Beispiel definierten wir eine Inlinefunktion f als Eigenschaft von o. Man könnte auch einfach die Funktion zuerst definieren und diese dann o.f zuweisen. Dieses hat das selbe Ergebnis zur Folge:

+ +
var o = {prop: 37};
+
+function independent() {
+  return this.prop;
+}
+
+o.f = independent;
+
+console.log(o.f()); // logs 37
+
+ +

Das demonstriert, dass es nur wichtig ist, dass die Funktion als Eigenschaft f des Objektes o aufgerufen wurde.

+ +

Genauso ist die this Bindung nur von der unmittelbaren Mitgliederreferent beeinflusst. Im folgenden Beispiel, wenn die Funktion aufgerufen wird, wird diese als Methode g des Objektes o.b aufgerufen. Während der Ausführung referenziert this in der Funktion o.b. Der Fakt, dass das Objekt selbst eine Eigenschaft von o ist, hat keine Konsequenz, nur die unmittelbare Referenz ist wichtig.

+ +
o.b = {g: independent, prop: 42};
+console.log(o.b.g()); // logs 42
+
+ +

this auf der Objektprototypenkette

+ +

Das selbe gilt für Methoden, die irgendwo auf der Objektprototypenkette definiert werden. Wenn die Methode auf einer Objektprototypenkette ist, referenziert this zu dem Objekte, auf dem die Methode aufgerufen wurde, so als währe die Methode auf dem Objekt.

+ +
var o = {f: function() { return this.a + this.b; }};
+var p = Object.create(o);
+p.a = 1;
+p.b = 4;
+
+console.log(p.f()); // 5
+
+ +

In diesem Beispiel hat das Objekt, welches der Variablen p zugewiesen wird, nicht ihre eigene f Eigenschaft, es erbt sie von seinem Prototyp. Aber es spielt keine Rolle, ob die Suche nach f eventuell eine Eigenschaft/Methode auf dem Objekt o findet; Die Suche begann als eine Referenz zu p.f, so hat this in der Funktion eine Referenz zu dem Objekt p. Weil f als Methode von p aufgerufen wurde, referenziert this p. Dieses ist eine interessante Funktion von JavaScripts's Prototypenvererbung.

+ +

this mit Gettern oder Settern

+ +

Wieder das selbe gilt für für Funktionen, die als Getter oder Setter aufgerufen werden. Eine Funktion, die als Getter oder Setter benutzt wird, hat this zu dem Objekt gebunden, auf dem der Getter oder Setter aufgerufen wurde.

+ +
function sum(){
+  return this.a + this.b + this.c;
+}
+
+var o = {
+  a: 1,
+  b: 2,
+  c: 3,
+  get average(){
+    return (this.a + this.b + this.c) / 3;
+  }
+};
+
+Object.defineProperty(o, 'sum', {
+    get: sum, enumerable:true, configurable:true});
+
+console.log(o.average, o.sum); // logs 2, 6
+
+ +

Als ein Konstruktor

+ +

Wenn eine Funktion als Konstruktor verwendet wird (mit dem new Schlüsselwort), ist this an das neu erstellte Objekt gebunden.

+ +
+

Weil der Standard für einen Konstruktor besagt, dass das Objekt, welches auf this referenziert, zurückgegeben wird, kann stattdessen ein anderes Objekt zurückgegeben werden (wenn der Rückgabewert kein Objekt ist, wird this zurückgegeben).

+
+ +
/*
+ * Constructors work like this:
+ *
+ * function MyConstructor(){
+ *   // Actual function body code goes here.
+ *   // Create properties on |this| as
+ *   // desired by assigning to them.  E.g.,
+ *   this.fum = "nom";
+ *   // et cetera...
+ *
+ *   // If the function has a return statement that
+ *   // returns an object, that object will be the
+ *   // result of the |new| expression.  Otherwise,
+ *   // the result of the expression is the object
+ *   // currently bound to |this|
+ *   // (i.e., the common case most usually seen).
+ * }
+ */
+
+function C(){
+  this.a = 37;
+}
+
+var o = new C();
+console.log(o.a); // logs 37
+
+
+function C2(){
+  this.a = 37;
+  return {a:38};
+}
+
+o = new C2();
+console.log(o.a); // logs 38
+
+ +

Im letzen Beispiel (C2) wird das gebundene this Objekt verworfen, weil während des Erstellens ein anderes Objekt zurückgegeben wird. (Das macht das Statement this.a = 37; zu todem Code. Er ist nicht ganz tod, weil er ausgeführt wird, aber entfernt werden kann ohne einen Effekt zu haben.)

+ +

Als ein DOM Eventhandler

+ +

Wenn eine Funktion als Eventhandler genutzt wird, wird sein this auf das Element, welches das Event feuert, gesetzt (manche Browser folgen dieser Konvention nicht für das dynamische hinzufügen von Methoden nicht über addEventListener).

+ +
// When called as a listener, turns the related element blue
+function bluify(e){
+  // Always true
+  console.log(this === e.currentTarget);
+  // true when currentTarget and target are the same object
+  console.log(this === e.target);
+  this.style.backgroundColor = '#A5D9F3';
+}
+
+// Get a list of every element in the document
+var elements = document.getElementsByTagName('*');
+
+// Add bluify as a click listener so when the
+// element is clicked on, it turns blue
+for(var i=0 ; i<elements.length ; i++){
+  elements[i].addEventListener('click', bluify, false);
+}
+ +

In einem Inlineeventhandler

+ +

Wenn Code in einem inline on-event Handler aufgerufen wird, wird this auf das DOM Element gesetzt, auf dem der Listener aufgerufen wird:

+ +
<button onclick="alert(this.tagName.toLowerCase());">
+  Show this
+</button>
+
+ +

Der obere Alert zeigt button. Zu beachten ist, dass nur bei äußerem Code das this so gesetzt wird:

+ +
<button onclick="alert((function(){return this}()));">
+  Show inner this
+</button>
+
+ +

In diesem Fall ist das this der inneren Funktion nicht gesetzt, so dass das globale/window Objekt zurückgegeben wird (z. B. das Standardobjekt in nicht strict Modus, wo this nicht vom Aufruf gesetzt wird).

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ESDraft', '#sec-this-keyword', 'The this keyword')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-this-keyword', 'The this keyword')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-11.1.1', 'The this keyword')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-11.1.1', 'The this keyword')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-11.1.1', 'The this keyword')}}{{Spec2('ES1')}}Erste Definition. Implementiert in JavaScript 1.0.
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.operators.this")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/typeof/index.html b/files/de/web/javascript/reference/operators/typeof/index.html new file mode 100644 index 0000000000..9ff39613d8 --- /dev/null +++ b/files/de/web/javascript/reference/operators/typeof/index.html @@ -0,0 +1,259 @@ +--- +title: typeof +slug: Web/JavaScript/Reference/Operators/typeof +tags: + - JavaScript + - Operator + - Unary +translation_of: Web/JavaScript/Reference/Operators/typeof +--- +
{{jsSidebar("Operators")}}
+ +

Der typeof Operator gibt einen String zurück, der den Typ des unausgewerteten Operanden beschreibt.

+ +
{{EmbedInteractiveExample("pages/js/expressions-typeof.html")}}
+ + + +

Syntax

+ +

Dem typeof Operator folgt sein Operand:

+ +
typeof Operand
+ +

Parameter

+ +

Operand ist ein Ausdruck, dessen Typ zurückgegeben werden soll. Dies kann ein Objekt oder ein {{Glossary("Primitiv", "primitive")}} sein.

+ +

Klammern sind optional.

+ +

Beschreibung

+ +

Die folgende Tabelle fasst die möglichen Rückgabewerte von typeof zusammen. Mehr Informationen zu Typen und primitiven Datentypen sind auf der Seite JavaScript Datentypen und Datenstrukturen zu finden.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypRückgabewert
Undefined"undefined"
Null"object" (see below)
Boole'scher Wert"boolean"
Zahl"number"
Zeichenkette"string"
Symbol (neu in ECMAScript 2015)"symbol"
Host-Objekt (von der JS-Umgebung bereitgestellt)implementierungsabhängig
Funktionsobjekt (implementiert [[Call]] nach ECMA-262)"function"
Alle anderen Objekte"object"
+ +

Beispiele

+ +
// Zahlen
+typeof 37 === 'number';
+typeof 3.14 === 'number';
+typeof(42) === 'number';
+typeof Math.LN2 === 'number';
+typeof Infinity === 'number';
+typeof NaN === 'number'; // obwohl es "Not-A-Number" ist
+typeof Number(1) === 'number'; // niemals so verwenden!
+
+
+// Zeichenketten
+typeof '' === 'string';
+typeof 'bla' === 'string';
+typeof `template literal` === 'string'
+typeof '1' === 'string' // Eine Zahl in einem String ist ein String
+typeof (typeof 1) === 'string'; // typeof gibt immer einen String zurück
+typeof String(1) === 'string'; // String konvertiert alles in einen String
+
+
+// Boole'sche Werte
+typeof true === 'boolean';
+typeof false === 'boolean';
+typeof Boolean(true) === 'boolean'; // niemals so verwenden!
+
+
+// Symbols
+typeof Symbol() === 'symbol'
+typeof Symbol('foo') === 'symbol'
+typeof Symbol.iterator === 'symbol'
+
+
+// Undefined
+typeof undefined === 'undefined';
+typeof declaredBugUndefinedVariable === 'undefined'
+typeof undeclaredVariable === 'undefined';
+
+
+// Objekte
+typeof {a:1} === 'object';
+
+// Array.isArray oder Object.prototype.toString.call verwenden,
+// um reguläre Objekte von Arrays zu unterscheiden
+typeof [1, 2, 4] === 'object';
+
+typeof new Date() === 'object';
+typeof /regex/ === 'object'; // Siehe im Artikel Reguläre Ausdrücke für Historisch bedingte Ergebnisse
+
+
+// Folgende Beispiele sind verwirrend, nicht verwenden!
+typeof new Boolean(true) === 'object';
+typeof new Number(1) === 'object';
+typeof new String("abc") === 'object';
+
+
+// Funktionen
+typeof function(){} === 'function';
+typeof class C {} === 'function';
+typeof Math.sin === 'function';
+
+ +

null

+ +
// This stands since the beginning of JavaScript
+typeof null === 'object';
+
+ +

In der ersten JavaScript-Implementierung bestanden JavaScript-Werte aus einem Typenbezeichner und dem eigentlichen Wert. Der Typenbezeichner für Objekte war 0. null wurde durch den NULL-Zeiger dargestellt (auf den meisten Plattformen 0x00). Infolgedessen besaß null den Typenbezeichner 0, wodurch der seltsame Rückgabewert für typeof entstand. (Quelle)

+ +

Es gab einen Korrekturvorschlag für ECMAScript, der aber abgelehnt wurde. Dadurch wäre typeof null === 'null' gewesen.

+ +

Einsatz des new Operators

+ +
// Alle Konstruktorfunktionen, welche mit dem 'new' Schlüsselwort benutzt werden,
+// haben als ergebnis ein Objekte mit typeof 'object'
+var str = new String('String');
+var num = new Number(100);
+
+typeof str; // It will return 'object'
+typeof num; // It will return 'object'
+
+// Es gibt die Ausnahme mit Objekten des Function-Konstruktors in Javascript
+
+var func = new Function();
+
+typeof func; // gibt 'function' zurück
+
+ +

Notwendigkeit von Klammern in der Syntax

+ +
// Klammern sind sehr hilfreich beim ermitteln von Datentypen.
+var iData = 99;
+
+typeof iData + ' Wisen'; // It will return 'number Wisen'
+typeof (iData + ' Wisen'); // It will return 'string'
+
+ +

Reguläre Ausdrücke

+ +

Aufrufbare reguläre Ausdrücke waren eine nicht standardkonforme Erweiterung in manchen Browsern.

+ +
typeof /s/ === 'function'; // Chrome 1-12, nicht ECMAScript 5.1-konform
+typeof /s/ === 'object';   // Firefox 5+, ECMAScript 5.1-konform
+
+ +

Temporal Dead Zone errors

+ +

Vor ECMAScript 2015 war bei typeof immer garantiert, dass ein String in jeder Lage zurückgegeben wird. Mit dem Hinzufügen von nicht hochgezogenen, blockweisen let and const Variablen, kann es zu ReferenceErrors kommen, wenn die Variablen nicht nicht definiert sind. Das steht im Kontrast zu nicht definierten Variablen, welche mit typeof 'undefined' zurück geben. Blockvariablen haben eine temporäre tote Zone vom Start des Blockes bis zum Durchführen der Initialisierung. In dieser Zeit kann dieser Fehler auftreten.

+ +
typeof undeclaredVariable === 'undefined';
+typeof newLetVariable; let newLetVariable; // ReferenceError
+typeof newConstVariable; const newConstVariable = 'hello'; // ReferenceError
+
+ +

Ausnahmen

+ +

Alle aktuellen Browser zeigen ein nicht standardisiertes hochgezogenes Objekt {{domxref("document.all")}} mit dem Typ Undefined.

+ +
typeof document.all === 'undefined';
+
+ +

Obwohl die Spezifikation benutzerdefinierte Typen-Tags für nicht standardmäßige exotische Objekte zulässt, müssen diese Typ-Tags sich von den vordefinierten unterscheiden. document.all hat das Typ-Tag 'undefined' und wird alsAusnahmeverstoß der Regeln klassifiziert.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ESDraft', '#sec-typeof-operator', 'The typeof Operator')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-typeof-operator', 'The typeof Operator')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-11.4.3', 'The typeof Operator')}}{{Spec2('ES5.1')}}
{{SpecName('ES3', '#sec-11.4.3', 'The typeof Operator')}}{{Spec2('ES3')}}
{{SpecName('ES1', '#sec-11.4.3', 'The typeof Operator')}}{{Spec2('ES1')}}Initiale Definition. Implementiert in JavaScript 1.1.
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.operators.typeof")}}

+ +

IE-Spezifischer Hinweis

+ +

In IE 6, 7 und 8 sind viele Hostobjekte als Objekte statt Funktionen typisiert, zum Beispiel:

+ +
typeof alert === 'object'
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/vergleichsoperatoren/index.html b/files/de/web/javascript/reference/operators/vergleichsoperatoren/index.html new file mode 100644 index 0000000000..2f4baae5a3 --- /dev/null +++ b/files/de/web/javascript/reference/operators/vergleichsoperatoren/index.html @@ -0,0 +1,243 @@ +--- +title: Vergleichsoperatoren +slug: Web/JavaScript/Reference/Operators/Vergleichsoperatoren +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators +--- +
{{jsSidebar("Operators")}}
+ +

JavaScript kennt sowohl den strikten als auch den Typ konvertierenden Vergleich. Ein strikter Vergleich (z. B. ===) gibt nur true zurück, wenn der gleiche Typ und der gleiche Wert vorhanden sind. Der häufiger verwendete abstrakte Vergleich (z. B. ==) wandelt die Operanden in den gleichen Typen um, bevor sie verglichen werden. Bei relationalen Vergleichsoperatoren (z. B. <=) werden die Operanden vor dem Vergleich zuerst in elementare Datentypen konvertiert und dann in gleiche Typen umgewandelt.

+ +

Strings werden entsprechend der lexikographischen Ordnung, basierend auf den Unicode, verglichen.

+ +
{{EmbedInteractiveExample("pages/js/expressions-comparisonoperators.html")}}
+ + + +

Merkmale von Vergleichen:

+ + + +

Gleichheitsoperatoren

+ +

Gleichheit (==)

+ +

Der Gleichheitsoperator konvertiert die Operanden, wenn sie nicht vom gleichen Typs sind und prüft dann auf strikte Gleichheit. Sind beide Operanden Objekte, vergleicht JavaScript die Referenzen; Referenzen gelten als gleich, wenn sie auf das gleiche Objekt im Speicher zeigen.

+ +

Syntax

+ +
x == y
+
+ +

Beispiele

+ +
1    ==  1     // true
+'1'  ==  1     // true
+1    == '1'    // true
+0    == false  // true
+0    == null   // false
+var object1 = {'key': 'value'}, object2 = {'key': 'value'}
+object1 == object2 // false
+0    == undefined  // false
+null == undefined  // true
+
+ +

Ungleichheit (!=)

+ +

Der Ungleichheitsoperator gibt true zurück, wenn die Operanden nicht gleich sind. Wenn die beiden Operanden nicht vom gleichen Typ sind, versucht JavaScript die Operanden in einen, für den Vergleich passenden Typ, umzuwandeln. Wenn beide Operanden Objekte sind, vergleicht JavaScript die Referenzen; Referenzen sind ungleich, wenn sie auf verschiedene Objekte im Speicher verweisen.

+ +

Syntax

+ +
x != y
+ +

Beispiele

+ +
1 !=   2     // true
+1 !=  "1"    // false
+1 !=  '1'    // false
+1 !=  true   // false
+0 !=  false  // false
+
+ +

Identität / strikte Gleichheit (===)

+ +

Der Identitätsoperator gibt true zurück, wenn die Operanden strikt gleich sind (siehe oben) ohne eine Typkonvertierung

+ +

Syntax

+ +
x === y
+ +

Beispiele

+ +
3 === 3   // true
+3 === '3' // false
+var object1 = {'key': 'value'}, object2 = {'key': 'value'}
+object1 === object2 // false
+
+ +

Nicht identisch / Strikte Ungleichheit (!==)

+ +

Der strikte Ungleichheitsoperator gibt true zurück, wenn die Operanden nicht vom gleichen Typ sind bzw. ungleich sind.

+ +

Syntax

+ +
x !== y
+ +

Beispiele

+ +
3 !== '3' // true
+4 !== 3   // true
+
+ +

Relationale Operatoren

+ +

Jeder dieser Operatoren wird die valueOf() Funktion aufrufen, bevor ein Vergleich durchgeführt wird.

+ +

Größer-als-Operator (>)

+ +

Der Größer-als-Operator gibt true zurück, wenn der linke Operand größer als der rechte Operand ist.

+ +

Syntax

+ +
x > y
+ +

Beispiele

+ +
4 > 3 // true
+
+ +

Größer-oder-gleich-Operator (>=)

+ +

Der Größer-oder-gleich-Operator gibt true zurück, wenn der linke Operand größer als oder gleich dem rechten Operanden ist.

+ +

Syntax

+ +
 x >= y
+ +

Beispiele

+ +
4 >= 3 // true
+3 >= 3 // true
+
+ +

Kleiner-als-Operator (<)

+ +

Der Kleiner-als-Operator gibt true zurück, wenn der linke Operand kleiner als der rechte Operand ist.

+ +

Syntax

+ +
 x < y
+ +

Beispiele

+ +
3 < 4 // true
+
+ +

Kleiner-oder-gleich-Operator (<=)

+ +

Der Kleiner-oder-gleich-Operator gibt true zurück, wenn der linke Operand kleiner oder gleich dem rechten Operanden ist.

+ +

Syntax

+ +
 x <= y
+ +

Beispiele

+ +
3 <= 4 // true
+
+ +

Die Gleichheitsoperatoren anwenden

+ +

Die Standard-Gleichheitsoperatoren (== und !=) benutzen den Abstract Equality Comparison Algorithmus, um zwei Operanden zu vergleichen. Sind die Operanden unterschiedlichen Typs, wird vor dem Vergleich zuerst versucht sie in gleiche Typen umzuwandeln; z.B. wird beim Ausdruck 5 == '5'  das Zeichen auf der rechten Seite in eine Zahl konvertiert.

+ +

Die strikten Gleichheitsoperatoren (=== und !==) benutzen den Strict Equality Comparison Algorithmus und sind dafür gedacht, Operanden des gleichen Typs zu vergleichen. Wenn die Operanden von unterschiedlichen Typen sind, ist das Ergebnis immer false, wie 5 !== '5'.

+ +

Strikte Gleichheitsoperatoren sollten verwendet werden, wenn die Operanden sowohl einen bestimmten Typen als auch Wert haben sollen. Ansonsten benutzt man die abstrakten Gleichheitsoperatoren, die es einem erlauben Operanden unterschiedlicher Typen zu vergleichen.

+ +

Wenn beim Vergleich eine Typkonvertierung vorgenommen wird (z.B. beim nicht-strikten Vergleich), konvertiert JavaScript in die Typen {{jsxref("String")}}, {{jsxref("Number")}}, {{jsxref("Boolean")}} und {{jsxref("Object")}} und führt den Vergleich dann aus:

+ + + +
Hinweis: String Objekte sind vom Typ Objekte, nicht String! String Objekte werden selten eingesetzt, so dass das folgende Ergebnis überraschend sein kann:
+ +
// true, da beide Operanden vom Typ String sind (string primitives)
+'foo' === 'foo'
+
+var a = new String('foo');
+var b = new String('foo');
+
+// false, da a und b auf verschiedene Objekte zeigen
+a == b
+
+// false, da a und b auf verschiedene Objekte zeigen
+a === b
+
+// true, da a und 'foo' verschiedene Typen sind und das Objekt (a)
+// vor dem Vergleich zum String 'foo' umgewandelt wird
+a == 'foo'
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial Definition. Implementiert in JavaScript 1.0
{{SpecName('ES3')}}{{Spec2('ES3')}}Fügt === und !== Operatoren hinzu. Implementiert in JavaScript 1.3
{{SpecName('ES5.1', '#sec-11.8')}}{{Spec2('ES5.1')}}In verschiedenen Kapiteln der Spezifikation definiert: Relational Operators, Equality Operators
{{SpecName('ES6', '#sec-relational-operators')}}{{Spec2('ES6')}}In verschiedenen Kapiteln der Spezifikation definiert: Relational Operators, Equality Operators
{{SpecName('ESDraft', '#sec-relational-operators')}}{{Spec2('ESDraft')}}In verschiedenen Kapiteln der Spezifikation definiert: Relational Operators, Equality Operators
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.operators.comparison")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/void/index.html b/files/de/web/javascript/reference/operators/void/index.html new file mode 100644 index 0000000000..4b61c153bd --- /dev/null +++ b/files/de/web/javascript/reference/operators/void/index.html @@ -0,0 +1,108 @@ +--- +title: void Ausdruck +slug: Web/JavaScript/Reference/Operators/void +tags: + - JavaScript + - Operator + - Unary +translation_of: Web/JavaScript/Reference/Operators/void +--- +
{{jsSidebar("Operators")}}
+ +

Der void Operator evaluiert einen gegebenen Ausdruck und gibt dann {{jsxref("Global_Objects/undefined", "undefined")}} zurück.

+ +
{{EmbedInteractiveExample("pages/js/expressions-voidoperator.html")}}
+ + + +

Syntax

+ +
void Ausdruck
+ +

Beschreibung

+ +

Der Operator erlaubt es, Ausdrücke mit Seiteneffekten an Stellen zu benutzen, an denen ein Ausdruck, der zu {{jsxref("Global_Objects/undefined", "undefined")}} ausgewertet wird, benötigt wird.

+ +

Der void Ausdruck wird oft nur deswegen verwendet, um den primitiven Wert undefined zu erhalten. In diesen Fällen kann auch die globale Variable {{jsxref("Global_Objects/undefined", "undefined")}} benutzt werden (wenn der Wert für diese auf den default-Wert zeigt und nicht geändert wurde)

+ +

Immediately Invoked Function Expressions

+ +

Wenn man eine immediately-invoked function expression verwendet, dann kann void benutzt werden, um das keyword function als Ausdruck und nicht als Deklaration auswerten zu lassen.

+ +
void function iife() {
+    var bar = function () {};
+    var baz = function () {};
+    var foo = function () {
+        bar();
+        baz();
+     };
+    var biz = function () {};
+
+    foo();
+    biz();
+}();
+
+ +

JavaScript URIs

+ +

Wenn ein Browser einer javascript: URI folgt, wird zuerst der Code innerhalb der URI ausgewertet und dann der Inhalt der Seite mit dem Rückgabewert ersetzt. Das ist nicht der Fall, wenn der Rückgabewert {{jsxref("Global_Objects/undefined", "undefined")}} ist. Der void Ausdruck kann dazu benutzt werden in diesen Fällen {{jsxref("Global_Objects/undefined", "undefined")}} zurückzugeben. Zum Beispiel:

+ +
<a href="javascript:void(0);">
+  Click here to do nothing
+</a>
+
+<a href="javascript:void(document.body.style.backgroundColor='green');">
+  Click here for green background
+</a>
+
+ +

Anmerkung: Die Verwendung des javascript: pseudo Protokolls wird gegenüber anderen nicht invasiven Maßnahmen wie Event Handlern nicht empfohlen.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES1', '#sec-11.4.2', 'The void Operator')}}{{Spec2('ES1')}}Initiale Definition. Implementiert in JavaScript 1.1
{{SpecName('ES3', '#sec-11.4.2', 'The void Operator')}}{{Spec2('ES3')}} 
{{SpecName('ES5.1', '#sec-11.4.2', 'The void Operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-void-operator', 'The void Operator')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-void-operator', 'The void Operator')}}{{Spec2('ESDraft')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.operators.void")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/yield/index.html b/files/de/web/javascript/reference/operators/yield/index.html new file mode 100644 index 0000000000..973ec506c4 --- /dev/null +++ b/files/de/web/javascript/reference/operators/yield/index.html @@ -0,0 +1,119 @@ +--- +title: yield +slug: Web/JavaScript/Reference/Operators/yield +tags: + - ECMAScript 2015 + - Generators + - Iterator + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Operators/yield +--- +
{{jsSidebar("Operators")}}
+ +

Das yield Schlüsselwort wird eingesetzt zum Anhalten und Fortsetzen einer Generatorfunktion ({{jsxref("Statements/function*", "function*")}} oder veralteten Generatorfunktion) eingesetzt.

+ +
{{EmbedInteractiveExample("pages/js/expressions-yield.html")}}
+ + + +

Syntax

+ +
[rv] = yield [expression];
+ +
+
expression
+
Definiert den Wert, der von der Generatorfunktion über das Iterator Protokoll zurückgegeben wird. wird dieser weggelassen, wird undefined zurückgegeben.
+
rv
+
+

Gibt den optionalen Wert zurück, der der next() Methode des Generators übergeben wird, damit dieser weiter verarbeitet werden kann.

+
+
+ +

Beschreibung

+ +

Das yield Schlüsselwort hält die Ausführung der Generatorfunktion an und gibt den Wert des Ausdrucks nach dem yield Schlüsselwort an den Aufrufer des Generators zurück. Es kann als die generatorbasierte Version des return Schlüsselwortes gesehen werden.

+ +

Das yield Schlüsselwort gibt ein IteratorResult Objekt mit zwei Eigenschaften, value und done, zurück. Die value Eigenschaft ist das Ergebnis des ausgewerteten yield Ausdrucks und done ist false, was gedeutet, dass der Generator noch nicht fertig ist.

+ +

Solange ein yield Ausdruck pausiert, wird die Codeausführung des Generators pausiert, bis die next() Methode des Generators aufgerufen wird. Mit jedem Aufruf der Generator next() Methode läuft der Generator weiter, bis einer der folgenden Punkte eintritt:

+ + + +

Wenn ein optionaler Wert der next() Methode des Generators übergeben wird, wird der Wert es der aktuelle Rückgabewert der yield Operation sein.

+ +

Durch den Generatorcodepfad, seinem yield Operator und der Möglichkeit einen neuen Startwert zu spezifizierten, indem dieser an {{jsxref("Generator.prototype.next()")}} übergeben wird, sind Generatoren sehr leistungsstark und kontrollierbar.

+ +

Beispiele

+ +

Der folgende Code ist die Deklaration einer Beispielgeneratorfunktion.

+ +
function* countAppleSales () {
+  var saleList = [3, 7, 5];
+  for (var i = 0; i < saleList.length; i++) {
+    yield saleList[i];
+  }
+}
+ +

Wenn eine Generatorfunktion definiert ist, kann dieser benutzt werden, um einen Iterator, wie gezeigt, zu erstellen.

+ +
var appleStore = countAppleSales(); // Generator { }
+console.log(appleStore.next()); // { value: 3, done: false }
+console.log(appleStore.next()); // { value: 7, done: false }
+console.log(appleStore.next()); // { value: 5, done: false }
+console.log(appleStore.next()); // { value: undefined, done: true }
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES2015', '#', 'Yield')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#', 'Yield')}}{{Spec2('ESDraft')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.operators.yield")}}

+ +

Firefox spezifische Hinweise

+ + + +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/yield_star_/index.html b/files/de/web/javascript/reference/operators/yield_star_/index.html new file mode 100644 index 0000000000..e0229f4c15 --- /dev/null +++ b/files/de/web/javascript/reference/operators/yield_star_/index.html @@ -0,0 +1,164 @@ +--- +title: yield* +slug: Web/JavaScript/Reference/Operators/yield* +tags: + - ECMAScript 2015 + - Generators + - Iterable + - Iterator + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/yield* +--- +
{{jsSidebar("Operators")}}
+ +

Der yield* Ausdruck wird eingesetzt um an einen anderen {{jsxref("Statements/function*", "Generator")}} oder iterierbares Objekt zu delegieren.

+ +
{{EmbedInteractiveExample("pages/js/expressions-yieldasterisk.html")}}
+ + + +

Syntax

+ +
 yield* [[expression]];
+ +
+
expression
+
Der Ausdruck, der ein Iterierbares Objekt zurückgibt.
+
+ +

Beschreibung

+ +

Das yield* Ausdrucksliteral iteriert über den Operanden und gibt jeden zurückgegebenen Wert zurück.

+ +

Der Wert von yield* Ausdrücken selbst ist der Wert der vom Iterator zurückgegeben wird, wenn der geschlossen wird (z. B., wenn done true ist).

+ +

Beispiele

+ +

Zu einem anderen Generator delegieren

+ +

Im folgenden Code werden Werte von g1() und g2() beim Aufruf von next() zurückgegeben.

+ +
function* g1() {
+  yield 2;
+  yield 3;
+  yield 4;
+}
+
+function* g2() {
+  yield 1;
+  yield* g1();
+  yield 5;
+}
+
+var iterator = g2();
+
+console.log(iterator.next()); // {value: 1, done: false}
+console.log(iterator.next()); // {value: 2, done: false}
+console.log(iterator.next()); // {value: 3, done: false}
+console.log(iterator.next()); // {value: 4, done: false}
+console.log(iterator.next()); // {value: 5, done: false}
+console.log(iterator.next()); // {value: undefined, done: true}
+
+ +

Andere Iterable Objekte

+ +

Neben Generatorobjekten kann yield* auch andere Iterable Objekte wie Arrays, Strings oder Arguments-Objekte zurückgeben.

+ +
function* g3() {
+  yield* [1, 2];
+  yield* '34';
+  yield* Array.from(arguments);
+}
+
+var iterator = g3(5, 6);
+
+console.log(iterator.next()); // {value: 1, done: false}
+console.log(iterator.next()); // {value: 2, done: false}
+console.log(iterator.next()); // {value: "3", done: false}
+console.log(iterator.next()); // {value: "4", done: false}
+console.log(iterator.next()); // {value: 5, done: false}
+console.log(iterator.next()); // {value: 6, done: false}
+console.log(iterator.next()); // {value: undefined, done: true}
+
+ +

Der Wert des yield* Ausdrucks selbst

+ +

yield* ist ein Ausdruck, kein Statement, weshalb es zu einem Wert ausgewertet wird.

+ +
function* g4() {
+  yield* [1, 2, 3];
+  return 'foo';
+}
+
+var result;
+
+function* g5() {
+  result = yield* g4();
+}
+
+var iterator = g5();
+
+console.log(iterator.next()); // {value: 1, done: false}
+console.log(iterator.next()); // {value: 2, done: false}
+console.log(iterator.next()); // {value: 3, done: false}
+console.log(iterator.next()); // {value: undefined, done: true},
+                              // g4() returned {value: 'foo', done: true} at this point
+
+console.log(result);          // "foo"
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES2015', '#', 'Yield')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#', 'Yield')}}{{Spec2('ESDraft')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.operators.yield_star")}}

+ +

Firefox spezifische Hinweise

+ + + +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/zuweisungsoperator/index.html b/files/de/web/javascript/reference/operators/zuweisungsoperator/index.html new file mode 100644 index 0000000000..f0ab62f255 --- /dev/null +++ b/files/de/web/javascript/reference/operators/zuweisungsoperator/index.html @@ -0,0 +1,412 @@ +--- +title: Zuweisungsoperator +slug: Web/JavaScript/Reference/Operators/Zuweisungsoperator +tags: + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Operators#Assignment_operators +--- +
{{jsSidebar("Operators")}}
+ +

Ein Zuweisungsoperator weist dem linken Operanten einen Wert auf Basis des rechten Operanten zu.

+ +
{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}
+ + + +

Überblick

+ +

Der Basiszuweisungsoperator ist das Gleich (=), welches den Wert des rechten Operanten dem linken Operanten zuweist. So wird bei x = y der Wert von y x zugewiesen. Die anderen Zuweisungsoperatoren sind Kurzformen für Standardoperationen, wie es in den folgenden Definition und Beispielen gezeigt wird.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameKurzformoperatorBedeutung
Zuweisungx = yx = y
Additionszuweisungx += yx = x + y
Subtraktionszuweisungx -= yx = x - y
Multiplikationszuweisungx *= yx = x * y
Divisionszuweisungx /= yx = x / y
Restzuweisungx %= yx = x % y
Potenzierungszuweisungx **= yx = x ** y
Links verschiebende Zuweisungx <<= yx = x << y
Rechts verschiebende Zuweisungx >>= yx = x >> y
Vorzeichenlose rechts verschiebende Zuweisungx >>>= yx = x >>> y
Bitweise AND Zuweisungx &= yx = x & y
Bitweise XOR Zuweisungx ^= yx = x ^ y
Bitweise OR Zuweisungx |= yx = x | y
+ +

Zuweisung

+ +

Einfacher Zuweisungsoperator, welcher den Wert zu einer Variablen zuweist. Der Zuweisungsoperator gibt den zugewiesenen Wert zurück. Eine Verkettung der Zuweisungsoperatoren ist möglich, um einen Wert mehreren Variablen zuzuweisen. Sie in den Beispielen.

+ +

Syntax

+ +
Operator: x = y
+
+ +

Beispiele

+ +
// Folgende Variablen sind vorausgesetzt
+//  x = 5
+//  y = 10
+//  z = 25
+
+x = y     // x ist 10
+x = y = z // x, y und z sind alle 25
+
+ +

Additionszuweisung

+ +

Der Additionszuweisungsoperator addiert den Wert des rechten Operanten zu einer Variablen und weist das Ergebnis der Variablen zu. Die Typen der Operanten entscheiden über das Verhalten des Additionszuweisungsoperator. Addition oder Konkatination sind möglich. Siehe beim {{jsxref("Operators/Arithmetic_Operators", "Additionsoperator", "#Addition", 1)}} für mehr Details nach.

+ +

Syntax

+ +
Operator:  x += y
+Bedeutung: x  = x + y
+
+ +

Beispiele

+ +
// Die folgenden Variablen werden vorausgesetzt
+//  foo = 'foo'
+//  bar = 5
+//  baz = true
+
+
+// Number + Number -> Addition
+bar += 2 // 7
+
+// Boolean + Number -> Addition
+baz += 1 // 2
+
+// Boolean + Boolean -> Addition
+baz += false // 1
+
+// Number + String -> Konkationation
+bar += 'foo' // "5foo"
+
+// String + Boolean -> Konkatination
+foo += false // "foofalse"
+
+// String + String -> Konkationation
+foo += 'bar' // "foobar"
+
+ +

Subtraktionszuweisung

+ +

Der Subtraktionszuweisungsoperator subtahiert den Wert des rechten Operanten von einer Variablen und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Arithmetic_Operators", "Subraktionsoperator", "#Subtraction", 1)}} für mehr Details nach.

+ +

Syntax

+ +
Operator:  x -= y
+Bedeutung: x  = x - y
+
+ +

Beispiele

+ +
// Die folgenden Variablen werden vorausgesetzt
+//  bar = 5
+
+bar -= 2     // 3
+bar -= 'foo' // NaN
+
+ +

Multiplikationszuweisung

+ +

Der Multiplikationszuweisungsoperator multipliziert den Wert des rechten Operanten zu einer Variablen und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Arithmetic_Operators", "Multiplikationsoperator", "#Multiplication", 1)}} für mehr Details nach.

+ +

Syntax

+ +
Operator:  x *= y
+Bedeutung: x  = x * y
+
+ +

Beispiele

+ +
// Die folgenden Variablen werden vorausgesetzt
+//  bar = 5
+
+bar *= 2     // 10
+bar *= 'foo' // NaN
+
+ +

Divisionszuweisung

+ +

Der Divisionszuweisungsoperator dividiert eine Variable durch den rechten Operanten zu und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Arithmetic_Operators", "Divisionsoperator", "#Division", 1)}} für mehr Details nach.

+ +

Syntax

+ +
Operator:  x /= y
+Bedeutung: x  = x / y
+
+ +

Beispiele

+ +
// Die folgenden Variablen werden vorausgesetzt
+//  bar = 5
+
+bar /= 2     // 2.5
+bar /= 'foo' // NaN
+bar /= 0     // Infinity
+
+ +

Restzuweisung

+ +

Der Restzuweisungsoperator dividiert einer Variable durch den rechten Operanten und weist den Rest des Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Arithmetic_Operators", "Restoperator", "#Remainder", 1)}} für mehr Details nach.

+ +

Syntax

+ +
Operator:  x %= y
+Bedeutung: x  = x % y
+
+ +

Beispiele

+ +
// Die folgenden Variablen werden vorausgesetzt
+//  bar = 5
+
+bar %= 2     // 1
+bar %= 'foo' // NaN
+bar %= 0     // NaN
+
+ +

Potenzierungszuweisung

+ +

Der Potenzierungszuweisungsoperator potenziert einer Variable mit den rechten Operanten und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Arithmetic_Operators", "Exponentialoperator", "#Exponentiation", 1)}} für mehr Details nach.

+ +

Syntax

+ +
Operator:  x **= y
+Bedeutung: x  = x ** y
+
+ +

Beispiele

+ +
// Die folgenden Variablen werden vorausgesetzt
+//  bar = 5
+
+bar **= 2     // 25
+bar **= 'foo' // NaN
+ + + +

Der links verschiebende Zuweisungsoperator verschiebt um die Anzahl Bits im rechten Operanten in der Variablen und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Bitwise_Operators", "links verschiebenden Operator", "#Left_shift", 1)}} für mehr Details nach.

+ +

Syntax

+ +
Operator:  x <<= y
+Bedeutung: x   = x << y
+
+ +

Beispiele

+ +
var bar = 5; //  (00000000000000000000000000000101)
+bar <<= 2; // 20 (00000000000000000000000000010100)
+
+ +

Rechts verschiebende Zuweisung

+ +

Der rechts verschiebende Zuweisungsoperator verschiebt um die Anzahl Bits im rechten Operanten in der Variablen und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Bitwise_Operators", "rechts verschiebenden Operator", "#Right_shift", 1)}} für mehr Details nach.

+ +

Syntax

+ +
Operator:  x >>= y
+Bedeutung: x   = x >> y
+
+ +

Beispiele

+ +
var bar = 5; //   (00000000000000000000000000000101)
+bar >>= 2;   // 1 (00000000000000000000000000000001)
+
+var bar -5; //    (-00000000000000000000000000000101)
+bar >>= 2;  // -2 (-00000000000000000000000000000010)
+
+ +

Vorzeichenlose rechts verschiebende Zuweisung

+ +

Der vorzeichenlose rechts verschiebende Zuweisungsoperator verschiebt um die Anzahl Bits im rechten Operanten in der Variablen und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Bitwise_Operators", "vorzeichenlose rechts verschiebenden Operator", "#Unsigned_right_shift", 1)}} für mehr Details nach.

+ +

Syntax

+ +
Operator:  x >>>= y
+Bedeutung: x    = x >>> y
+
+ +

Beispiele

+ +
var bar = 5; //   (00000000000000000000000000000101)
+bar >>>= 2;  // 1 (00000000000000000000000000000001)
+
+var bar = -5; // (-00000000000000000000000000000101)
+bar >>>= 2; // 1073741822 (00111111111111111111111111111110)
+ +

Bitweise UND Zuweisung

+ +

Der bitweise UND Zuweisungsoperator nutzt die Bitrepräsentation beider Operanten, führt eine bitweises UND Operation aus und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Bitwise_Operators", "bitweisen UND Operator", "#Bitwise_AND", 1)}} für mehr Details nach.

+ +

Syntax

+ +
Operator:  x &= y
+Bedeutung: x  = x & y
+
+ +

Beispiele

+ +
var bar = 5;
+// 5:     00000000000000000000000000000101
+// 2:     00000000000000000000000000000010
+bar &= 2; // 0
+
+ +

Bitweise XOR Zuweisung

+ +

Der bitweise XOR Zuweisungsoperator nutzt die Bitrepräsentation beider Operanten, führt eine bitweises XOR Operation aus und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Bitwise_Operators", "bitweisen XOR Operator", "#Bitwise_XOR", 1)}} für mehr Details nach.

+ +

Syntax

+ +
Operator:  x ^= y
+Bedeutung: x  = x ^ y
+
+ +

Beispiele

+ +
var bar = 5;
+bar ^= 2; // 7
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+// -----------------------------------
+// 7: 00000000000000000000000000000111
+
+ +

Bitweise ODER Zuweisung

+ +

Der bitweise ODER Zuweisungsoperator nutzt die Bitrepräsentation beider Operanten, führt eine bitweises ODER Operation aus und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Bitwise_Operators", "bitweisen ODER Operator", "#Bitwise_OR", 1)}} für mehr Details nach.

+ +

Syntax

+ +
Operator:  x |= y
+Bedeutung: x  = x | y
+
+ +

Beispiele

+ +
var bar = 5;
+bar |= 2; // 7
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+// -----------------------------------
+// 7: 00000000000000000000000000000111
+
+ +

Beispiele

+ +

Linker Operant mit anderem Zuweisungsoperator

+ +

In ungewöhnlichen Situationen kann ein Zuweisungsoperator (z. B. x += y) nicht identisch mit der äquivalenten Zuweisung (hier x = x + y). Wenn der linke Operant einer Zuweisung selbst eine Zuweisung enthält, wird der linke Operant nur einem ausgewertet. Zum Beispiel:

+ +
a[i++] += 5         // i wird einmal ausgewertet
+a[i++] = a[i++] + 5 // i wird zweimal ausgewertet
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}{{Spec2('ESDraft')}} 
{{SpecName('ES2015', '#sec-assignment-operators', 'Assignment operators')}}{{Spec2('ES2015')}} 
{{SpecName('ES5.1', '#sec-11.13', 'Assignment operators')}}{{Spec2('ES5.1')}} 
{{SpecName('ES1', '#sec-11.13', 'Assignment operators')}}{{Spec2('ES1')}}Initiale Definition.
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.operators.assignment")}}

+ +

Siehe auch

+ + -- cgit v1.2.3-54-g00ecf