diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:15 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:15 -0500 |
commit | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (patch) | |
tree | d4a40e13ceeb9f85479605110a76e7a4d5f3b56b /files/de/web/javascript/reference/operators | |
parent | 33058f2b292b3a581333bdfb21b8f671898c5060 (diff) | |
download | translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.gz translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.bz2 translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.zip |
initial commit
Diffstat (limited to 'files/de/web/javascript/reference/operators')
39 files changed, 7589 insertions, 0 deletions
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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Der Addition-Operator (<code>+</code>) erzeugt die Summe nummerischer Operanden oder setzt Zeichenketten zusammen.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-addition.html")}}</div> + +<div></div> + +<p class="hidden">Der Quellcode dieses interaktiven Beispiels, befindet sich in einem GitHub Repository. Wenn Sie zum Projekt für diese interaktiven Beispiele beitragen möchten, clonen Sie sich bitte das Projekt mittels <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und schicken Sie uns einen Pull-Request.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var> + <var>y</var> +</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Nummerische_Addition_Summe">Nummerische Addition (Summe)</h3> + +<pre class="brush: js notranslate">// 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 +</pre> + +<h3 id="Zeichenkettenzusammensetzung">Zeichenkettenzusammensetzung</h3> + +<pre class="brush: js notranslate">// String (Zeichenkette) + String (Zeichenkette) -> Zusammensetzung +'foo' + 'bar' // "foobar" + +// Nummer + String (Zeichenkette) -> Zusammensetzung +5 + 'foo' // "5foo" + +// String (Zeichenkette) + Boolean -> Zusammensetzung +'foo' + false // "foofalse"</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-addition-operator-plus', 'Addition Operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wurde aus strukturierten Daten erzeugt. Wenn Sie zu den Daten beitragen möchten, checken Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> aus und schicken Sie uns einen Pull-Request.</div> + +<p>{{Compat("javascript.operators.addition")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraktion-Operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Division">Division-Operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplikation-Operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder">Rest-Operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Potenzierung-Operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment">Inkrement (Erhöhung) Operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Decrement">Dekrement (Verringern) Operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Einstellige Negation Operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Einstelliger Plus operator</a></li> +</ul> 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 +--- +<div class="warning"><strong>Nicht standardisiert. Nicht einsetzen!</strong><br> +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.</div> + +<div>{{jsSidebar("Operators")}}</div> + +<p>Die <strong>Array Comprehensions</strong> 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!</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">[for (x of iterable) x] +[for (x of iterable) if (condition) x] +[for (x of iterable) for (y of iterable) x + y] +</pre> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>In Array Comprehensions können zwei Arten von Komponenten eingesetzt werden:</p> + +<ul> + <li>{{jsxref("Statements/for...of", "for...of")}} und</li> + <li>{{jsxref("Statements/if...else", "if")}}</li> +</ul> + +<p>Der <code>for-of</code> Iterator ist immer die erste Komponente. Mehrere <code>for-of</code> Iteratoren oder <code>if</code> Statements sind erlaubt.</p> + +<p>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.</p> + +<p>Die folgende Comprehension nimmt ein Array von Zahlen und erstellt ein neues Array, dass das Doppelte jeder Zahl enthält.</p> + +<pre class="brush: js">var numbers = [1, 2, 3, 4]; +var doubled = [for (i of numbers) i * 2]; +console.log(doubled); // logs 2,4,6,8 +</pre> + +<p>Das ist äquivalent zu der folgenden {{jsxref("Array.prototype.map", "map()")}} Operation:</p> + +<pre class="brush: js">var doubled = numbers.map(i => i * 2); +</pre> + +<p>Comprehensions können ebenfalls für das suchen bestimmter Elemente eingesetzt werden. Hier ist eine Comprehension welche nur gerade Zahlen auswählt:</p> + +<pre class="brush: js">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 +</pre> + +<p>{{jsxref("Array.prototype.filter", "filter()")}} kann mit dem gleichen Ergebnis benutzt werden:</p> + +<pre class="brush: js">var evens = numbers.filter(i => i % 2 === 0); +</pre> + +<p>{{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:</p> + +<pre class="brush: js">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 +</pre> + +<p><span id="result_box" lang="de"><span>Die eckigen Klammern einer Array </span></span>Comprehension<span lang="de"><span> führen einen impliziten Block für Gültigkeitsbereiche ein. Neue Variablen (wie i im Beispiel) werden so behandelt, als währen sie mit </span></span>{{jsxref("Statements/let","let")}} deklariert. Das bedeutet, dass sie nicht außerhalb der Comprehension sichtbar sind.</p> + +<p>Der Input einer Array Comprehension muss nicht selbst ein Array sein; <a href="/de/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iteratoren und Generatoren</a> könne ebenfalls benutzt werden.</p> + +<p>Auch Strings können als Input genutzt werden;</p> + +<p>Even strings may be used as input; <span id="result_box" lang="de"><span>um die Filter- und Map-Aktionen (unter Array-ähnlichen Objekten) oben zu erreichen:</span></span></p> + +<pre class="brush: js">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' +</pre> + +<p>Auch hier wird das Eingabeformat nicht beibehalten, so dass man {{jsxref("Array.prototype.join", "join()")}} benutzen muss, um wieder einen String zu bekommen.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Einfache_Array_Comprehensions">Einfache Array Comprehensions</h3> + +<pre class="brush:js">[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"]</pre> + +<h3 id="Array_Comprehensions_mit_if_Statement">Array Comprehensions mit if Statement</h3> + +<pre class="brush: js">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] +</pre> + +<h3 id="Array_Comprehensions_verglichen_zu_map_und_filter">Array Comprehensions verglichen zu <code>map</code> und <code>filter</code></h3> + +<p>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:</p> + +<pre class="brush: js">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] +</pre> + +<h3 id="Array_Comprehensions_mit_zwei_Arrays">Array Comprehensions mit zwei Arrays</h3> + +<p>Einsatz von zwei for-of Iteratoren, um mit Arrays zu arbeiten:</p> + +<pre class="brush: js">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"]] +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>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.</p> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.operators.array_comprehensions")}}</p> + +<h2 id="Unterschiede_zu_den_älteren_JS1.7JS1.8_Comprehensions">Unterschiede zu den älteren JS1.7/JS1.8 Comprehensions</h2> + +<div class="warning">JS1.7/JS1.8 Comprehensions wurden von Gecko 46 entfernt ({{bug(1220564)}}).</div> + +<p><strong>Alte Comprehensions Syntax (nicht mehr benutzen!):</strong></p> + +<pre class="brush: js example-bad">[X for (Y in Z)] +[X for each (Y in Z)] +[X for (Y of Z)] +</pre> + +<p>Unterschiede:</p> + +<ul> + <li>ESNext Comprehensions erstellen einen Gültigkeitsbereich pro "for" Statement statt einen für die komplette Comprehension. + <ul> + <li>Alt: <code>[...(()=>x for (x of [0, 1, 2]))][1]() // 2</code></li> + <li>Neu: <code>[...(for (x of [0, 1, 2]) ()=>x)][1]() // 1, jede Iteration erstellt eine frische Bindung zu x. </code></li> + </ul> + </li> + <li>ESNext Comprehensions beginnen mit "for" statt eines Zuweisungsausdrucks. + <ul> + <li>Alt: <code>(i * 2 for (i of numbers))</code></li> + <li>Neu: <code>(for (i of numbers) i * 2)</code></li> + </ul> + </li> + <li>ESNext Comprehensions können mehrere <code>if</code> und <code>for</code> Komponenten haben.</li> + <li>ESNext Comprehensions funktionieren nur mit <code>{{jsxref("Statements/for...of", "for...of")}}</code> und nicht mit <code>{{jsxref("Statements/for...in", "for...in")}}</code> Iteration.</li> +</ul> + +<p>Siehe <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1220564#c42">Bug 1220564, Kommentar 42</a> für Vorschläge zum Aktualisieren von Code.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Statements/for...of", "for...of")}}</li> + <li>{{jsxref("Operators/Generator_comprehensions", "Generator Comprehensions", "" ,1)}}</li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Das <strong><code>async function</code></strong> Schlüsselwort kann benutzt werden, um <code>async</code> Funktionen in Ausdrücken zu benutzen.</p> + +<p>Man kann asynchrone Funktionen auch mit einem <a href="/de/docs/Web/JavaScript/Reference/Statements/async_function" title="The async function keyword can be used to define async functions inside expressions.">async Funktionsstatement</a> definieren.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">async function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { + <em>statements</em> +}</pre> + +<p>Seit ES2015 kann man auch <a href="/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Pfeilfunktionen</a> benutzen.</p> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>name</code></dt> + <dd>Der Funktionsname. Kann weggelassen werden, wenn die Funktion anonym ist. Der Name ist nur lokal im Funktionsrumpf erreichbar.</dd> + <dt><code>paramN</code></dt> + <dd>Der Name eines Arguments, welches der Funktion übergeben wird.</dd> + <dt><code>statements</code></dt> + <dd>Die Statements, welche den Funktionsrumpf definieren.</dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Ein <code>async function</code> Ausdruck ist sehr ähnlich zu {{jsxref('Statements/async_function', 'async Funktionsstatements')}} und haben fast die selbe Syntax. Der Hauptunterschied zwischen einem <code>async</code> Funktionsausdruck und einem <code>async</code> Funktionsstatement ist der Funktionsname, welcher bei <code>async</code> Funktionsausdrücken weggelassen werden kann, um anonyme Funktionen zu erstellen. Ein <code>async</code> 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 <a href="/en-US/docs/Web/JavaScript/Reference/Functions">Funktionen</a>.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Einfaches_Beispiel">Einfaches Beispiel</h3> + +<pre class="brush: js">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. +}); +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Initiale Definition in ES2017.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.operators.async_function_expression")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Statements/async_function", "async function")}}</li> + <li>{{jsxref("AsyncFunction")}} Objekt</li> + <li>{{jsxref("Operators/await", "await")}}</li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Der <code>await</code> Operator wird genutzt, um auf einen {{jsxref("Promise")}} zu warten. Er kann nur in einer {{jsxref("Statements/async_function", "async Funktion")}} benutzt werden.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">[<em>rv</em>] = await <em>expression</em>;</pre> + +<dl> + <dt><code>expression</code></dt> + <dd>Ein {{jsxref("Promise")}} oder jeder Wert, auf den gewartet wird.</dd> + <dt><code>rv</code></dt> + <dd> + <p>Gibt den ermittelten Wert des <code>Promise</code> zurück, oder den Wert selbst, wenn es sich nicht um ein <code>Promise</code> handelt.</p> + </dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Der <code>await</code> Ausdruck lässt <code>async</code> Funktionen pausieren, bis ein <code>Promise</code> erfüllt oder abgewiesen ist, und führt die <code>async</code> danach weiter aus. Wenn die Funktion weiter ausgeführt wird, ist der Wert des <code>await</code> Ausdrucks der Wert des erfüllten <code>Promise</code>.</p> + +<p>Wenn das <code>Promise</code> abgewiesen wird, wirft der <code>await</code> Ausdruck eine Exception mit dem zurückgewiesenen Wert.</p> + +<p>Ist der Wert des Ausdrucks, der auf den <code>await</code> Operator folgt, kein <code>Promise</code> ist, wird dieser zu einem <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve">erfüllten Promise</a> konvertiert.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Wenn ein <code>Promise</code> im <code>await</code> Ausdruck genutzt wird, wartet dieser, bis das <code>Promise</code> fertig ist und gibt den ermittelten Wert zurück.</p> + +<pre class="brush: js">function resolveAfter2Seconds(x) { + return new Promise(resolve => { + setTimeout(() => { + resolve(x); + }, 2000); + }); +} + +async function f1() { + var x = await resolveAfter2Seconds(10); + console.log(x); // 10 +} +f1(); +</pre> + +<p>Wenn der Wert kein <code>Promise</code> ist, wird dieser zu einem erfüllten <code>Promise</code> konvertiert und dessen Wert zurückgegeben.</p> + +<pre class="brush: js">async function f2() { + var y = await 20; + console.log(y); // 20 +} +f2();</pre> + +<p>Wird ein <code>Promise</code> abgewiesen, so wird eine Exception mit dem zurückgewiesene Wert geworfen.</p> + +<pre class="brush: js">async function f3() { + try { + var z = await Promise.reject(30); + } catch(e) { + console.log(e); // 30 + } +} +f3();</pre> + +<p>Abfangen von abgewiesenen <code>Promise</code>s ohne try-Block.</p> + +<pre class="brush: js">var response = await promisedFunction().catch((err) => { console.log(err); }); +// response will be undefined if the promise is rejected +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async functions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Initiale Definition in ES2017.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.operators.await")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Statements/async_function", "async Funktion")}}</li> + <li>{{jsxref("Operators/async_function", "async Funktionsausdruck")}}</li> + <li>{{jsxref("AsyncFunction")}} Objekt</li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Bitweise Operatoren </strong>werden auf Sequenzen aus 32 bit (Nullen und Einsen) angewandt im Gegensatz zu Operatoren, die mit Dezimal-, Hexadezimal- oder Oktalzahlen (<code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Number">numbers</a></code>) arbeiten. Beispielsweise hat die Dezimalzahl neun die binäre Darstellung 1001. Auch wenn Bitweise Operatoren mit Binärdarstellungen arbeiten, sind deren Ausgabewerte Javascript Standardzahlenwerte.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-bitwiseoperators.html")}}</div> + + + +<p>Die folgende Tabelle fasst Javascripts Bitweise Operatoren zusammen:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Operator</th> + <th>Einsatz</th> + <th>Beschreibung</th> + </tr> + <tr> + <td><a href="#Bitwise_AND">Bitweises UND</a></td> + <td><code>a & b</code></td> + <td>Gibt <code>1</code> in jeder Bit Position zurück, an welcher beide Operanden <code>1</code> sind.</td> + </tr> + <tr> + <td><a href="#Bitwise_OR">Bitweises ODER</a></td> + <td><code>a | b</code></td> + <td>Gibt <code>1</code> in jeder Bit Position zurück, an welcher einer oder beide Operanden <code>1</code> sind.</td> + </tr> + <tr> + <td><a href="#Bitwise_XOR">Bitweises XOR</a></td> + <td><code>a ^ b</code></td> + <td>Gibt <code>1</code> in jeder Bit Position zurück, an welcher einer aber nicht beide Operanden <code>1</code> sind.</td> + </tr> + <tr> + <td><a href="#Bitwise_NOT">Bitweise Negation</a></td> + <td><code>~ a</code></td> + <td>Invertiert die Bits des Operanden</td> + </tr> + <tr> + <td><a href="#Left_shift">Linksverschiebung</a></td> + <td><code>a << b</code></td> + <td>Verschiebt <code>a</code> in binärer Repräsentation <code>b</code> (< 32) Bits nach links, von Rechts werden Nullen hereingeschoben.</td> + </tr> + <tr> + <td><a href="#Right_shift">Vorzeichen propagierende Rechtsverschiebung</a></td> + <td><code>a >> b</code></td> + <td>Verschiebt <code>a</code> in binärer Repräsentation <code>b</code> (< 32) Bits nach rechts, herausgeschobene Bits werden verworfen.</td> + </tr> + <tr> + <td><a href="#Unsigned_right_shift">Null füllende Rechtsverschiebung</a></td> + <td><code>a >>> b</code></td> + <td>Verschiebt <code>a</code> in binärer Repräsentation <code>b</code> (< 32) Bits nach rechts, herausgeschobene Bits werden verworfen und Nullen werden von links hereingeschoben.</td> + </tr> + </tbody> +</table> + +<h2 id="Vorzeichenbehaftete_32-Bit_Integer">Vorzeichenbehaftete 32-Bit Integer</h2> + +<p>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:</p> + +<pre class="brush: js">00000000000000000000000100111010 +</pre> + +<p>Im Folgenden ist <code>~314</code> codiert, d. h. das Einerkomplement von <code>314</code>:</p> + +<pre class="brush: js">11111111111111111111111011000101 +</pre> + +<p>Anschließend wird <code>-314</code> codiert, d. h. das Zweierkomplement <code>314</code>:</p> + +<pre class="brush: js">11111111111111111111111011000110 +</pre> + +<p>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.</p> + +<p>Die Zahl <code>0</code> ist ein Integer, der komplett aus 0 Bits besteht.</p> + +<pre class="brush: js">0 (base 10) = 00000000000000000000000000000000 (base 2) +</pre> + +<p>Die Zahl <code>-1</code> ist ein Integer der komplett aus 1 Bits besteht.</p> + +<pre class="brush: js">-1 (base 10) = 11111111111111111111111111111111 (base 2) +</pre> + +<p>Die Zahl <code>-2147483648</code> (hexadezimale Repräsentation: <code>-0x80000000</code>) ist der Integer, welcher komplett aus 0 Bits besteht, außer dem ersten Bit (linkes Bit).</p> + +<pre class="brush: js">-2147483648 (base 10) = 10000000000000000000000000000000 (base 2) +</pre> + +<p>Die Zahl <code>2147483647</code> (hexadezimale Repräsentation: <code>-0x7fffffff</code>) ist der Integer, welcher komplett aus 1 Bits besteht, außer dem ersten Bit (linkes Bit).</p> + +<pre class="brush: js">2147483647 (base 10) = 01111111111111111111111111111111 (base 2) +</pre> + +<p>Die Zahlen <code>-2147483648</code> und <code>2147483647</code> sind die minimalen und Maximalen Integers, die mit 32-Bit vorzeichenbehafteten Zahlen repräsentiert werden können.</p> + +<h2 id="Bitweise_logische_Operatoren">Bitweise logische Operatoren</h2> + +<p>Konzeptionell arbeiten die bitweisen logischen Operatoren wie folgt:</p> + +<ul> + <li>Die Operanden werden in 32-Bit Integer konvertiert und als Serie von Bits (null und eins) ausgedrückt. Bei Zahlen mit mehr als 32 Bits, werden die höchstwertigen Bits verworfen. Zum Beispiel wird der folgende Integer mit mehr als 32 Bits zu einem 32 Bit Integer konvertiert:: + <pre class="brush: js">Vorher: 11100110111110100000000000000110000000000001 +Nachher: 10100000000000000110000000000001</pre> + </li> + <li>Jedes Bit im ersten Operanden wird mit dem korrespondierenden Bit im zweiten Operanden gepaart: erstes Bit zu erstem, zweites Bit zu zweitem Bit, und so weiter.</li> + <li>Der Operator wird auf jedem Bitpaar angewendet und das Ergebnis wird Bitweise konstruiert.</li> +</ul> + +<h3 id="(Bitweises_UND)"><a name="Bitwise_AND">& (Bitweises UND)</a></h3> + +<p>Führt die UND Operation auf jedem Bitpaar durch. <code>a</code> UND <code>b</code> ergibt <code>1</code>, wenn beide <code>a</code> und <code>b</code> <code>1</code> sind. Die Wahrheitstabelle für den UND Operator ist:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a UND b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre class="brush: js">. 9 (Basis 10) = 00000000000000000000000000001001 (Basis 2) + 14 (Basis 10) = 00000000000000000000000000001110 (Basis 2) + -------------------------------- +14 & 9 (Basis 10) = 00000000000000000000000000001000 (Basis 2) = 8 (Basis 10) +</pre> + +<p>Bitweises verUNDen jeder Zahl <code>x</code> mit <code>0</code> ergibt <code>0</code>. Bitweises verUNDen jeder Zahl <code>x</code> mit <code>-1</code> ergibt <code>x</code>.</p> + +<h3 id="(Bitweises_ODER)"><a name="Bitwise_OR">| (Bitweises ODER)</a></h3> + +<p>Führt die ODER Operation auf jedem Bitpaar durch. <code>a</code> ODER <code>b</code> ergibt <code>1</code>, wenn einer, <code>a</code> oder <code>b</code>, <code>1</code> sind. Die Wahrheitstabelle für den ODER Operator ist:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a ODER b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre class="brush: js">. 9 (Basis 10) = 00000000000000000000000000001001 (Basis 2) + 14 (Basis 10) = 00000000000000000000000000001110 (Basis 2) + -------------------------------- +14 | 9 (Basis 10) = 00000000000000000000000000001111 (Basis 2) = 15 (Basis 10) +</pre> + +<p>Bitweises verODERn jeder Zahl <code>x</code> mit <code>0</code> ergibt <code>x</code>. Bitweises verODERn jeder Zahl <code>x</code> mit <code>-1</code> ergibt <code>-1</code>.</p> + +<h3 id="(Bitweises_XOR)"><a name="Bitwise_XOR">^ (Bitweises XOR)</a></h3> + +<p>Führt die XOR Operation auf jedem Bitpaar durch. <code>a</code> XOR <code>b</code> ergibt <code>1</code>, wenn sich <code>a</code> und <code>b</code>, unterscheiden. Die Wahrheitstabelle für den XOR Operator ist:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a XOR b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<pre class="brush: js">. 9 (Basis 10) = 00000000000000000000000000001001 (Basis 2) + 14 (Basis 10) = 00000000000000000000000000001110 (Basis 2) + -------------------------------- +14 ^ 9 (Basis 10) = 00000000000000000000000000000111 (Basis 2) = 7 (Basis 10) +</pre> + +<p>Bitweises verXORn jeder Zahl <code>x</code> mit <code>0</code> ergibt <code>x</code>. Bitweises verXORn jeder Zahl <code>x</code> mit <code>-1</code> ergibt <code>~x</code>.</p> + +<h3 id="(Bitweise_Negation)"><a name="Bitwise_NOT">~ (Bitweise Negation)</a></h3> + +<p>Führt die Negationsoperation auf jedem Bit durch. NICHT <code>a</code> ergibt ergibt den invertierten Wert (d. h. das Einerkomplement) von <code>a</code>. Die Wahrheitstabelle für den Negationsoperator ist:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">NICHT a</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<pre class="brush: js"> 9 (Basis 10) = 00000000000000000000000000001001 (Basis 2) + -------------------------------- +~9 (Basis 10) = 11111111111111111111111111110110 (Basis 2) = -10 (Basis 10) +</pre> + +<p>Bitweises Negieren jeder Zahl <code>x</code> ergibt <code>-(x + 1)</code>. Zum Beispiel ergibt <code>~-5</code> <code>4</code>.</p> + +<p>Beispiel mit <code>indexOf</code>:</p> + +<pre class="brush: js">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 +</pre> + +<h2 id="Bitweise_Verschiebeoperatoren">Bitweise Verschiebeoperatoren</h2> + +<p>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.</p> + +<p>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.</p> + +<h3 id="<<_(Linksverschiebung)"><a name="Left_shift"><< (Linksverschiebung)</a></h3> + +<p>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.</p> + +<p>Zum Beispiel ergibt <code>9 << 2</code> <code>36</code>:</p> + +<pre class="brush: js">. 9 (Basis 10): 00000000000000000000000000001001 (Basis 2) + -------------------------------- +9 << 2 (Basis 10): 00000000000000000000000000100100 (Basis 2) = 36 (Basis 10) +</pre> + +<p>Bitweises Verschieben jeder Zahl <code>x</code> nach links mit <code>y</code> Bits ergibt <code>x * 2 ** y</code>.</p> + +<h3 id=">>_(Vorzeichen_propagierende_Rechtsverschiebung)"><a name="Right_shift">>> (Vorzeichen propagierende Rechtsverschiebung)</a></h3> + +<p>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.</p> + +<p>Zum Beispiel ergibt <code>9 >> 2</code> <code>2</code>:</p> + +<pre class="brush: js">. 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- +9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) +</pre> + +<p>Likewise, <code>-9 >> 2</code> yields <code>-3</code>, because the sign is preserved:</p> + +<pre class="brush: js">. -9 (Basis 10): 11111111111111111111111111110111 (Basis 2) + -------------------------------- +-9 >> 2 (Basis 10): 11111111111111111111111111111101 (Basis 2) = -3 (Basis 10) +</pre> + +<h3 id=">>>_(Null_füllende_Rechtsverschiebung)"><a name="Unsigned_right_shift">>>> (Null füllende Rechtsverschiebung)</a></h3> + +<p>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.</p> + +<p>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 <code>9 >>> 2</code> <code>2</code>, das selbe wie <code>9 >> 2</code>:</p> + +<pre class="brush: js">. 9 (Basis 10): 00000000000000000000000000001001 (Basis 2) + -------------------------------- +9 >>> 2 (Basis 10): 00000000000000000000000000000010 (Basis 2) = 2 (Basis 10) +</pre> + +<p>Jedoch ist das nicht der Fall für negative Zahlen. Zum Beispiel ergibt <code>-9 >>> 2</code> <code>1073741821</code>, was sich unterschiedet von <code>-9 >> 2</code> (was <code>-3</code> ergibt):</p> + +<pre class="brush: js">. -9 (Basis 10): 11111111111111111111111111110111 (Basis 2) + -------------------------------- +-9 >>> 2 (Basis 10): 00111111111111111111111111111101 (Basis 2) = 1073741821 (Basis 10) +</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Flags_und_Bitmasken">Flags und Bitmasken</h3> + +<p>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).</p> + +<p>Angenommen es gibt 4 Flags:</p> + +<ul> + <li>Flag A: Man hat ein Ameisenproblem</li> + <li>Flag B: Man besitzt eine Fledermaus</li> + <li>Flag C: Man besitzt eine Katze</li> + <li>Flag D: Man besitzt eine Ente</li> +</ul> + +<p>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 <code>flags</code> hat den binären Wert 0101:</p> + +<pre class="brush: js">var flags = 5; // binär 0101 +</pre> + +<p>Dieser Wert zeigt an:</p> + +<ul> + <li>Flag A ist true (man hat ein Ameisenproblem);</li> + <li>Flag B ist false (man hat keine Fledermaus);</li> + <li>Flag C ist true (man hat eine Katze);</li> + <li>Flag D ist false (man hat keine Ente);</li> +</ul> + +<p>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.</p> + +<p>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:</p> + +<pre class="brush: js">var FLAG_A = 1; // 0001 +var FLAG_B = 2; // 0010 +var FLAG_C = 4; // 0100 +var FLAG_D = 8; // 1000 +</pre> + +<p>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:</p> + +<pre class="brush: js">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011 +</pre> + +<p>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:</p> + +<pre class="brush: js">// Wenn man eine Katze besitzt +if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true + // tu irgendetwas +} +</pre> + +<p>Eine Bitmaske mit mehreren gesetzten Flags funktioniert wie ein "entweder/oder". Zum Beispiel sind die beiden folgenden Ansätze äquivalent:</p> + +<pre class="brush: js">// 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 +} +</pre> + +<pre class="brush: js">// 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 +} +</pre> + +<p>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:</p> + +<pre class="brush: js">// ja, man besitzt eine Katze und eine Ente +var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100 +flags |= mask; // 0101 | 1100 => 1101 +</pre> + +<p>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:</p> + +<pre class="brush: js">// 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 +</pre> + +<p>The mask could also have been created with <code>~FLAG_A & ~FLAG_C</code> (De Morgan's law):</p> + +<pre class="brush: js">// nein, mat hat kein Problem mit Ameisen und man besitzt keine Katze +var mask = ~FLAG_A & ~FLAG_C; +flags &= mask; // 1101 & 1010 => 1000 +</pre> + +<p>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:</p> + +<pre class="brush: js">// 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 +</pre> + +<p>Alle Flags können mit dem Negationsoperator umgedreht werden:</p> + +<pre class="brush: js">// entering parallel universe... +flags = ~flags; // ~1010 => 0101 +</pre> + +<h3 id="Konvertierungsbeispiele">Konvertierungsbeispiele</h3> + +<p>Konvertierung eines binär <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/String" title="/de/docs/JavaScript/Reference/Global_Objects/String">String</a></code> zu einer dezimal <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/de/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code>:</p> + +<pre class="brush: js">var sBinString = '1011'; +var nMyNumber = parseInt(sBinString, 2); +alert(nMyNumber); // prints 11, i.e. 1011 +</pre> + +<p>Konvertierung einer dezimal <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/de/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code> zu einem binär <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/String" title="/de/docs/JavaScript/Reference/Global_Objects/String">String</a></code>:</p> + +<pre class="brush: js">var nMyNumber = 11; +var sBinString = nMyNumber.toString(2); +alert(sBinString); // prints 1011, i.e. 11 +</pre> + +<h3 id="Bitmaskenerstellung_automatisieren">Bitmaskenerstellung automatisieren</h3> + +<p>Man kann, wie folgt, mehrere Masken von einer Menge von <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/de/docs/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></code> Werten erstellen:</p> + +<pre class="brush: js">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 +</pre> + +<h3 id="Umgedrehter_Algorithmus_Ein_Array_von_Booleanen_von_einer_Bitmaske">Umgedrehter Algorithmus: Ein Array von Booleanen von einer Bitmaske</h3> + +<p>Wenn man ein <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/de/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> mit <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/de/docs/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></code> Werten von einer Bitmaske haben möchte, kann man folgenden Code benutzen:</p> + +<pre class="brush: js">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 +</pre> + +<p>Man kann beide Algorithmen gleichzeitig testen:</p> + +<pre class="brush: js">var nTest = 19; // our custom mask +var nResult = createMask.apply(this, arrayFromMask(nTest)); + +alert(nResult); // 19 +</pre> + +<p>Nur aus didaktischen Gründen (weil dort die <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Number/toString" title="/de/docs/JavaScript/Reference/Global_Objects/Number/toString">Number.toString(2)</a></code> Methode ist), zeigen wir, wie es möglich ist den <code>arrayFromMask</code> Algorithmus zu verändern, um einen <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/String" title="/de/docs/JavaScript/Reference/Global_Objects/String">String</a></code> mit der Binärrepräsentation der <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/de/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code> statt eines <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/de/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code>s von <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/de/docs/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></code>en:</p> + +<pre class="brush: js">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 +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.7')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definiert in verschiedenen Abschnitten der Spezifikation: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.8">Bitwise NOT operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.7">Bitwise shift operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.10">Binary bitwise operators</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-bitwise-shift-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definiert in verschiedenen Abschnitten der Spezifikation: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-not-operator">Bitwise NOT operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-shift-operators">Bitwise shift operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-bitwise-operators">Binary bitwise operators</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Definiert in verschiedenen Abschnitten der Spezifikation: <a href="http://tc39.github.io/ecma262/#sec-bitwise-not-operator">Bitwise NOT operator</a>, <a href="http://tc39.github.io/ecma262/#sec-bitwise-shift-operators">Bitwise shift operators</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-bitwise-operators">Binary bitwise operators</a></td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("javascript.operators.bitwise")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/JavaScript/Reference/Operators/Logical_Operators">Logische Operatoren</a></li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>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.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var MyClass = class <em>[className]</em> [extends] { + // Klassenkörper +};</pre> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>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 <em>typeof</em>-Operator bei so deklarierten Klassen immer den Typ "function" zurückgeben.</p> + +<p>Genau wie mit class-Anweisungen wird der Körper der Klasse im {{jsxref("Strict_mode", "strict mode")}} ausgeführt.</p> + +<pre class="brush: js">'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 +</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Ein_einfacher_Klassenausdruck">Ein einfacher Klassenausdruck</h3> + +<p>Dies ist nur ein einfacher anonymer class-Ausdruck der über die "Foo"-Variable angesprochen werden kann.</p> + +<pre class="brush: js">var Foo = class { + constructor() {} + bar() { + return "Hello World!"; + } +}; + +var instance = new Foo(); +instance.bar(); // "Hello World!" +Foo.name; // "" +</pre> + +<h3 id="Benannte_class-Ausdrücke">Benannte class-Ausdrücke</h3> + +<p>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.</p> + +<pre class="brush: js">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" +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>erstmalige Definition</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>grundlegende Unterstützung</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoDesktop(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>grundlegende Unterstützung</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoDesktop(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Operators/function", "function-Ausdruck")}}</li> + <li>{{jsxref("Statements/class", "class-Anweisung")}}</li> + <li>{{jsxref("Classes", "Klassen")}}</li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Der<strong> Kommaoperator</strong> wertet jeden Operanden (von links nach rechts) aus und gibt den Wert des letzten Operanden zurück.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-commaoperators.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>ausdruck1</em>, <em>ausdruck2, ausdruck3...</em></pre> + +<h2 id="Parameter">Parameter</h2> + +<dl> + <dt><code>ausdruck1, ausdruck2, ausdruck3...</code></dt> + <dd>Beliebige Ausdrücke.</dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>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 <code>for</code> Schleife.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Gegeben ist <code>a</code> in einem 2-dimensionalen Array mit 10 Elementen auf jeder Seite. Der folgende Code verwendet den Kommaoperator um zwei Variablen auf einmal hochzuzählen.</p> + +<p>Der folgende Code gibt in der Konsole die Werte der diagonalen Elemente im Array aus:</p> + +<pre class="brush:js;highlight:[1]">for (var i = 0, j = 9; i <= 9; i++, j--) + console.log('a[' + i + '][' + j + '] = ' + a[i][j]);</pre> + +<p>Zu Beachten ist, dass das Komma in Zuweisungen, wie etwa bei der <code>var</code> Deklaration, nicht den erwarteten Effekt des Kommaoperators zu haben scheint, da Zuweisungen nicht in einem Ausdruck existieren. Im folgenden Beispiel wird <code>a</code> auf den Wert von <code>b = 3</code> gesetzt (welcher 3 ist), aber <code>c = 4</code> wird dennoch ausgewertet und dessen Ergebnis wird in der Konsole ausgegeben (i.e., 4). Das ist auf die <a href="/de/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operator precedence</a> zurückzuführen.</p> + +<pre class="brush: js">// 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) +</pre> + +<p>Der Kommaoperator ist völlig anders als das Komma in Arrays, Objekten, Funktionsargumenten und -parametern.</p> + +<h3 id="Verarbeitung_und_dann_zurückgeben">Verarbeitung und dann zurückgeben</h3> + +<p>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:</p> + +<pre class="brush: js">function myFunc() { + var x = 0; + + return (x += 1, x); // ist das Gleiche wie return ++x; +}</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.14', 'Comma operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.operators.comma")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for Schleife</a></li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Der<strong> bedingte (ternäre) Operator</strong> ist der einzige Operator in JavaScript, der drei Operanden hat. Er wird häufig als Kurzform eines <a href="/de/docs/Web/JavaScript/Reference/Statements/if...else"><code>if</code></a> Statements genutzt.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-conditionaloperators.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>Bedingung </em>? <em>Ausdruck1</em>: <em>Ausdruck2</em></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>Bedingung (oder Bedingungen)</code></dt> + <dd>Ein Ausdruck, der zu <code>true</code> oder <code>false</code> ausgewertet wird.</dd> +</dl> + +<dl> + <dt><code>Ausdruck1</code>, <code>Ausdruck2</code></dt> + <dd>Ausdrücke mit Werten eines beliebigen Typs.</dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Wenn <code>Bedingung</code> zu <code>true</code> ausgewertet wird, wird <code>Ausdruck1</code> zurückgegeben; andernfalls wird <code>Ausdruck2</code> zurückgegeben.</p> + +<p>Ein einfaches Beispiel zeigt dieser Test, ob man in den USA alt genug ist, um Alkohol zu trinken.</p> + +<pre class="brush: js">var age = 26; +var canDrinkAlcohol = (age >= 21) ? "True, 21 or older" : "False, under 21"; +console.log(canDrinkAlcohol); // "True, 21 or older" +</pre> + +<p>Ein anderes Beispiel ist die Anzeige von verschiedenen Nachrichten, abhängig von der <code>isMember</code> Variable:</p> + +<pre class="brush: js">"The fee is " + (isMember ? "$2.00" : "$10.00") +</pre> + +<p>Man kann auch Variablen abhängig von einem ternären Ergebnis zuweisen:</p> + +<pre class="brush: js">var elvisLives = Math.PI > 4 ? "Yep" : "Nope";</pre> + +<p>Mehrere ternäre Auswertungen hintereinander sind ebenfalls möglich (Beachte: der ternäre Operator ist rechtsassoziativ):</p> + +<pre class="brush: js">var firstCheck = false, + secondCheck = false, + access = firstCheck ? "Access denied" : secondCheck ? "Access denied" : "Access granted"; + +console.log(access); // logt "Access granted"</pre> + +<p>Man kann ihn auch wie ein If Statement mit mehreren Bedingungen verwenden</p> + +<pre class="brush: js">var condition1 = true, + condition2 = false, + access = condition1 ? (condition2 ? "true true" : "true false") : (condition2 ? "false true" : "false false"); + +console.log(access); // logt "true false"</pre> + +<p>Zu beachten ist, dass die Klammern nicht notwendig sind und das Ergebnis nicht verändern. Sie sind zur Übersichtshilfe vorhanden.</p> + +<p>Man kann den ternären Operator alleinstehend verwenden, um verschiedene Operationen auszuführen:</p> + +<pre class="brush: js">var stop = false, age = 16; + +age > 18 ? location.assign("continue.html") : stop = true; +</pre> + +<p>Man kann auch mehr als eine Operation pro Fall ausführen, indem die Operationen mit einem Komma getrennt und geklammert werden:</p> + +<pre class="brush: js">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!") +); +</pre> + +<p>Man kann auch mehrere Operationen während einer Zuweisung durchführen. <em><strong>In diesem Fall wird der letzte von Kommas getrennte Wert als Zuweisungswert benutzt.</strong></em></p> + +<pre class="brush: js">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"</pre> + +<h3 id="Rückgabe_durch_ternäre_Statements">Rückgabe durch ternäre Statements</h3> + +<p>Der ternäre Operator ist nützlich für Funktionen, die einen Rückgabewert abhängig von einem <code>if/else</code> Statement zurückgeben.</p> + +<pre class="brush: js">var func1 = function ( .. ) { + if (condition1) { return value1; } + else { return value2; } +} + +var func2 = function ( .. ) { + return condition1 ? value1 : value2; +}</pre> + +<p>Ein häufiger Weg, um das legale Alter zum Trinken von Alkohol in den USA zurückzugeben:</p> + +<pre class="brush: js">function canDrinkAlcohol(age) { + return (age > 21) ? "True, over 21" : "False, under 21"; +} +var output = canDrinkAlcohol(26); +console.log(output); // "True, over 21"</pre> + +<p>Ein guter Weg, um herauszufinden, ob der ternäre Operator ein guter Ersatz für ein <code>if/else</code> Statement ist, ist wenn das <code>return</code> Schlüsselwort mehrfach eingesetzt wird und in jedem Block der einzige Ausdruck ist.</p> + +<p>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 <code>if/else</code> Statements sein. Dadurch wird ein leichter Weg für logisch gleiche Ausdrücke geschaffen:</p> + +<pre class="brush: js">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; +}</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.12', 'The conditional operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.operators.conditional")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/JavaScript/Reference/Statements/if...else">if Statement</a></li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Der Dekrement-Operator (--) dekrementiert den Operanden um eins, zieht als eins vom Operanden ab und gibt einen Wert zurück.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-decrement.html")}}</div> + +<div></div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var>-- or --<var>x</var> +</pre> + +<h2 id="Description">Description</h2> + +<p>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. </p> + +<p>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.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Postfix_decrement">Postfix decrement</h3> + +<pre class="brush: js notranslate">let x = 3; +y = x--; + +// y = 3 +// x = 2 +</pre> + +<h3 id="Prefix_decrement">Prefix decrement</h3> + +<pre class="brush: js notranslate">let a = 2; +b = --a; + +// a = 1 +// b = 1 +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-postfix-decrement-operator', 'Decrement operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.operators.decrement")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition">Addition operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Division">Division operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder">Remainder operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment">Increment operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Der JavaScript <strong><code>delete</code>-Operator</strong> entfernt eine Eigenschaft eines Objekts. Wenn keine weitere Referenz auf dieselbe Eigenschaft mehr existiert, wird diese automatisch freigegeben.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-deleteoperator.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">delete <em>Ausdruck</em> </pre> + +<p>wobei <em>Ausdruck</em> zu eine Referenz auf eine Eigenschaft ausgewertet werden sollte, z. B.:</p> + +<pre class="syntaxbox">delete <em>object.property</em> +delete <em>object</em>['<em>property</em>'] +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>object</code></dt> + <dd>Der Name eines Objekts oder ein Ausdruck der zu einem Objekt ausgewertet wird.</dd> + <dt><code>property</code></dt> + <dd>Die zu löschende Eigenschaft.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p><code>true</code> für alle Fälle, außer wenn die Eigenschaft eine eigene nicht konfigurierbare Eigenschaft ist, in diesem Fall wird im nicht strict Modus <code>false</code> zurückgegeben.</p> + +<h3 id="Fehler">Fehler</h3> + +<p>Erzeugt einen {{jsxref("Global_objects/SyntaxError")}} im <a href="/de/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict Modus</a>, wenn die Eigenschaft eine eigene nicht konfigurierbare Eigenschaft ist.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Anders als es allgemein üblich ist, hat der <code>delete</code> Operator <strong>nichts</strong> mit dem Freigeben von Speichers zu tun. Speicherverwaltung wird indirekt über fehlende Referenzen gemacht, dazu mehr Details auf der Seite <a href="/de/docs/Web/JavaScript/Memory_Management">Speicherverwaltung</a>.</p> + +<p>Der <strong><code>delete</code></strong> Operator entfernt eigene gegebene Eigenschaft von einem Objekt. Ist dieses Erfolgreich, wird <code>true</code> zurückgegeben, andernfalls <code>false</code>. Jedoch ist es wichtig die folgenden Szenarien zu bedenken:</p> + +<ul> + <li>Wenn die Eigenschaft, die gelöscht werden soll, nicht existiert, hat <code>delete</code> keinen Effekt und wird <code>true</code> zurückgeben.</li> + <li>Wenn eine Eigenschaft mit dem selben Namen in der Prototypenkette existiert, wird nach dem Löschen diese Eigenschaft aus der Prototypenkette weiter benutzt (in anderen Worten, <code>delete</code> hat nur auf eigenen Eigenschaften einen Effekt).</li> + <li>Jede Eigenschaft, die mit {{jsxref("Statements/var","var")}} deklariert wurde, kann nicht vom globalen oder Funktionsgültigkeitsbereich gelöscht werden. + <ul> + <li><code>delete</code> kann keine Funktion im globalen Gültigkeitsbereich löschen (egal ob diese Teil einer Funktionsdeklaration oder eines Funktionsausdrucks ist).</li> + <li>Funktionen die Teil eines Objektes sind (außer dem globalen Objekt) können mit <code>delete</code> gelöscht werden.</li> + </ul> + </li> + <li>Jede Eigenschaft, die mit {{jsxref("Statements/let","let")}} oder {{jsxref("Statements/const","const")}} deklariert wurde, kann nicht vom Gültigkeitsbereich, indem diese definiert wurde, gelöscht werden.</li> + <li>Nicht konfigurierbare Eigenschaften können nicht gelöscht werden. Eingenommen sind Eigenschaften von Standardobjekten wie {{jsxref("Math")}}, {{jsxref("Array")}}, {{jsxref("Object")}} und Eigenschaften die mit Methoden wie {{jsxref("Object.defineProperty()")}} als nicht konfigurierbar erstellt wurden.</li> +</ul> + +<p>Der folgende Ausschnitt enthält ein einfaches Beispiel:</p> + +<pre class="brush: js">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</pre> + +<h3 id="Nicht_konfigurierbare_Eigenschaften">Nicht konfigurierbare Eigenschaften</h3> + +<p>Wenn eine Eigenschaft als nicht konfigurierbar markiert ist, hat <code>delete</code> keinen Effekt und wird <code>false</code> zurückgeben. Im strict Modus wird es zu einem <code>SyntaxError</code> kommen.</p> + +<pre class="brush: js">var Employee = {}; +Object.defineProperty(Employee, 'name', {configurable: false}); + +console.log(delete Employee.name); // gibt false zurück</pre> + +<p>{{jsxref("Statements/var","var")}}, {{jsxref("Statements/let","let")}} und {{jsxref("Statements/const","const")}} erstellen nicht konfigurierbare Eigenschaften, die nicht mit dem <code>delete</code> Operator gelöscht werden können.</p> + +<pre class="brush: js">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 +</pre> + +<p>Im strict Modus wird diese zu einem Fehler führen.</p> + +<h3 id="Strict_vs._nicht_strict_Modus">Strict vs. nicht strict Modus</h3> + +<p>Wenn im strict Mode <code>delete</code> direkt auf einer Referenz einer Variablen, eines Funktionsargumentes oder eines Funktionsnamens genutzt wird, wird ein {{jsxref("SyntaxError")}} erzeugt.</p> + +<p>Jede Variable, die mit <code>var</code> definiert wird, wird als nicht konfigurierbar markiert. Im folgenden Beispiel ist <code>salary</code> nicht konfigurierbar und kann nicht gelöscht werden. Im nicht strict Modus wird der <code>delete</code> Operator <code>false</code> zurückgeben.</p> + +<pre class="brush: js">function Employee() { + delete salary; + var salary; +} + +Employee();</pre> + +<p>Mal sehen, wie sich der selbe Code im strict Modus verhält. Statt dem Zurückgeben von <code>false</code>, wird das Statement zu einem <code>SyntaxError</code> führen.</p> + +<pre class="brush: js">"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</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: js">// 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 +} +</pre> + +<h3 id="delete_und_die_Prototypenkette"><code>delete</code> und die Prototypenkette</h3> + +<p>Im folgenden Beispiel löschen wir eine eigene Eigenschaft eines Objektes, während ein Eigenschaft mit dem selben Namen in der Prototypenkette vorhanden ist:</p> + +<pre class="brush: js">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); </pre> + +<h3 id="Arrayelemente_löschen">Arrayelemente löschen</h3> + +<p>Wenn ein Arrayelement gelöscht wird, hat das keinen Effekt auf die Arraylänge. Das funktioniert nur, wenn man das letzte Arrayelement lösche.</p> + +<p>Wenn der <code>delete</code> Operator ein Arrayelement löscht, ist das Element nicht mehr länger im Array. Im folgenden Beispiel wird <code>trees[3]</code> mit <code>delete</code> gelöscht.</p> + +<pre class="brush: js">var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; +delete trees[3]; +if (3 in trees) { + // das wird nicht ausgeführt +}</pre> + +<p>Wenn ein Arrayelement existent sein soll, aber den Wert undefined haben soll, benutzt man <code>undefined</code> statt dem <code>delete</code> Operator. Im folgenden Beispiel bekommt <code>trees[3]</code> den Wert undefined zugewiesen, aber das Arrayelement existiert noch:</p> + +<pre class="brush: js">var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; +trees[3] = undefined; +if (3 in trees) { + // das wird ausgeführt +}</pre> + +<p>Wenn stattdessen ein Arrayelement gelöscht werden soll, wobei auch der Inhalt des Arrays geändert werden soll, so benutzt man die <code>{{jsxref("Array.splice", "splice")}}</code> Methode. Das folgende Beispiel entfernt <code>trees[3]</code> komplett vom Array mit dem Einsatz von <code>{{jsxref("Array.splice", "splice")}}</code>:</p> + +<pre class="brush: js">var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; +trees.splice(3, 1); +console.log(trees); // ["redwood", "bay", "cedar", "maple"];</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-delete-operator', 'The delete Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-delete-operator', 'The delete Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.4.1', 'The delete Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.4.1', 'The delete Operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.2.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.operators.delete")}}</p> + +<h2 id="Browserübergeifende_Hinweise">Browserübergeifende Hinweise</h2> + +<p>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.</p> + +<p>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.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="http://perfectionkills.com/understanding-delete/">In depth analysis on delete</a></li> + <li>{{jsxref("Reflect.deleteProperty()")}}</li> + <li>{{jsxref("Map.prototype.delete()")}}</li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Die <strong>destrukturierende Zuweisung</strong> 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.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-destructuringassignment.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:js">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} +</pre> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Die Objekt- und Array-Literal Ausdrücke stellen einen einfachen Weg für die Erstellung von <em>ad hoc</em> Datenpaketen zur Verfügung.</p> + +<pre class="brush: js">var x = [1, 2, 3, 4, 5];</pre> + +<p>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.</p> + +<pre class="brush: js">var x = [1, 2, 3, 4, 5]; +var [y, z] = x; +console.log(y); // 1 +console.log(z); // 2 +</pre> + +<p>Diese Fähigkeit ist so ähnlich wie in den Sprachen Perl und Python.</p> + +<h2 id="Array-Destrukturierung">Array-Destrukturierung</h2> + +<h3 id="Einfaches_Variablenzuweisung">Einfaches Variablenzuweisung</h3> + +<pre class="brush: js">var foo = ['one', 'two', 'three']; + +var [one, two, three] = foo; +console.log(one); // "one" +console.log(two); // "two" +console.log(three); // "three" +</pre> + +<h3 id="Zuweisung_separat_von_Deklaration">Zuweisung separat von Deklaration</h3> + +<p>Eine destrukturierende Zuweisung kann ohne Deklaration im Zuweisungsstatement vorgenommen werden.</p> + +<pre class="brush:js">var a, b; + +[a, b] = [1, 2]; +console.log(a); // 1 +console.log(b); // 2</pre> + +<h3 id="Standardwerte">Standardwerte</h3> + +<p>Einer Variablen kann ein Standardwert zugewiesen werden, welcher greift, wenn der Wert im Fall vom auspacken des Arrays <code>undefined</code> ist.</p> + +<pre class="brush: js">var a, b; + +[a=5, b=7] = [1]; +console.log(a); // 1 +console.log(b); // 7</pre> + +<h3 id="Variablen_tauschen">Variablen tauschen</h3> + +<p>Zwei Variablenwerte können mit destrukturierenden Zuweisungen vertauscht werden.</p> + +<p>Ohne destrukturierende Zuweisung benötigt man für den Tausch zweier Werte eine temporäre Variable (oder, in manchen Low-level Sprachen, den <a class="external" href="http://en.wikipedia.org/wiki/XOR_swap">XOR-swap Trick</a>).</p> + +<pre class="brush:js">var a = 1; +var b = 3; + +[a, b] = [b, a]; +console.log(a); // 3 +console.log(b); // 1</pre> + +<h3 id="Array_von_Funktion_zurückgeben_und_einlesen">Array von Funktion zurückgeben und einlesen</h3> + +<p>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.</p> + +<p>In diesem Beispiel gibt <code>f()</code> den Wert <code>[1, 2]</code> zurück, welcher in einer Zeile mittels Destrukturierung eingelesen werden kann.</p> + +<pre class="brush:js">function f() { + return [1, 2]; +} + +var a, b; +[a, b] = f(); +console.log(a); // 1 +console.log(b); // 2 +</pre> + +<h3 id="Rückgabewerte_teilweise_ignorieren">Rückgabewerte teilweise ignorieren</h3> + +<p>Man kann auch Rückgabewerte, an denen man nicht interessiert ist, ignorieren:</p> + +<pre class="brush:js">function f() { + return [1, 2, 3]; +} + +var [a, , b] = f(); +console.log("A ist " + a + " B ist " + b); +</pre> + +<p>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:</p> + +<pre class="brush:js">[,,] = f();</pre> + +<h3 id="Den_Rest_eines_Arrays_einer_Variablen_zuweisen">Den Rest eines Arrays einer Variablen zuweisen</h3> + +<p>Wenn ein Array destrukturiert wird, kann man beim Auspacken den restlichen Teil eines Arrays einer Varaible mit dem Restpattern zuweisen:</p> + +<pre class="brush: js">var [a, ...b] = [1, 2, 3]; +console.log(a); // 1 +console.log(b); // [2, 3]</pre> + +<p>Zu beachten ist, dass ein {{jsxref("SyntaxError")}} erzeugt wird, wenn auf der linken Seite des Restelements ein trennendes Komma steht:</p> + +<pre class="brush: js example-bad">var [a, ...b,] = [1, 2, 3]; +// SyntaxError: rest element may not have a trailing comma</pre> + +<h3 id="Auspacken_von_Treffern_eines_regulären_Ausdrucks">Auspacken von Treffern eines regulären Ausdrucks</h3> + +<p>Wenn die Methode <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">exec()</a></code> 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.</p> + +<pre class="brush:js">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" +</pre> + +<h2 id="Objektdestrukturierung">Objektdestrukturierung</h2> + +<h3 id="Einfache_Zuweisung">Einfache Zuweisung</h3> + +<pre class="brush: js">var o = {p: 42, q: true}; +var {p, q} = o; + +console.log(p); // 42 +console.log(q); // true +</pre> + +<h3 id="Zuweisung_ohne_Deklaration">Zuweisung ohne Deklaration</h3> + +<p>Die destrukturierende Zuweisung kann ohne eine Deklaration im Zuweisungs-Statement durchgeführt werden.</p> + +<pre class="brush:js">var a, b; + +({a, b} = {a: 1, b: 2});</pre> + +<div class="note"> +<p>Die runden Klammern <code>( ... )</code> wird benötigt wenn man die destrukturierende Zuweisung mit Objektliteralen ohne eine Deklaration durchführen möchte.</p> + +<p><code>{a, b} = {a: 1, b: 2}</code> ist keine valide eigenständige Syntax, weil <code>{a, b}</code> auf der linken Seite als ein Block und nicht als Objektliteral erkannt wird.</p> + +<p><code>({a, b} = {a: 1, b: 2})</code> ist genauso gültig wie <code>var {a, b} = {a: 1, b: 2}</code></p> + +<p>HINWEIS: Der <code>( ... )</code> Ausdruck muss durch ein vorangestelltes Semikolen benutzt werden oder es führt eine Funktion aus der vorherigen Zeile aus.</p> +</div> + +<h3 id="Zu_neuen_Varaiblennamen_zuweisen">Zu neuen Varaiblennamen zuweisen</h3> + +<p>Eine Eigenschaft kann aus einem Objekt ausgepackt werden und zu einer Variablen mit einem anderen Namen zugewiesen werden.</p> + +<pre class="brush: js">var o = {p: 42, q: true}; +var {p: foo, q: bar} = o; + +console.log(foo); // 42 +console.log(bar); // true</pre> + +<h3 id="Standardwerte_2">Standardwerte</h3> + +<p>Einer Variablen können Standardwerte zugewiesen werden, wenn der ausgepackte Wert aus dem Objekt <code>undefined</code> ist.</p> + +<pre class="brush: js">var {a = 10, b = 5} = {a: 3}; + +console.log(a); // 3 +console.log(b); // 5</pre> + +<h3 id="Zuweisen_eines_neuen_Variablennamen_und_eines_Standardwertes">Zuweisen eines neuen Variablennamen und eines Standardwertes</h3> + +<p>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 <code>undefined</code> ist.</p> + +<pre class="brush: js">var {a:aa = 10, b:bb = 5} = {a: 3}; + +console.log(aa); // 3 +console.log(bb); // 5</pre> + +<h3 id="Standardwerte_für_Funktionsparamter_setzen">Standardwerte für Funktionsparamter setzen</h3> + +<h4 id="ES5_Version">ES5 Version</h4> + +<pre class="brush: js">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 +});</pre> + +<h4 id="ES2015-Version">ES2015-Version</h4> + +<pre class="brush: js">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 +});</pre> + +<div class="note"> +<p>In der Funktionssignatur für <strong><code>drawES2015Chart</code></strong> oben ist der destrukturierten linken Seite ein leeres Objektliteral zugewiesen, auf der rechten Seite: <code>{size = 'big', cords = {x: 0, y: 0}, radius = 25} = {}</code>. 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 <code><strong>drawES2015Chart()</strong></code> 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.</p> +</div> + +<h3 id="Destrukturierung_von_verschachtelten_Objekten_und_Arrays">Destrukturierung von verschachtelten Objekten und Arrays</h3> + +<pre class="brush:js">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"</pre> + +<h3 id="for_of_Iteration_und_Destrukturierung">"for of" Iteration und Destrukturierung</h3> + +<pre class="brush: js">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"</pre> + +<h3 id="Auspacken_von_Objektfeldern_die_als_Funktionsparameter_übergeben_werden">Auspacken von Objektfeldern, die als Funktionsparameter übergeben werden</h3> + +<pre class="brush:js">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"</pre> + +<p>Dies ermittelt <code>id</code>, <code>displayName</code> und <code>firstName</code> vom user Objekt und gibt sie aus.</p> + +<h3 id="Berechnete_Objekteigenschaftsnamen_und_Destrukturierung">Berechnete Objekteigenschaftsnamen und Destrukturierung</h3> + +<p>Berechnete Eigenschaftsnamen, wie bei <a href="/de/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names">Objektliteralen</a>, können bei der Destruktierung verwendet werden.</p> + +<pre class="brush: js">let key = "z"; +let { [key]: foo } = { z: "bar" }; + +console.log(foo); // "bar" +</pre> + +<h3 id="Rest_in_Objektdestrukturierung">Rest in Objektdestrukturierung</h3> + +<p>Die <a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Eigenschaften für den ECMAScript</a> Vorschlag (Stage 3) fügt die <a href="/de/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest-</a>Syntax zur Destrukturierung hinzu. Rest Eigenschaften sammeln die restlichen, eigenen, aufzählbaren Eigenschaftsschlüssel, die noch nicht von der Destrukturierung erfasst wurden, auf.</p> + +<pre class="brush: js">var {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}; +a; // 10 +b; // 20 +rest; // { c: 30, d: 40 }</pre> + +<h3 id="Ungültige_JavaScript_Bezeichner_als_Eigenschaftsnamen">Ungültige JavaScript Bezeichner als Eigenschaftsnamen</h3> + +<p>Destrukturierung kann mit Eigenschaftsnamen benutzt werden, die keine gültigen JavaScript <a href="/de/docs/Glossary/Identifier">Bezeichner</a> sind, indem ein alternativer valider Beizeichner angegeben wird.</p> + +<pre class="brush: js">const foo = { 'fizz-buzz': true } +const { 'fizz-buzz': fizzBuzz } = foo + +console.log(fizzBuzz); // "true" +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td><a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a></td> + <td>Draft</td> + <td>Stage 3 Entwurf.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.operators.destructuring")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Zuweisungsoperatoren</a></li> + <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/">"ES6 in Depth: Destructuring" auf hacks.mozilla.org</a></li> + <li><a href="https://stackoverflow.com/questions/28532868/basic-nodejs-require-syntax#28532919">Multiple ways of using destructuring assignments (Stack Overflow)</a></li> +</ul> 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 +--- +<div class="warning"><strong>Nicht Standardisiert. Nicht benutzen!</strong><br> +Die Ausdrucks Closure-Syntax ist eine veraltete Firefox spezifische Funktion und wurde mit Firefox 60 entfernt. In Zukunft sollten <a href="/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Pfeilfunktionen</a> genutzt werden.</div> + +<div>{{jsSidebar("Operators")}}</div> + +<p>Ausdrucks Closures sind eine kurze Funktionssyntax für das Schreiben einfacher Funktionen.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) + <em>expression</em> +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>name</code></dt> + <dd>Der Funktionsname. Kann bei anonymen Funktionen weggelassen werden. Der Name ist nur lokal im Funktionskörper verfügbar.</dd> + <dt><code>paramN</code></dt> + <dd>Der Name eines Arguments, welcher der Funktion übergeben wird. Eine Funktion kann bis zu 255 Argumente haben.</dd> + <dt><code>expression</code></dt> + <dd>Der Ausdruck, welcher den Funktionskörper einer Funktion bildet.</dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Diese Funktion ist nicht mehr als eine eine Kurzschreibweise für einfache Funktionen, die der Sprache einer typischen <a class="external" href="http://en.wikipedia.org/wiki/Lambda_calculus#Lambda_calculus_and_programming_languages">Lambda Notation</a> ähnelt.</p> + +<p>JavaScript 1.7 und älter:</p> + +<pre class="brush: js">function(x) { return x * x; }</pre> + +<p>JavaScript 1.8:</p> + +<pre class="brush: js">function(x) x * x</pre> + +<p>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.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Eine Kurzschreibweise für Eventlistener:</p> + +<pre class="brush: js"> document.addEventListener('click', function() false, true); +</pre> + +<p>Einsatz dieser Notation mit der Array Funktion <code>some</code> aus JavaScript 1.6:</p> + +<pre class="brush: js">elems.some(function(elem) elem.type == 'text'); +</pre> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.operators.expression_closures")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Functions_and_function_scope", "Funktionen und Funktionsgültigkeitsbereiche")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Statements/function", "Funktionsstatement")}}</li> + <li>{{jsxref("Operators/function", "Funktionsausdruck")}}</li> + <li>{{jsxref("Statements/function*", "function* Statement")}}</li> + <li>{{jsxref("Operators/function*", "function* Ausdruck")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Das Schlüsselwort <strong><code>function</code></strong> kann benutzt werden, um eine Funktion innerhalb eines Ausdrucks zu definieren.</p> + +<p>Man kann Funktionen auch mit Hilfe des <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a></code>-Konstruktors oder als <a href="/de/docs/Web/JavaScript/Reference/Statements/function">Funktionsdeklarationen</a> definieren.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-functionexpression.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var meineFunktion = function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { + <em>statements</em> +};</pre> + +<p>Seit ES2015 können außerdem <a href="/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Pfeilfunktionen</a> benutzt werden.</p> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>name</code></dt> + <dd>Der Funktionsname. Kann weggelassen werden, wenn es sich um eine <em>anonyme </em>Funktion handelt. Der Name ist nur im Funktionskörper referenzierbar.</dd> + <dt><code>paramN</code></dt> + <dd>Der Name eines Argumentes, welches der Funktion übergeben wird.</dd> + <dt><code>statements</code></dt> + <dd>Die Befehle, aus denen der Funktionskörper besteht.</dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Ein Funktionsausdruck ist einem Funktionsstatement sehr ähnlich und hat fast die gleiche Syntax (siehe <a href="/de/docs/Web/JavaScript/Reference/Statements/function">Funktionsstatement</a>). Der größte Unterschied zwischen einem Funktionsausdruck und einem Funktionsstatement ist der <em>Funktionsname, </em>der in der Funktionsausdruck weggelassen werden kann, um eine anonyme Funktion zu erstellen. Ein Funktionsausdruck kann als <strong>IIFE </strong>(Immediately Invoked Function Expression) genutzt werden, die sofort nach Definition ausgeführt wird. Im Kapitel <a href="/de/docs/Web/JavaScript/Reference/Functions">Funktionen</a> finden sich weitere Informationen.</p> + +<h3 id="Hoisting_von_Funktionsausdrücken">Hoisting von Funktionsausdrücken</h3> + +<p>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.</p> + +<pre class="brush: js">notHoisted(); // TypeError: notHoisted is not a function + +var notHoisted = function() { + console.log('bar'); +}; +</pre> + +<h3 id="Benannte_Funktionsausdrücke">Benannte Funktionsausdrücke</h3> + +<p>Wenn man die aktuelle Funktion innerhalb des Funktionskörpers referenzieren will, muss ein Benannter Funktionsausdruck erstellt werden. <u><strong>Dieser Name ist nur im Funktionskörper referenzierbar. </strong></u>Das verhindert den Gebrauch der nicht standardisierten <code><a href="/de/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code> Eigenschaft.</p> + +<pre class="brush: js">var math = { + 'fakultaet': function fakultaet(n) { + if (n <= 1) + return 1; + return n * fakultaet(n - 1); + } +}; + +math.fakultaet(3) //3;2;1; +</pre> + +<p>Die Variable, der ein Funktionsausdruck zugewiesen wurde, hat eine <code>name</code> 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 <a href="/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Pfeilfunktionen</a> zu (diese haben keinen Namen so dass der Variablenname nur implizit gesetzt werden kann)</p> + +<pre class="brush: js">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) +</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Das folgende Beispiel definiert eine unbenannte Funktion und weist sie <code>x</code> zu. Die Funktion gibt das Quadrat ihres Argumentes zurück.</p> + +<pre class="brush: js">var x = function(y) { + return y * y; +}; +</pre> + +<p>Meistens werden Funktionsausdrücke in <a href="/de/docs/Glossary/Callback_function">Callbacks</a> genutzt:</p> + +<pre class="brush: js">button.addEventListener('click', function(event) { + console.log('button wurde geklickt!') +})</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initiale Fefinition. Implementiert in JavaScript 1.5.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.operators.function")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Arrow_functions", "Arrow functions")}}</li> + <li>{{jsxref("Functions_and_function_scope", "Funktionen und Funktionsgültigkeitsbereiche")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Statements/function", "Funktionsstatement")}}</li> + <li>{{jsxref("Statements/function*", "function* Statement")}}</li> + <li>{{jsxref("Operators/function*", "function* Ausdruck")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{jsxref("Statements/async_function", "Asynchrone Funktion")}}</li> + <li>{{jsxref("Operators/async_function", "Asynchroner Funktionsausdruck")}}</li> +</ul> 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* +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Das <strong><code>function*</code></strong> Schlüsselwort kann benutzt werden, um Generatorfunktionen in einem Ausdruck zu definieren.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-functionasteriskexpression.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">function* [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { + <em>statements</em> +}</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>name</code></dt> + <dd>Der Funktionsname. Kann weggelassen werden, wenn es ein <em>anonymen </em>Funktion ist. Der Name ist nur im Funktionskörper referenzierbar.</dd> + <dt><code>paramN</code></dt> + <dd>Der Name eines Argumentes, welches der Funktion übergeben wird. Eine Funktion kann bis zu 255 Argumente haben.</dd> + <dt><code>statements</code></dt> + <dd>Die Statements, die den Rumpf der Funktion darstellen.</dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Ein <code>function*</code> Ausdruck sehr ähnlich zu {{jsxref('Statements/function*', 'function* Statements')}} und hat die selbe Syntax. Der Hauptunterschied zwischen einem <code>function*</code> Ausdruck und <code>function*</code> Statement ist der <em>Funktionsname</em>, welcher in einem <code>function*</code> Ausdruck weggelassen werden kann, um eine <em>anonyme</em> Funktion zu erstellen. Mehr Informationen sind im Kapitel <a href="/de/docs/Web/JavaScript/Reference/Functions">Funktionen</a> enthalten.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Das folgende Beispiel definiert eine namenlose Generatorfunktion und weist diese <code>x</code> zu. Die Funktion liefert das Quadrat ihres Argumentes:</p> + +<pre class="brush: js">var x = function*(y) { + yield y * y; +}; +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Komment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#', 'function*')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#', 'function*')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.operators.function_star")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Statements/function*", "function* Statement")}}</li> + <li>{{jsxref("GeneratorFunction")}} Objekt</li> + <li><a href="/de/docs/Web/JavaScript/Guide/The_Iterator_protocol">Das Iterator Protokoll</a></li> + <li>{{jsxref("Operators/yield", "yield")}}</li> + <li>{{jsxref("Operators/yield*", "yield*")}}</li> + <li>{{jsxref("Function")}} Objekt</li> + <li>{{jsxref("Statements/function", "Funktionsstatement")}}</li> + <li>{{jsxref("Operators/function", "Funktionsausdruck")}}</li> + <li>{{jsxref("Functions_and_function_scope", "Funktionen und Funktionsgültigkeitsbereiche")}}</li> +</ul> 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 +--- +<div class="warning"><strong>Non standardisiert. Nicht einsetzen!</strong><br> +Die Generator Comprehensions Syntax ist nicht standardisiert und wurde mit Firefox 58 entfernt. Zukünftig sollte stattdessen {{jsxref("Statements/function*", "Generatoren", "", 1)}} eingesetzt werden.</div> + +<div>{{jsSidebar("Operators")}}</div> + +<p>Die <strong>Generator Comprehensions</strong> 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!</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">(for (x of iterable) x) +(for (x of iterable) if (condition) x) +(for (x of iterable) for (y of iterable) x + y) +</pre> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>In der Generator Comprehension gibt es zwei erlaubte Arten von Komponenten:</p> + +<ul> + <li>{{jsxref("Statements/for...of", "for...of")}} und</li> + <li>{{jsxref("Statements/if...else", "if")}}</li> +</ul> + +<p>Die <code>for-of</code> Iteration ist immer die erste Komponente. Mehrere <code>for-of</code> Iterationen oder <code>if</code> Statements sind erlaubt.</p> + +<p>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.</p> + +<p>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.</p> + +<p>Angenommen man hat ein Iterator <code>it</code> 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:</p> + +<pre class="brush: js">var doubles = [for (i in it) i * 2]; +</pre> + +<p>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:</p> + +<pre class="brush: js">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 +</pre> + +<p>Wenn eine Generator Comprehension als Argument einer Funktion eingesetzt wird, können durch die Funktionsaufrufsklammern die äußeren Klammern weggelassen werden:</p> + +<pre class="brush: js">var result = doSomething(for (i in it) i * 2); +</pre> + +<p>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.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Einfache_Generator_Comprehensions">Einfache Generator Comprehensions</h3> + +<pre class="brush:js">(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" +</pre> + +<h3 id="Generator_Comprehensions_mit_if_Statement">Generator Comprehensions mit if Statement</h3> + +<pre class="brush: js">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 +</pre> + +<h3 id="Generator_Comprehensions_verglichen_mit_Generatorfunktionen">Generator Comprehensions verglichen mit Generatorfunktionen</h3> + +<p>Ein einfacher Weg um Generator Comprehension Syntax zu verstehen ist es sie mit Generatorfunktionen zu vergleichen.</p> + +<p>Beispiel 1: Einfacher Generator:</p> + +<pre class="brush: js">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] +</pre> + +<p>Beispiel 2: Einsatz von <code>if</code> in Generatoren.</p> + +<pre class="brush: js">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]</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>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.</p> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.operators.generator_comprehensions")}}</p> + +<h2 id="Unterschiede_zu_den_älteren_JS1.7JS1.8_Comprehensions">Unterschiede zu den älteren JS1.7/JS1.8 Comprehensions</h2> + +<div class="warning">JS1.7/JS1.8 Comprehensions wurden von Gecko 46 entfernt ({{bug(1220564)}}).</div> + +<p><strong>Alte Comprehensions Syntax (nicht mehr benutzen!):</strong></p> + +<pre class="brush: js example-bad">(X for (Y in Z)) +(X for each (Y in Z)) +(X for (Y of Z)) +</pre> + +<p>Unterschiede:</p> + +<ul> + <li>ES7 Comprehensions erstellen einen Gültigkeitsbereich pro "for" Statement statt einen für die komplette Comprehension. + <ul> + <li>Alt: <code>[...(()=>x for (x of [0, 1, 2]))][1]() // 2</code></li> + <li>Neu: <code>[...(for (x of [0, 1, 2]) ()=>x)][1]() // 1, jede Iteration erstellt eine frische Bindung zu x. </code></li> + </ul> + </li> + <li>ES7 Comprehensions beginnen mit "for" statt eines Zuweisungsausdrucks. + <ul> + <li>Alt: <code>(i * 2 for (i of numbers))</code></li> + <li>Neu: <code>(for (i of numbers) i * 2)</code></li> + </ul> + </li> + <li>ES7 Comprehensions können mehrere <code>if</code> und <code>for</code> Komponenten haben.</li> + <li>ES7 Comprehensions funktionieren nur mit <code>{{jsxref("Statements/for...of", "for...of")}}</code> und nicht mit <code>{{jsxref("Statements/for...in", "for...in")}}</code> Iteration.</li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Statements/for...of", "for...of")}}</li> + <li>{{jsxref("Operators/Array_comprehensions", "Array Comprehensions")}}</li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Der Gruppierungsoperator <code>( )</code> kontrolliert die Priorität beim Auswerten von Ausdrücken.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-groupingoperator.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"> ( )</pre> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Der Gruppierungsoperator besteht aus einem runden Klammernpaar um einen Ausdruck oder Teilausdruck, um die normale <a href="/de/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operator Priorität</a> 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.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Überschreiben von Multiplikation und Division zu erst, wenn Addition und Subtraktion als erstes ausgewertet werden sollen.</p> + +<pre class="brush:js">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 +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-grouping-operator', 'The Grouping Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-grouping-operator', 'The Grouping Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.6', 'The Grouping Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.1.4', 'The Grouping Operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.operators.grouping")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operator Priorität</a></li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Operators/typeof", "typeof")}}</li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Der <strong>in operator</strong> gibt true zurück, falls die gegebene Eigenschaft im gegebenen Objekt existiert.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-inoperator.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>prop</em> in <em>object</em></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>Ein String oder Symbol welches einen Namen einer Eigenschaft oder einen Arrayindex (nicht Symbole werden in einen String konvertiert).</dd> +</dl> + +<dl> + <dt><code>object</code></dt> + <dd>Objekt, bei welchem überprüft wird, ob eine Eigenschaft mit spezifiziertem Namen enthalten ist (oder in der Prototypenkette enthalten ist).</dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Die folgenden Beispiele zeigen einige Verwendungen des Operators</p> + +<pre class="brush:js">// 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 +</pre> + +<p>Man muss auf der rechten Seite des <code>in</code> Operators ein Objekt benutzen. Zum Beispiel kann ein String, der durch einen Konstruktor erstellt wurde, benutzt werden, jedoch funktioniert kein Stringliteral.</p> + +<pre class="brush:js">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 +</pre> + +<h3 id="Einsatz_von_in_mit_gelöschten_oder_undefined_Eigenschaften.">Einsatz von <code>in</code> mit gelöschten oder undefined Eigenschaften.</h3> + +<p>Wenn eine Eigenschaft mit dem <code><a href="/de/docs/Web/JavaScript/Reference/Operators/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete">delete</a></code> Operator gelöscht wird, wird der <code>in</code> für diese Eigenschaft <code>false</code> zurückgeben.</p> + +<pre class="brush:js">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 +</pre> + +<p>Wenn eine Eigenschaft auf {{jsxref("Global_Objects/undefined", "undefined")}} gesetzt wird, aber nicht gelöscht wird, wird der <code>in</code> Operator <code>true</code> zurückgeben.</p> + +<pre class="brush:js">var mycar = {make: "Honda", model: "Accord", year: 1998}; +mycar.make = undefined; +"make" in mycar; // gibt true zurück +</pre> + +<pre class="brush:js">var trees = new Array("redwood", "bay", "cedar", "oak", "maple"); +trees[3] = undefined; +3 in trees; // gibt true zurück +</pre> + +<h3 id="Vererbte_Eigenschaften">Vererbte Eigenschaften</h3> + +<p>Der <code>in</code> Operator gibt <code>true</code> für Eigenschaften in der Prototype-Kette zurück.</p> + +<pre class="brush:js">"toString" in {}; // gibt true zurück +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.8.7', 'The in Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.8.7', 'The in Operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.4.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.operators.in")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><code><a href="/de/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code></li> + <li><code><a href="/de/docs/Web/JavaScript/Reference/Operators/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete">delete</a></code></li> + <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li> + <li>{{jsxref("Reflect.has()")}}</li> + <li><a href="de/docs/Web/JavaScript/Aufzählbarkeit_und_Zugehörigkeit_von_Eigenschaften" title="/en-US/docs/Enumerability_and_ownership_of_properties">Aufzählbarkeit und Zugehörigkeit von Eigenschaften</a></li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Dieses Kapitel behandelt alle JavaScript Sprachoperatoren, Ausdrücke und Schlüsselwörter.</p> + +<h2 id="Ausdrücke_und_Operatoren_geordnet_nach_Kategorie">Ausdrücke und Operatoren geordnet nach Kategorie</h2> + +<p>Die alphabetische Sortierung finden Sie in der linken Seitenspalte.</p> + +<h3 id="Grundlegende_Ausdrücke">Grundlegende Ausdrücke</h3> + +<p>Elementare Schlüsselwörter und allgemeine Ausdrücke in JavaScript.</p> + +<dl> + <dt>{{jsxref("Operators/this", "this")}}</dt> + <dd>Das <code>this</code> Schlüsselwort referenziert eine spezielle Eigenschaft des Ausführungskontexts.</dd> + <dt>{{jsxref("Operators/function", "function")}}</dt> + <dd>Der <code>function</code> Schlüsselbegriff definiert einen Funktionsausdruck.</dd> + <dt>{{jsxref("Operators/class", "class")}}</dt> + <dd>Das <code>class</code> Schlüsselwort definiert einen Klassenausdruck.</dd> + <dt>{{jsxref("Operators/function*", "function*")}}</dt> + <dd>Das <code>function*</code> Schlüsselword definiert einen Generatorfunktionsausdruck.</dd> + <dt>{{jsxref("Operators/yield", "yield")}}</dt> + <dd>Eine Generatorfunktion anhalten und fortsetzen.</dd> + <dt>{{jsxref("Operators/yield*", "yield*")}}</dt> + <dd>Delegiert zu einer anderen Generatorfunktion oder Iterable Objekt.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/async_function", "async function*")}}</dt> + <dd><code>async function</code> definiert einen asynchron Funktionsausdruck.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/await", "await")}}</dt> + <dd>Hält eine asynchrone Funktion an und setzt sie fort und wartet dabei auf ein erfolgreichen oder nicht erfolgreichen Promise.</dd> + <dt>{{jsxref("Global_Objects/Array", "[]")}}</dt> + <dd>Array-Initialisierungs/Literal-Syntax.</dd> + <dt>{{jsxref("Operators/Object_initializer", "{}")}}</dt> + <dd>Objekt-Initialisierungs/Literal-Syntax.</dd> + <dt>{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}</dt> + <dd>Literal-Syntax für reguläre Ausdrücke.</dd> + <dt>{{jsxref("Operators/Grouping", "( )")}}</dt> + <dd>Gruppierungs-Operator.</dd> +</dl> + +<h3 id="Linke-Seite-Ausdrücke">Linke-Seite-Ausdrücke</h3> + +<p>Werte auf der linken Seite sind das Ziel einer Zuweisung.</p> + +<dl> + <dt>{{jsxref("Operators/Property_accessors", "Eigenschaftszugriff", "", 1)}}</dt> + <dd>Member-Operatoren ermöglichen den Zugriff auf eine Objektvariable oder eine Methode eines Objekts (<code>object.property</code> und <code>object["property"]</code>).</dd> + <dt>{{jsxref("Operators/new", "new")}}</dt> + <dd>Der <code>new</code> Operator erzeugt eine Instanz über einen Konstruktor.</dd> + <dt><a href="/de/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></dt> + <dd>In Konstruktoren referenziert <code>new.target</code> auf den Konstruktor, welcher mit {{jsxref("Operators/new", "new")}} aufgerufen wurde.</dd> + <dt>{{jsxref("Operators/super", "super")}}</dt> + <dd>Das <code>super</code> Schlüsselwort ruft den Elternkonstruktor auf.</dd> + <dt>{{jsxref("Operators/Spread_operator", "...obj")}}</dt> + <dd>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.</dd> +</dl> + +<h3 id="Inkrement_und_Dekrement">Inkrement und Dekrement</h3> + +<p>Postfix/Prefix-Inkrement- und Postfix/Prefix-Dekrement-Operatoren.</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A++", "#Increment")}}</dt> + <dd>Postfix-Inkrementoperator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A--", "#Decrement")}}</dt> + <dd>Postfix-Dekrementoperator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "++A", "#Increment")}}</dt> + <dd>Prefix-Inkrementoperator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "--A", "#Decrement")}}</dt> + <dd>Prefix-Dekrementoperator.</dd> +</dl> + +<h3 id="Unäre_Operatoren">Unäre Operatoren</h3> + +<p>Ein unärer Operation ist ein Operation mit nur einem Operanden.</p> + +<dl> + <dt>{{jsxref("Operators/delete", "delete")}}</dt> + <dd>Der <code>delete</code>-Operator entfernt eine Eigenschaft eines Objektes.</dd> + <dt>{{jsxref("Operators/void", "void")}}</dt> + <dd>Der <code>void</code>-Operator verwirft den Rückgabewert eines Ausdrucks.</dd> + <dt>{{jsxref("Operators/typeof", "typeof")}}</dt> + <dd>Der <code>typeof</code>-Operator ermittelt den Typ des angegebenen Objekts.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Unary_plus")}}</dt> + <dd>Der unäre Plusoperator wandelt seinen Operand in einen Zahlentyp um.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Unary_negation")}}</dt> + <dd>Der unäre Negationsoperator wandelt seinen Operand in einen Zahlentyp um und negiert ihn.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "~", "#Bitwise_NOT")}}</dt> + <dd>Bitweiser NICHT-Operator.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "!", "#Logical_NOT")}}</dt> + <dd>Logischer NICHT-Operator.</dd> +</dl> + +<h3 id="Arithmetische_Operatoren">Arithmetische Operatoren</h3> + +<p>Arithmetische Operatoren nehmen numerische Werte (entweder Literale oder Variablen) als ihre Operanden und geben genau einen numerischen Wert zurück.</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Addition")}}</dt> + <dd>Additionsoperator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Subtraction")}}</dt> + <dd>Subtraktionsoperator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "/", "#Division")}}</dt> + <dd>Divisionsoperator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "*", "#Multiplication")}}</dt> + <dd>Multiplikationsoperator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "%", "#Remainder")}}</dt> + <dd>Restoperator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "**", "#Exponentiation")}}</dt> + <dd>Potenzierungsoperator.</dd> +</dl> + +<h3 id="Vergleichsoperatoren">Vergleichsoperatoren</h3> + +<p>Ein Vergleichsoperator vergleicht seine Operanden und gibt einen <code>Booleschen</code> Wert zurück, basierend dem Ergebnis des Vergleiches.</p> + +<dl> + <dt>{{jsxref("Operators/in", "in")}}</dt> + <dd>Der <code>in</code>-Operator ermittelt ob ein Objekt die gegebene Objektvariable enthält.</dd> + <dt>{{jsxref("Operators/instanceof", "instanceof")}}</dt> + <dd>Der <code>instanceof-</code>Operator ermittelt ob ein Objekt eine Instanz eines anderen Objekts ist.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<", "#Less_than_operator")}}</dt> + <dd>Kleiner-als-Operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">", "#Greater_than_operator")}}</dt> + <dd>Größer-als-Operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<=", "#Less_than_or_equal_operator")}}</dt> + <dd>"Kleiner als oder gleich" - Operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">=", "#Greater_than_or_equal_operator")}}</dt> + <dd>"Größer als oder gleich" - Operator.</dd> +</dl> + +<div class="note"> +<p><strong>Hinweis: =></strong> is kein Operator, aber die Notation für <a href="/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Pfeilfunktionen</a>.</p> +</div> + +<h3 id="Gleichheitsoperatoren">Gleichheitsoperatoren</h3> + +<p>Das Ergebnis der Auswertung eines Gleichheitoperators ist immer vom Typ <code>Boolean</code>, <span style="line-height: 1.5;"> basierend auf dem Ergebnis des Vergleiches</span><span style="line-height: 1.5;">.</span></p> + +<dl> + <dt>{{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}</dt> + <dd>Gleichheitsoperator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!=", "#Inequality")}}</dt> + <dd>Ungleichheitsoperator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}</dt> + <dd>Identitätsoperator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!==", "#Nonidentity")}}</dt> + <dd>"Nicht Identitäts"-Operator.</dd> +</dl> + +<h3 id="Bitweise-Verschieben-Operatoren">Bitweise-Verschieben-Operatoren</h3> + +<p>Operationen, die alle Bits eines Operanden verschieben.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "<<", "#Left_shift")}}</dt> + <dd>Operator für bitweises Verschieben nach links.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>", "#Right_shift")}}</dt> + <dd>Operator für bitweises Verschieben nach rechts.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>>", "#Unsigned_right_shift")}}</dt> + <dd>Operator für vorzeichenloses bitweises Verschieben nach rechts.</dd> +</dl> + +<h3 id="Binäre_bitweise_Operatoren">Binäre bitweise Operatoren</h3> + +<p>Bitweise Operatoren behandeln ihre Operanden als eine Menge von 32 Bits und geben einen in JavaScript üblichen numerischen Werte zurück.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "&", "#Bitwise_AND")}}</dt> + <dd>Bitweises UND.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "|", "#Bitwise_OR")}}</dt> + <dd>Bitweises ODER.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "^", "#Bitwise_XOR")}}</dt> + <dd>Bitweises XOR.</dd> +</dl> + +<h3 id="Binäre_logische_Operatoren">Binäre logische Operatoren</h3> + +<p>Logische Operatoren werden normalerweise mit Booleschen (logischen) Werten benutzt und sie liefern dann einen Booleschen Wert zurück.</p> + +<dl> + <dt>{{jsxref("Operators/Logical_Operators", "&&", "#Logical_AND")}}</dt> + <dd>Logisches UND.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "||", "#Logical_OR")}}</dt> + <dd>Logisches ODER.</dd> +</dl> + +<h3 id="Bedingter_(ternärer)_Operator">Bedingter (ternärer) Operator</h3> + +<dl> + <dt>{{jsxref("Operators/Conditional_Operator", "(Bedingung ? wennTrue : wennFalse)")}}</dt> + <dd> + <p>Der bedingte Operator liefert einen von zwei Werten zurück, in Abhängigkeit des logischen Wertes der Bedingung.</p> + </dd> +</dl> + +<h3 id="Zuweisungsoperator">Zuweisungsoperator</h3> + +<p>Der Zuweisungsoperator weist seinem linken Operand einen Wert zu, in Abhängigkeit des Wertes seines rechten Operanden.</p> + +<dl> + <dt>{{jsxref("Operators/Assignment_Operators", "=", "#Assignment")}}</dt> + <dd>Zuweisungsoperator.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "*=", "#Multiplication_assignment")}}</dt> + <dd>Multiplikationszuweisung.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "/=", "#Division_assignment")}}</dt> + <dd>Teilungszuweisung.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "%=", "#Remainder_assignment")}}</dt> + <dd>Restzuweisung.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "+=", "#Addition_assignment")}}</dt> + <dd>Additionszuweisung.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "-=", "#Subtraction_assignment")}}</dt> + <dd>Subtraktionszuweisung.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "<<=", "#Left_shift_assignment")}}</dt> + <dd>Links-verschieben-Zuweisung.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>=", "#Right_shift_assignment")}}</dt> + <dd>Rechts-verschieben-Zuweisung.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>>=", "#Unsigned_right_shift_assignment")}}</dt> + <dd>Vorzeichenlose (unsigned) Rechts-verschieben-Zuweisung.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "&=", "#Bitwise_AND_assignment")}}</dt> + <dd>Bitweise UND-Zuweisung.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}</dt> + <dd>Bitweise ENTWEDER-ODER-Zuweisung.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}</dt> + <dd>Bitweise ODER-Zuweisung.</dd> + <dt>{{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br> + {{jsxref("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt> + <dd> + <p>Destrukturierende Zuweisung ermöglicht das Zuweisen von Daten aus Arrays oder Objekten an Variablen, mit einer ähnlichen Syntax wie bei Array- oder Objekt-Literalen.</p> + </dd> +</dl> + +<h3 id="Kommaoperator">Kommaoperator</h3> + +<dl> + <dt>{{jsxref("Operators/Comma_Operator", ",")}}</dt> +</dl> + +<p>Der Kommaoperator erlaubt es mehrere Ausdrücke innerhalb eines einzigen Ausdrucks zu evaluieren und liefert das Ergebnis des letzten Ausdrucks.</p> + +<h3 id="Nicht_standardisierte_Funktionen">Nicht standardisierte Funktionen</h3> + +<dl> + <dt>{{non-standard_inline}} {{jsxref("Operators/Legacy_generator_function", "Legacy generator function", "", 1)}}</dt> + <dd>Das <code>function</code> 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.</dd> + <dt>{{non-standard_inline}} {{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}}</dt> + <dd>Die Ausdrucks Closure Syntax ist eine Kurzform für eine einfache Funktion.</dd> + <dt>{{non-standard_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}</dt> + <dd>Array Comprehensions.</dd> + <dt>{{non-standard_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}</dt> + <dd>Generator Comprehensions.</dd> +</dl> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Neu: Spread Syntax, Rest Syntax, destrukturierte Zuweisungen, <code>super</code> Schlüsselwort.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.operators")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operator Priorität</a></li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Der Inkrement-Operator (++) inkrementiert einen Operanden, addiert also eins hinzu und gibt einen Wert zurück.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-increment.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var>++ or ++<var>x</var> +</pre> + +<h2 id="Description">Description</h2> + +<p>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.</p> + +<p>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.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Postfix_increment">Postfix increment</h3> + +<pre class="brush: js notranslate">let x = 3; +y = x++; + +// y = 3 +// x = 4 +</pre> + +<h3 id="Prefix_increment">Prefix increment</h3> + +<pre class="brush: js notranslate">let a = 2; +b = ++a; + +// a = 3 +// b = 3 +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-postfix-increment-operator', 'Increment operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.operators.increment")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition">Addition operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Division">Division operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder">Remainder operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Decrement">Decrement operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Der <strong><code>instanceof</code> Operator</strong> prüft, ob ein Objekt die prototype Eigenschaft einer Konstruktorfunktion in seiner Prototypenkette besitzt.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-instanceof.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>object</em> instanceof <em>constructor</em></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>object</code></dt> + <dd>Das zu prüfende Objekt.</dd> +</dl> + +<dl> + <dt><code>constructor</code></dt> + <dd>Gegen die zu testende Funktion.</dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Der <code>instanceof</code> Operator prüft die Anwesenheit des <code>constructor.prototype</code> in der Prototypenkette eines Objekts.</p> + +<pre class="brush: js">// 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 +</pre> + +<p>Zu beachten ist, dass sich das Ergebnis des <code>instanceof</code> Tests ändern kann, wenn die <code>prototype</code> Eigenschaft eines Konstruktors geändert wird und auch, wenn ein Objektprototyp mit <code>Object.setPrototypeOf</code> geändert wird. Es ist auch möglich die nicht standardisierte Pseudoeigenschaft <code>__proto__</code> zu nutzen.</p> + +<h3 id="instanceof_und_verschiedene_Kontexte_(z._B._Frames_oder_Windows)"><code>instanceof</code> und verschiedene Kontexte (z. B. Frames oder Windows)</h3> + +<p>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 <code>[] instanceof window.frames[0].Array</code> <code>false</code> zurück, weil <code>Array.prototype !== </code><code>window.frames[0].Array</code> ist und Arrays vom Ersteren erben.</p> + +<p>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 <code>Array.isArray(myObj)</code> benutzt.</p> + +<p>Zur Prüfung ob ein <a href="/de/docs/Web/API/Node">Node</a> ein SVGElement ist kann <code>myNode instanceof myNode.ownerDocument.defaultView.SVGElement</code> genutzt werden.</p> + +<div class="note"><strong>Hinweis for Mozilla Entwickler:</strong><br> +In Code mit XPCOM, hat <code>instanceof</code> einen speziellen Effekt: <code>obj instanceof </code><em><code>xpcomInterface</code></em> (z. B. <code>Components.interfaces.nsIFile</code>) ruft <code>obj.QueryInterface(<em>xpcomInterface</em>)</code> auf und gibt <code>true</code> zurück, wenn QueryInterface erfolgreich war. Ein Seiteneffekt ist, dass Eigenschaften von <em><code>xpcomInterface</code></em> auf <code>obj</code> aufgerufen werden können, wenn erfolgreich mit <code>instanceof</code> getestet wurde. Im Gegensatz zu JavaScripts Standardobjekten, funktioniert <code>obj instanceof xpcomInterface</code> wie erwartet, auch wenn <code>obj</code> aus ein anderen Scope stammt.</div> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Demonstration_dass_String_und_Date_vom_Typ_Object_sind_und_Ausnahmefälle">Demonstration, dass <code>String</code> und <code>Date</code> vom Typ <code>Object</code> sind und Ausnahmefälle</h3> + +<p>Der folgende Quelltext nutzt <code>instanceof</code>, um zu demonstrieren, dass <code>String</code> und <code>Date</code> Objekte von Typ <code>Object</code> sind (sie sind von <code>Object</code> abgeleitet).</p> + +<p>Immer, wenn ein Objekt durch die Objekt Literal Notation erstellt wird, ist das eine Ausnahme: Auch wenn der Prototype <code>undefined</code> ist, ergibt <code>instanceof Object</code> <code>true</code>.</p> + +<pre class="brush: js">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 +</pre> + +<h3 id="Demonstration_dass_mycar_vom_Typ_Car_und_vom_Typ_Object_ist">Demonstration, dass <code>mycar</code> vom Typ <code>Car</code> und vom Typ<code> Object</code> ist</h3> + +<p>Der folgende Quelltext erstellt ein Objekttyp <code>Car</code> und einen Instanz dieses Typen, <code>mycar</code>. Der <code>instanceof</code> Operator demonstriert, dass das <code>mycar</code> Objekt vom Typ <code>Car</code> und <code>Object</code> ist.</p> + +<pre class="brush: js">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 +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.8.6', 'The instanceof operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.8.6', 'The instanceof operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.4.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.operators.instanceof")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("operators/typeof","typeof")}}</li> + <li>{{jsxref("Symbol.hasInstance")}}</li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Logische Operatoren werden typischerweise im Zusammenhang mit {{jsxref("Boolean")}} (logischen) Werten verwendet. Die Operatoren <code>&&</code> (Logisches UND) und <code>||</code> (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.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-logicaloperator.html")}}</div> + + + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>In der folgenden Tabelle werden die logischen Operatoren erläutert.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Operator</th> + <th>Verwendung</th> + <th>Beschreibung</th> + </tr> + <tr> + <td>Logisches UND (<code>&&</code>)</td> + <td><code><em>ausdruck1</em> && <em>ausdruck2</em></code></td> + <td>Gibt <code>ausdruck1</code> zurück, wenn er zu <code>false</code> konvertiert werden kann; anderfalls wird <code>ausdruck2</code> zurückgegeben. Sind beide Operanden <code>true</code>, gibt <code>&&</code> <code>true</code> zurück, Andernfalls <code>false</code>.</td> + </tr> + <tr> + <td>Logisches ODER (<code>||</code>)</td> + <td><code><em>ausdruck1</em> || <em>ausdruck2</em></code></td> + <td>Gibt <code>ausdruck1</code> zurück, wenn er zu <code>true</code> konvertiert werden kann; andernfalls wird <code>ausdruck2</code> zurückgegeben. Ist einer der Operanden <code>true</code>, gibt <code>||</code> <code>true</code> zurück.</td> + </tr> + <tr> + <td>Logisches NICHT (<code>!</code>)</td> + <td><code>!<em>ausdruck</em></code></td> + <td>Gibt <code>false</code> zurück, wenn der Operand zu <code>true</code> konvertiert werden kann. Andernfalls wird <code>true</code> zurückgegeben.</td> + </tr> + </tbody> +</table> + +<p>Wenn ein Wert zu <code>true</code> konvertiert werden kann, wird er {{Glossary("truthy")}} genannt. Wenn ein Wert zu <code>false</code> konvertiert werden kann, wird er {{Glossary("falsy")}} genannt.</p> + +<p>Beispiele für Ausdrücke, die zu <code>false</code> konvertiert werden können:</p> + +<ul> + <li><code>null</code></li> + <li>NaN</li> + <li><code>0</code></li> + <li>leerer String (<code>""</code> oder <code>''</code>)</li> + <li><code>undefined</code></li> +</ul> + +<p>Auch wenn die Operatoren <code>&&</code> und <code>||</code> 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.</p> + +<h3 id="Kurschlussauswertung_(Short-Circuit_Evaluation)">Kurschlussauswertung (Short-Circuit Evaluation)</h3> + +<p>Logische Ausdrücke werden von links nach rechts ausgewertet und hierbei wird anhand der folgenden Regeln getestet, ob Kurzschlussauswertungen möglich sind:</p> + +<ul> + <li><code>false && (<em>irgendwas)</em></code> wird kurzerhand zu false.</li> + <li><code>true || (<em>irgendwas)</em></code> wird kurzerhand zu true.</li> +</ul> + +<p>Die Regeln der Logik garantieren, dass diese Auswertungen immer korrekt sind. Zu beachten ist, dass der <em><code>irgendwas</code></em> Teil nicht ausgewertet wird, so dass keine Seiteneffekte die von diesem Teil ausgehen ausgeführt werden. Zu beachten ist zudem, dass der <em><code>irgendwas</code></em> Teil ein einzelner Ausdruck ist (wie die Klammern anzeigen).</p> + +<p>Beispielhaft betrachten wir die folgenden äquivalenten Funktionen:</p> + +<pre class="brush: js">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(); + } +} +</pre> + +<p>Die folgenden Ausdrücke sind aufgrund der <a href="/de/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operatorrangfolgen</a> nicht äquivalent und betont, wie wichtig es ist, dass der rechte Operand ein einzelner Ausdruck ist (gruppiert, falls in Klammern erforderlich).</p> + +<pre class="brush: js">false && true || true // wird zu true +false && (true || true) // wird zu false</pre> + +<h3 id="Logisches_UND_()"><a id="Logical_AND" name="Logical_AND">Logisches UND (<code>&&</code>)</a></h3> + +<p>Im Folgenden sind Beispiele des <code>&&</code> (logisches UND) Operators zu sehen.</p> + +<pre class="brush: js">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 +</pre> + +<h3 id="Logisches_ODER_()"><a name="Logical_OR">Logisches ODER (<code>||</code>)</a></h3> + +<p>Im Folgenden sind Beispiele des <code>||</code> (logisches ODER) Operators zu sehen.</p> + +<pre class="brush: js">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 "" +</pre> + +<h3 id="Logisches_NICHT_(!)"><a name="Logical_NOT">Logisches NICHT (<code>!</code>)</a></h3> + +<p>Im Folgenden sind Beispiele des <code>!</code> (logisches NICHT) Operators zu sehen.</p> + +<pre class="brush: js">n1 = !true // !t wird zu false +n2 = !false // !f wird zu true +n3 = !"Cat" // !t wird zu false +</pre> + +<h3 id="Konvertierungsregeln">Konvertierungsregeln</h3> + +<h4 id="Konvertierung_von_UND_zu_ODER">Konvertierung von UND zu ODER</h4> + +<p>Die folgende Operation nutzt Booleane:</p> + +<pre class="brush: js">bCondition1 && bCondition2</pre> + +<p>ist äquivalent zum folgenden Ausdruck:</p> + +<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre> + +<h4 id="Konvertierung_von_ODER_zu_UND">Konvertierung von ODER zu UND</h4> + +<p>Die folgende Operation nutzt Booleane:</p> + +<pre class="brush: js">bCondition1 || bCondition2</pre> + +<p>ist äquivalent zu folgendem Ausdruck:</p> + +<pre class="brush: js">!(!bCondition1 && !bCondition2)</pre> + +<h4 id="Negierung_des_logischen_NICHT">Negierung des logischen NICHT</h4> + +<p>Die folgende Operation nutzt Booleane:</p> + +<pre class="brush: js">!!bCondition</pre> + +<p>ist äquivalent mit:</p> + +<pre class="brush: js">bCondition</pre> + +<h3 id="Klammern_in_logischen_Ausdrücken_auflösen">Klammern in logischen Ausdrücken auflösen</h3> + +<p>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.</p> + +<h4 id="Geschachteltes_AND_entfernen">Geschachteltes AND entfernen</h4> + +<p>Die folgende Operation nutzt Booleane:</p> + +<pre class="brush: js">bCondition1 || (bCondition2 && bCondition3)</pre> + +<p>ist äquivalent mit:</p> + +<pre class="brush: js">bCondition1 || bCondition2 && bCondition3</pre> + +<h4 id="Geschachteltes_OR_entfernen">Geschachteltes OR entfernen</h4> + +<p>Die folgende Operation nutzt Booleane:</p> + +<pre class="brush: js">bCondition1 && (bCondition2 || bCondition3)</pre> + +<p>ist äquivalent mit:</p> + +<pre class="brush: js">!(!bCondition1 || !bCondition2 && !bCondition3)</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.11')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definiert in mehreren Kapiteln der Spezifikation: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Binary Logical Operators</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definiert in mehreren Kapiteln der Spezifikation: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">Binary Logical Operators</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Definiert in mehreren Kapiteln der Spezifikation: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Binary Logical Operators</a></td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.operators.logical")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Operators/Bitwise_Operators", "Bitweise Operatoren")}}</li> + <li>{{jsxref("Boolean")}}</li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>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.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-remainder.html")}}</div> + +<div></div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>var1</var> % <var>var2</var> +</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Remainder_with_positive_dividend">Remainder with positive dividend</h3> + +<pre class="brush: js notranslate"> 12 % 5 // 2 + 1 % -2 // 1 + 1 % 2 // 1 + 2 % 3 // 2 +5.5 % 2 // 1.5 +</pre> + +<h3 id="Remainder_with_negative_dividend">Remainder with negative dividend</h3> + +<pre class="brush: js notranslate">-12 % 5 // -2 +-1 % 2 // -1 +-4 % 2 // -0</pre> + +<h3 id="Remainder_with_NaN">Remainder with NaN</h3> + +<pre class="brush: js notranslate">NaN % 2 // NaN</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Remainder operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.operators.remainder")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition">Addition operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Division">Division operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment">Increment operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Decrement">Decrement operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li> +</ul> 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 +--- +<div>{{JSSidebar("Operators")}}</div> + +<p>Die <strong><code>new.target</code></strong> Eigenschaft lässt erkennen, ob eine Funktion oder ein Konstruktor mit dem <a href="/de/docs/Web/JavaScript/Reference/Operators/new">new</a> Operator aufgerufen wurde. In Konstruktoren und Funktionen die mit dem <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a> Operator instanziiert wurde, gibt <code>new.target</code> eine Referenz zu dem Konstruktor oder der Funktion zurück. In normalen Funktionsaufrufen hat <code>new.target</code> den Wert {{jsxref("undefined")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-newtarget.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">new.target</pre> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Die <code>new.target</code> Syntax besteht aus dem Schlüsselwort <code>"new"</code>, einem Punkt und dem Eigenschaftnamen <code>"target"</code>. Normalerweise steht <code>"new."</code> für einen Eigenschaftszugriff, jedoch ist <code>"new."</code> kein Objekt. In Konstruktoraufrufen referenziert <code>new.target</code> auf den Konstruktor, der mit <code>new</code> aufgerufen wurde und somit bekommt <code>"new."</code> einen virtuellen Kontext.</p> + +<p>Die <code>new.target</code> Eigenschaft ist eine Metaeigenschaft, die in allen Funktionen erreichbar ist. In <a href="/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Pfeilfunktionen</a> referenziert <code>new.target</code> zum <code>new.target</code> der umschließenden Funktion.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="new.target_in_Funktionsaufrufen"><code>new.target</code> in Funktionsaufrufen</h3> + +<p>In normalen Funktionsaufrufen (im Gegensatz zu Konstruktorfunktionsaufrufen) ist <code>new.target</code> {{jsxref("undefined")}}. Damit lässt sich herausfinden, ob eine Funktion mit <a href="/de/docs/Web/JavaScript/Reference/Operators/new">new</a> als Konstruktor aufgerufen wurde.</p> + +<pre class="brush: js">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" +</pre> + +<h3 id="new.target_in_Konstruktoren"><code>new.target</code> in Konstruktoren</h3> + +<p>In Klassenkonstruktoren referenziert <code>new.target</code> den Konstruktor, der direkt mit <code>new</code> aufgerufen wurde. Das ist auch der Fall, wenn der Konstruktor in einer Elternklasse ist und vom Kinderkonstruktor weiter delegiert wurde.</p> + +<pre class="brush: js">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();}}</pre> + +<p class="summary">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.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.operators.new_target")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/JavaScript/Reference/Functions">Funktionen</a></li> + <li><a href="/de/docs/Web/JavaScript/Reference/Classes">Klassen</a></li> + <li><code><a href="/de/docs/Web/JavaScript/Reference/Operators/new">new</a></code></li> + <li><code><a href="/de/docs/Web/JavaScript/Reference/Operators/this">this</a></code></li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Der<strong> <code>new</code> Operator</strong> erzeugt eine Instanz eines benutzerdefinierten Objekttyps oder eines Standardtyps, welcher eine Konstruktorfunktion besitzt.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">new <em>constructor</em>[([<em>arguments</em>])]</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>constructor</code></dt> + <dd>Eine Funktion, welche den Typ der Objektinstanz spezifiziert.</dd> +</dl> + +<dl> + <dt><code>arguments</code></dt> + <dd>Eine Liste von Werten, die dem <code>constructor</code> übergeben wird.</dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Das erstellen eines benutzerdefinierten Objektes benötigt zwei Schritte:</p> + +<ol> + <li>Definieren eines Objekttypen indem eine Funktion geschrieben wird.</li> + <li>Erstellen einer Instanz des Objektes mit <code>new</code>.</li> +</ol> + +<p>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.</p> + +<p>Wenn der Code <code>new <em>Foo</em>(...)</code> ausgeführt wird, passieren folgende Dinge:</p> + +<ol> + <li>Ein neues Objekt wird erstellt, welches von <code><em>Foo</em>.prototype</code> erbt.</li> + <li>Die Konstruktorfunktion <code>F<em>oo</em></code> wird mit den spezifizierten Argumenten aufgerufen und <code><a href="/de/docs/Web/JavaScript/Reference/Operators/this">this</a></code> wird an das neu erstellte Objekt gebunden. <code>new F<em>oo</em></code> ist gleichbedeutend mit <code>new F<em>oo()</em></code>, d. h. wenn keine Argumentenliste spezifiziert ist, wird <code>F<em>oo</em></code> ohne Argumente aufgerufen.</li> + <li>Das Objekt, welches von der Konstruktorfunktion zurückgegeben wird, ist das Resultat des ganzen <code>new</code> 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.)</li> +</ol> + +<p>Man kann immer eine Eigenschaft zu dem vorher erstellten Objekt hinzufügen. Zum Beispiel fügt das Statement <code>auto1.farbe = "schwarz"</code> die Eigenschaft <code>farbe</code> zu <code>auto1</code> hinzu und weist dieser den Wert <code>"schwarz"</code> zu. Jedoch hat das keinen Effekt auf andere Objekte. Um die Eigenschaft zu allen Objekten des selben Typs hinzuzufügen, muss die Eigenschaft dem <code>Auto</code> Objekttypen hinzugefügt werden.</p> + +<p>Man kann eine geteilte Eigenschaft zum vorher definierten Objekttypen hinzufügen, indem die <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">Function.prototype</a></code> 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 <code>farbe</code> Eigenschaft mit dem Wert <code>"originale Farbe"</code> zu allen Objekten des Typs <code>Auto</code> hinzu und überschreibt diesen Wert mit dem String <code>"schwarz"</code> nur in dem Instanzobjekt <code>auto1</code>. Für weitere Informationen siehe <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">Prototype</a>.</p> + +<pre class="brush: js">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 +</pre> + +<div class="note"> +<p>Wenn man den <code>new</code> Operator nicht benutzt, <strong>wird die Konstruktorfunktion wie eine normale Funktion ausgeführt,</strong> <em>ohne ein Objekt zu erstellen</em>. In diesem Fall ist der Wert von <code>this</code> ebenfalls anders.</p> +</div> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Objekttyp_und_Objektinstanz">Objekttyp und Objektinstanz</h3> + +<p>Angenommen man möchte ein Objekttypen für Autos erstellen, man möchte den Objekttypen <code>Auto</code> 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:</p> + +<pre class="brush: js">function Auto(marke, modell, jahr) { + this.marke = marke; + this.modell = modell; + this.jahr = jahr; +} +</pre> + +<p>Nun kann man ein Objekt mit dem Namen <code>meinAuto</code> wie folgt erstellen:</p> + +<pre class="brush: js">var meinAuto = new Auto("Eagle", "Talon TSi", 1993); +</pre> + +<p>Dieses Statement erstellt <code>meinAuto</code> und wiest die spezifizierten Werte den Eigenschaften zu. Dann ist der Wert von <code>meinAuto.marke</code> der String "Eagle", von <code>meinAuto.jahr</code> die Zahl 1993 und so weiter.</p> + +<p>Man kann beliebig viele Objekte von <code>Auto</code> mit <code>new</code> erstellen. Zum Beispiel:</p> + +<pre class="brush: js">var kensAuto = new Auto("Nissan", "300ZX", 1992); +</pre> + +<h3 id="Objekteigenschaft_die_selber_ein_Objket">Objekteigenschaft, die selber ein Objket</h3> + +<p>Angenommen man Definiert ein Objekt mit dem Namen <code>Person</code> wie folgt:</p> + +<pre class="brush: js">function Person(name, alter, geschlecht) { + this.name = name; + this.alter = alter; + this.geschlecht = geschlecht; +} +</pre> + +<p>Dann instantiiert man zwei neue <code>Person</code> Objekte wie folgt:</p> + +<pre class="brush: js">var rand = new Person("Rand McNally", 33, "M"); +var ken = new Person("Ken Jones", 39, "M"); +</pre> + +<p>Dann erneuert man die Definition von <code>Auto</code> um eine <code>besitzer</code> Eigenschaft , die ein <code>Person</code> Objekt ist, wie folgt:</p> + +<pre class="brush: js">function Auto(marke, modell, jahr, <code>besitzer</code>) { + this.marke = marke; + this.modell = modell; + this.jahr = jahr; + this.<code>besitzer = besitzer;</code> +} +</pre> + +<p>Um das neue Objekt zu instantiiert benutzt man dann folgendes:</p> + +<pre class="brush: js">var auto1 = new Auto("Eagle", "Talon TSi", 1993, rand); +var auto2 = new Auto("Nissan", "300ZX", 1992, ken); +</pre> + +<p>Statt ein Stringliteral oder einen Zahlenwert beim erstellen zu benutzen, übergibt das obere Beispiel die Objekte <code>rand</code> und <code>ken</code> als Parameter für den Besitzer. Um den Namen des Besitzers von <code>auto2</code> zu erfahren, muss man die Eigenschaft wie folgt abfragen:</p> + +<pre class="brush: js">auto2.besitzer.name +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-new-operator', 'The new Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-new-operator', 'The new Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.2.2', 'The new Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.2.2', 'The new Operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.2.2', 'The new Operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.operators.new")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Reflect.construct()")}}</li> +</ul> 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 +--- +<div>{{JsSidebar("Operators")}}</div> + +<p>Objekte können mit <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object">new Object()</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a>, oder mit der <em>literal</em> Notation (<em>Initialisierungs</em> 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 (<code>{}</code>).</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-objectinitializer.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="brush: js">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 = { + <var>property: function </var>([<var>parameters</var>]) {}, + get <var>property</var>() {}, + set <var>property</var>(<var>value</var>) {}, +}; +</pre> + +<h3 id="Neue_Schreibweisen_in_ECMAScript_2015">Neue Schreibweisen in ECMAScript 2015</h3> + +<p>Man sollte in der Kompatibilitätstabelle die Unterstützung dieser Schreibweisen nachschlagen. In Umgebungen, die diese nicht unterstützen, entstehen Syntaxfehler.</p> + +<pre class="brush: js">// Kurzschreibweisen für Eigenschaftsnamen (ES2015) +var a = "foo", b = 42, c = {}; +var o = { a, b, c }; + +// Kurzschreibweise Methoden Namen (ES2015) +var o = { + <var>property</var>([<var>parameters</var>]) {} +}; + +// Berechnete Eigenschaftsnamen (ES2015) +var prop = "foo"; +var o = { + [prop]: "hey", + ["b" + "ar"]: "there", +};</pre> + +<h2 id="Description" name="Description">Beschreibung</h2> + +<p>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.</p> + +<h3 id="Objekte_erzeugen">Objekte erzeugen</h3> + +<p>Ein leeres Objekt ohne Eigenschaften kann wie folgt erzeugt werden:</p> + +<pre class="brush: js">var object = {};</pre> + +<p>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 <code>"foo"</code>, <code>"age"</code> und <code>"baz"</code>. <span id="result_box" lang="de"><span class="hps">Die Werte dieser</span> <span class="hps">Schlüssel</span> <span class="hps">sind: die Zeichenkette</span> <code><span class="hps">"bar"</span></code><span>,</span> <span class="hps">die Zahl</span> <code><span class="hps">42</span></code> <span class="hps">und die dritte</span> <span class="hps">Eigenschaft hat</span> <span class="hps">ein anderes Objekt</span> <span class="hps">als Wert.</span></span></p> + +<pre class="brush: js">var object = { + foo: "bar", + age: 42, + baz: { myProp: 12 }, +}</pre> + +<h3 id="Auf_Eigenschaften_zugreifen">Auf Eigenschaften zugreifen</h3> + +<p>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 <a href="/de/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Eigenschaftszugriffe</a> für weiter Informationen.</p> + +<pre class="brush: js">object.foo; // "bar" +object["age"]; // 42 + +object.foo = "baz"; +</pre> + +<h3 id="Eigenschaften_definieren">Eigenschaften definieren</h3> + +<p><span id="result_box" lang="de"><span class="hps">Wir haben bereits</span> <span class="hps">gelernt, wie man</span> <span class="hps">Eigenschaften mit Hilfe der</span> <span class="hps">Initialisierungs</span> <span class="hps">Syntax</span> <span class="hps">schreibt</span><span>.</span> <span class="hps">Oft</span> <span class="hps">gibt es Variablen</span> <span class="hps">im </span><span class="hps">Code, die</span> <span class="hps">Sie in einem Objekt verwenden möchten</span><span>.</span> Man sieht oft Quellcode wie den folgenden: </span></p> + +<pre class="brush: js">var a = "foo", + b = 42, + c = {}; + +var o = { + a: a, + b: b, + c: c +};</pre> + +<p><span id="result_box" lang="de"><span class="hps">Mit</span> <span class="hps">ECMAScript</span> 2015 ist <span class="hps">eine</span> <span class="hps">kürzere</span> <span class="hps">Schreibweise</span> <span class="hps">verfügbar, um das</span> G<span class="hps">leiche zu erreichen</span><span>:</span></span></p> + +<pre class="brush: js">var a = "foo", + b = 42, + c = {}; + +// Kurzschreibweise für Eigenschaftsnamen in ES2015 +var o = { a, b, c }; + +// In anderen Worten +console.log(); // true</pre> + +<h4 id="Doppelte_Eigenschaftsnamen">Doppelte Eigenschaftsnamen</h4> + +<p><span id="result_box" lang="de"><span class="hps">Bei Verwendung des</span> <span class="hps">gleichen Namens</span> <span class="hps">für Ihre</span> <span class="hps">Eigenschaften</span><span>, wird die</span> <span class="hps">zweite Eigenschaft</span> <span class="hps">die erste</span> <span class="hps">überschreiben.</span></span></p> + +<pre class="brush: js">var a = {x: 1, x: 2}; +console.log(a); // { x: 2} +</pre> + +<p>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.</p> + +<pre class="brush: js">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; + } +}</pre> + +<h3 id="Methoden_Definitionen">Methoden Definitionen</h3> + +<p><span id="result_box" lang="de"><span class="hps">Eine</span> <span class="hps">Eigenschaft eines Objekts</span> <span class="hps">kann auch</span> <span class="hps">auf eine <a href="/de/docs/Web/JavaScript/Reference/Functions">Funktion</a></span> <span class="hps">oder</span> <span class="hps">einen</span> <a href="/de/docs/Web/JavaScript/Reference/Functions/get">Getter</a> <span class="hps">oder</span> <span class="hps"><a href="/de/docs/Web/JavaScript/Reference/Functions/set">Setter</a>-Methode</span> <span class="hps">verweisen</span></span>.</p> + +<pre class="brush: js">var o = { + <var>property: function </var>([<var>parameters</var>]) {}, + get <var>property</var>() {}, + set <var>property</var>(<var>value</var>) {}, +};</pre> + +<p>In ECMAScript 2015 gibt es eine kürzere Schreibweise, mit der das Schlüsselwort "function" überflüssig wird.</p> + +<pre class="brush: js">// Kurzschreibweise für Methoden Namen (ES2015) +var o = { + <var>property</var>([<var>parameters</var>]) {}, + * <var>generator</var>() {} +};</pre> + +<p>In ECMAScript 2015 gibt es eine Möglichkeit Eigenschaften mit einer Generatorfunktion zu definierten:</p> + +<pre class="brush: js">var o = { + *generator() { + ........ + } +};</pre> + +<p>Diese ist gleich zur ES5 ähnlichen Notation (aber ECMAScript 5 hat keine Generatorfunktionen):</p> + +<pre class="brush: js">var o = { + generator = function* () { + ........ + } +}</pre> + +<p>Für weitere Informationen und Beispiele zu Methoden, siehe <a href="/de/docs/Web/JavaScript/Reference/Functions/Method_definitions">Methodendefinitionen</a>.</p> + +<h3 id="Berechnete_Bezeichnernamen">Berechnete Bezeichnernamen</h3> + +<p>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 <a href="/de/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Zugriff auf Objekt Eigenschaften</a> welche Sie bereits benutzt haben. Dieselbe Syntax kann nun für Eigenschaften Bezeichner verwendet werden:</p> + +<pre class="brush: js">// 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 }</pre> + +<h3 id="Spread_Eigenschaften">Spread Eigenschaften</h3> + +<p>Die Vorschlag von <a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Eigenschaft für ECMAScript</a> (Stage 4) fügt <a href="/de/docs/Web/JavaScript/Reference/Operators/Spread_operator">Spread</a> Eigenschaften zu Objektliteralen hinzu. Er kopiert eigene aufzählbare Eigenschaften des genutzten Objektes in ein neues Objekt.</p> + +<p>Oberflächliches Clonen (ausgenommen Eigenschaften) oder Verschmelzen von Objekten ist nun mit einer Kürzeren Syntax als {{jsxref("Object.assign()")}} möglich.</p> + +<pre class="brush: js">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 }</pre> + +<p>Zu beachten ist, dass {{jsxref("Object.assign()")}} <a href="/de/docs/Web/JavaScript/Reference/Functions/set">Setters</a> benutzt, was der Spread Operator nicht macht.</p> + +<h3 id="Prototypmutationen">Prototypmutationen</h3> + +<p>Eine Eigenschaft Definition der Form <code>__proto__: Wert</code> oder <code>"__proto__": Wert</code> erzeugt keine Eigenschaft mit dem Namen <code>__proto__</code>. Wenn der angegebene Wert ein Objekt oder <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code> ist, wird stattdessen der <code>[[Prototyp]]</code> des erzeugten Objektes auf den angegebenen Wert geändert. (Das Objekt wird nicht verändert, falls der Wert kein Objekt oder null ist.)</p> + +<pre class="brush: js">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__")); +</pre> + +<p>Pro Objekt-Literal ist nur eine einzelne Prototypmutation erlaubt: mehrfache Prototyp Mutationen führen zu einem Syntax Fehler.</p> + +<p>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.</p> + +<pre class="brush: js">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); +</pre> + +<h2 id="Objektliteral-Notation_vs_JSON">Objektliteral-Notation vs JSON</h2> + +<p><span id="result_box" lang="de"><span class="hps">Die</span> <span class="hps">Objekt-Literal</span> <span class="hps">Notation ist</span> <span class="hps">nicht dasselbe wie</span> <span class="hps">die</span> <span class="hps">JavaScript Object Notation</span> <span class="atn hps">(</span><span><a href="/de/docs/Glossary/JSON">JSON</a>)</span><span>.</span> <span class="hps">Obwohl</span> <span class="hps">sie ähnlich aussehen</span><span>, gibt es</span> <span class="hps">Unterschiede zwischen ihnen</span></span>:</p> + +<ul> + <li><span id="result_box" lang="de"><span class="hps">JSON</span> <span class="hps">erlaubt</span> <span class="hps">nur</span> <span class="hps">Eigenschaftsdefinition</span>en <span class="hps">mit</span> <code><span class="hps">"Eigenschaft"</span><span>:</span> <span class="hps">Wert</span></code> <span class="hps">Syntax.</span> <span class="hps">Der Eigenschaftsname</span> <span class="hps">muss</span> <span class="hps">in doppelten Anführungszeichen geschrieben werden</span><span>, und die</span> <span class="hps">Definition kann nicht</span> in Kurzschreibweise erfolgen</span>.</li> + <li><span id="result_box" lang="de"><span class="hps">In</span> <span class="hps">JSON</span> <span class="hps">können die Werte</span> <span class="hps">nur</span> <span class="hps">Strings, Zahlen</span><span>, Arrays,</span> <span class="hps"><code>true</code>, <code>false</code></span><span>, <code>null</code></span> <span class="hps">oder andere</span> <span class="atn hps">(</span><span>JSON)</span> <span class="hps">Objekte sein</span></span>.</li> + <li><span id="result_box" lang="de"><span class="hps">Ein</span> <span class="hps">Funktionswert</span> <span class="hps">(siehe</span> <span class="hps">"Methoden"</span> <span class="hps">oben)</span> <span class="hps">kann in JSON keinem Wert zugeordnet werden.</span></span></li> + <li><span id="result_box" lang="de"><span class="hps">Objekte</span> <span class="atn hps">wie {</span><span class="atn">{</span><span>jsxref</span> <span class="atn hps">(</span><span class="atn hps">"Date</span><span>")</span><span>}}</span> <span class="hps">werden</span> </span><span id="result_box" lang="de"><span>nach dem Aufruf von</span> <span class="atn hps">{</span><span class="atn">{</span><span>jsxref</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>JSON.parse</span><span class="hps">()")</span><span>}}</span></span><span id="result_box" lang="de">, in <span class="hps">einen String</span> <span class="hps">umgewandelt</span><span>, </span><span>.</span></span></li> + <li>{{jsxref("JSON.parse()")}} weist berechnete Eigenschaftsnamen zurück und wirft eine Fehlermeldung.</li> +</ul> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td><a href="/de/docs/Web/JavaScript/Reference/Functions/get">Getter</a> und <a href="/de/docs/Web/JavaScript/Reference/Functions/set">Setter</a> hinzugefügt.</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Kurzschreibweise für Methoden-/Eigenschaftsnamen und berechnete Eigenschaftsnamen hinzugefügt.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td><a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript </a></td> + <td>Entwurf</td> + <td>Stage 4 (Fertig).</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.operators.object_initializer")}}</p> +</div> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Eigenschaftszugriffe</a></li> + <li><code><a href="/de/docs/Web/JavaScript/Reference/Functions/get">get</a></code> / <code><a href="/de/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li> + <li><a href="/de/docs/Web/JavaScript/Reference/Functions/Method_definitions">Methodendefinitionen</a></li> + <li><a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar">Lexikalische Grammatik</a></li> +</ul> 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 +--- +<p>{{jsSidebar("Operators")}}</p> + +<p>Die Operatorpriorität bestimmt, in welcher Reihenfolge Operatoren ausgeführt werden. Operatoren, die in der Rangfolge zuerst kommen, werden auch zuerst ausgeführt.</p> + +<p>{{EmbedInteractiveExample("pages/js/expressions-operatorprecedence.html")}}</p> + +<p>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 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> + +<h2 id="Assoziativität">Assoziativität</h2> + +<p>Assoziativität, bestimmt in welcher Reihenfolge Operatoren der selben Rangfolge ausgeführt werden. Betrachten wir als Beispiel den folgenden Ausdruck:</p> + +<pre>a OP b OP c +</pre> + +<p>Linksassoziativ (links nach rechts) bedeutet, dass der Code als <code>(a OP b) OP c</code> ausgeführt wird, während rechtssassoziativ (rechts nach links) heißt, dass der Code wie <code>a OP (b OP c)</code> ausgeführt wird. Zuordnungsoperatoren sind rechtssassoziativ, also kann man schreiben:</p> + +<pre>a = b = 5; +</pre> + +<p>mit dem erwarteten Resultat, dass sowohl <code>a</code> als auch <code>b</code> den Wert 5 haben. Das liegt daran, dass Zuordnungsopertoren den Wert zurükgeben, den sie zuerst zugeordnet haben: Zuerst wird <code>b</code> auf 5 gesetzt; daraufhin wird <code>a</code> auf 5, also den Rückgabewert von <code>b = 5</code>, gesetzt.</p> + +<h2 id="Tabelle">Tabelle</h2> + +<p>Die nachfolgende Tabelle geordnet von der höchsten (20) bis zur kleinsten (1) Priorität.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Priorität</th> + <th>Operator</th> + <th>Assoziativität</th> + <th>Einzelner Operator</th> + </tr> + <tr> + <td>20</td> + <td>{{jsxref("Operators/Grouping", "Gruppieren")}}</td> + <td>n/a</td> + <td><code>( … )</code></td> + </tr> + <tr> + <td colspan="1" rowspan="4">19</td> + <td>{{jsxref("Operators/Property_Accessors", "Eigenschaftszugriff", "#Dot_notation")}}</td> + <td>links nach rechts</td> + <td><code>… . …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/Property_Accessors", "Berechnete Eigenschaften Access","#Bracket_notation")}}</td> + <td>links nach rechts</td> + <td><code>… [ … ]</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/new","new")}} (mit Argumentenliste)</td> + <td>n/a</td> + <td><code>new … ( … )</code></td> + </tr> + <tr> + <td><a href="/de/docs/Web/JavaScript/Guide/Functions" title="JavaScript/Reference/Operators/Special_Operators/function_call">Funktionsaufruf</a></td> + <td>links nach rechts</td> + <td><code>… ( <var>… </var>)</code></td> + </tr> + <tr> + <td>18</td> + <td>{{jsxref("Operators/new","new")}} (ohne Argumentenliste)</td> + <td>rechts nach links</td> + <td><code>new …</code></td> + </tr> + <tr> + <td rowspan="2">17</td> + <td>{{jsxref("Operators/Arithmetic_Operators","Postfix Inkrement","#Increment")}}</td> + <td colspan="1" rowspan="2">n/a</td> + <td><code>… ++</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/Arithmetic_Operators","Postfix Dekrement","#Decrement")}}</td> + <td><code>… --</code></td> + </tr> + <tr> + <td colspan="1" rowspan="10">16</td> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT" title="JavaScript/Reference/Operators/Logical_Operators">Logisches NICHT</a></td> + <td colspan="1" rowspan="10">rechts nach links</td> + <td><code>! …</code></td> + </tr> + <tr> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitweises NICHT</a></td> + <td><code>~ …</code></td> + </tr> + <tr> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus" title="JavaScript/Reference/Operators/Arithmetic_Operators">Unäres Plus</a></td> + <td><code>+ …</code></td> + </tr> + <tr> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation" title="JavaScript/Reference/Operators/Arithmetic_Operators">Unäres Minus</a></td> + <td><code>- …</code></td> + </tr> + <tr> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment" title="JavaScript/Reference/Operators/Arithmetic_Operators">Prefix Inkrement</a></td> + <td><code>++ …</code></td> + </tr> + <tr> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement" title="JavaScript/Reference/Operators/Arithmetic_Operators">Prefix Dekrement</a></td> + <td><code>-- …</code></td> + </tr> + <tr> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/typeof" title="JavaScript/Reference/Operators/Special_Operators/typeof_Operator">typeof</a></td> + <td><code>typeof …</code></td> + </tr> + <tr> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/void" title="JavaScript/Reference/Operators/Special_Operators/void_Operator">void</a></td> + <td><code>void …</code></td> + </tr> + <tr> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/delete" title="JavaScript/Reference/Operators/Special_Operators/delete_Operator">delete</a></td> + <td><code>delete …</code></td> + </tr> + <tr> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/await">await</a></td> + <td><code>await …</code></td> + </tr> + <tr> + <td>15</td> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation" title="JavaScript/Reference/Operators/Arithmetic_Operators">Potenzierung</a></td> + <td>rechts nach links</td> + <td><code>… ** …</code></td> + </tr> + <tr> + <td rowspan="3">14</td> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Multiplication" title="JavaScript/Reference/Operators/Arithmetic_Operators">Multiplikation</a></td> + <td colspan="1" rowspan="3">links nach rechts</td> + <td><code>… * …</code></td> + </tr> + <tr> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Division" title="JavaScript/Reference/Operators/Arithmetic_Operators">Division</a></td> + <td><code>… / …</code></td> + </tr> + <tr> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder" title="JavaScript/Reference/Operators/Arithmetic_Operators">Rest</a></td> + <td><code>… % …</code></td> + </tr> + <tr> + <td rowspan="2">13</td> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition" title="JavaScript/Reference/Operators/Arithmetic_Operators">Addition</a></td> + <td colspan="1" rowspan="2">links nach rechts</td> + <td><code>… + …</code></td> + </tr> + <tr> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Subtraction" title="JavaScript/Reference/Operators/Arithmetic_Operators">Subtraktion</a></td> + <td><code>… - …</code></td> + </tr> + <tr> + <td rowspan="3">12</td> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitweise Linksverschiebung</a></td> + <td colspan="1" rowspan="3">links nach rechts</td> + <td><code>… << …</code></td> + </tr> + <tr> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitweise Rechtsverschiebung</a></td> + <td><code>… >> …</code></td> + </tr> + <tr> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitweise Vorzeichnelose Rechtsverschiebung</a></td> + <td><code>… >>> …</code></td> + </tr> + <tr> + <td rowspan="6">11</td> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Kleiner als</a></td> + <td colspan="1" rowspan="6">links nach rechts</td> + <td><code>… < …</code></td> + </tr> + <tr> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than__or_equal_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Kleiner als oder gleich</a></td> + <td><code>… <= …</code></td> + </tr> + <tr> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Größer als</a></td> + <td><code>… > …</code></td> + </tr> + <tr> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_or_equal_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Größer als oder gleich</a></td> + <td><code>… >= …</code></td> + </tr> + <tr> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/in" title="JavaScript/Reference/Operators/Special_Operators/in_Operator">in</a></td> + <td><code>… in …</code></td> + </tr> + <tr> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/instanceof" title="JavaScript/Reference/Operators/Special_Operators/instanceof_Operator">instanceof</a></td> + <td><code>… instanceof …</code></td> + </tr> + <tr> + <td rowspan="4">10</td> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality" title="JavaScript/Reference/Operators/Comparison_Operators">Gleichheit</a></td> + <td colspan="1" rowspan="4">links nach rechts</td> + <td><code>… == …</code></td> + </tr> + <tr> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Inequality" title="JavaScript/Reference/Operators/Comparison_Operators">Ungleichheit</a></td> + <td><code>… != …</code></td> + </tr> + <tr> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity" title="JavaScript/Reference/Operators/Comparison_Operators">Strikte Gleichheit</a></td> + <td><code>… === …</code></td> + </tr> + <tr> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Nonidentity" title="JavaScript/Reference/Operators/Comparison_Operators">Strikte Ungleichheit</a></td> + <td><code>… !== …</code></td> + </tr> + <tr> + <td>9</td> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_AND" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitweises UND</a></td> + <td>links nach rechts</td> + <td><code>… & …</code></td> + </tr> + <tr> + <td>8</td> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitweises Exklusiv ODER (XOR)</a></td> + <td>links nach rechts</td> + <td><code>… ^ …</code></td> + </tr> + <tr> + <td>7</td> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitweises ODER</a></td> + <td>links nach rechts</td> + <td><code>… | …</code></td> + </tr> + <tr> + <td>6</td> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND" title="JavaScript/Reference/Operators/Logical_Operators">Logisches UND</a></td> + <td>links nach rechts</td> + <td><code>… && …</code></td> + </tr> + <tr> + <td>5</td> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR" title="JavaScript/Reference/Operators/Logical_Operators">Logisches ODER</a></td> + <td>links nach rechts</td> + <td><code>… || …</code></td> + </tr> + <tr> + <td>4</td> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Conditional_Operator" title="JavaScript/Reference/Operators/Special_Operators/Conditional_Operator">Bedingt</a></td> + <td>rechts nach links</td> + <td><code>… ? … : …</code></td> + </tr> + <tr> + <td rowspan="13">3</td> + <td rowspan="13"><a href="/de/docs/Web/JavaScript/Reference/Operators/Assignment_Operators" title="JavaScript/Reference/Operators/Assignment_Operators">Zuweisung</a></td> + <td rowspan="13">rechts nach links</td> + <td><code>… = …</code></td> + </tr> + <tr> + <td><code>… += …</code></td> + </tr> + <tr> + <td><code>… -= …</code></td> + </tr> + <tr> + <td><code>… **= …</code></td> + </tr> + <tr> + <td><code>… *= …</code></td> + </tr> + <tr> + <td><code>… /= …</code></td> + </tr> + <tr> + <td><code>… %= …</code></td> + </tr> + <tr> + <td><code>… <<= …</code></td> + </tr> + <tr> + <td><code>… >>= …</code></td> + </tr> + <tr> + <td><code>… >>>= …</code></td> + </tr> + <tr> + <td><code>… &= …</code></td> + </tr> + <tr> + <td><code>… ^= …</code></td> + </tr> + <tr> + <td><code>… |= …</code></td> + </tr> + <tr> + <td colspan="1" rowspan="2">2</td> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/yield" title="JavaScript/Reference/Operators/yield">yield</a></td> + <td colspan="1" rowspan="2">rechts nach links</td> + <td><code>yield …</code></td> + </tr> + <tr> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/yield*" title="JavaScript/Reference/Operators/yield">yield*</a></td> + <td><code>yield* …</code></td> + </tr> + <tr> + <td>1</td> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Spread_operator" title="JavaScript/Reference/Operators/Spread_operator">Spread</a></td> + <td>n/a</td> + <td><code>...</code> …</td> + </tr> + <tr> + <td>0</td> + <td><a href="/de/docs/Web/JavaScript/Reference/Operators/Comma_Operator" title="JavaScript/Reference/Operators/Comma_Operator">Komma / Sequenz</a></td> + <td>links nach rechts</td> + <td><code>… , …</code></td> + </tr> + </tbody> +</table> 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 +--- +<div>{{JSSidebar("Operators")}}</div> + +<p>{{SeeCompatTable}}</p> + +<p>Der <strong>Optionale-Verkettung</strong>s-Operator (Optional Chaining) <strong><code>?.</code></strong> 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.<span class="seoSummary">Der <code>?.</code> Operator funktioniert ähnlich wie der <code>.</code> -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 <code>undefined</code> zurückgibt.</span> Wird er mit Funktionsaufrufen verwendet, wirft der Aufruf <code>undefined</code> zurück, wenn die Funktion nicht existiert.</p> + +<p>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.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html")}}</div> + +<div></div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>obj</var>?.<var>prop</var> +<var>obj</var>?.[<var>expr</var>] +<em>arr</em>?.[<var>index</var>] +<var>func</var>?.(<var>args</var>) +</pre> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>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 <code>undefined</code> oder <code>null</code> sind.</p> + +<p>Als Beispiel nehmen wir ein Objekt <code>obj</code>, 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:</p> + +<pre class="brush: js">let nestedProp = obj.first && obj.first.second;</pre> + +<p>Der Wert von <code>obj.first</code> wird darauf geprüft nicht-<code>null</code> (und nicht-<code>undefined</code>) zu sein und erst dann greifen wir auf den Wert <code>obj.first.second</code> zu. Dies verhindet einen Fehler der auftreten würde wenn wir direkt <code>obj.first.second</code> ansprechen ohne zuvor <code>obj.first</code> zu prüfen.</p> + +<p>Mit dem Optionale-Verkettungs-Operator (<code>?.</code>) allerdings müssen wir nicht explizit testen und können eine Abkürzung auf Basis des Wertes von <code>obj.first</code> nutzen bevor auf auf <code>obj.first.second</code> zugreifen:</p> + +<pre class="brush: js">let nestedProp = obj.first?.second;</pre> + +<p>Durch die Verwendung des <code>?.</code>-Operators statt nur dem <code>.</code> stellet JavaScript sicher, dass zuvor geprüft wird ob <code>obj.first</code> nicht <code>null</code> oder <code>undefined</code> ist bevor auf <code>obj.first.second</code> zugegriffen wird. Wenn <code>obj.first</code> <code>null</code> oder <code>undefined</code> ist, wird der Ausdruck automatisch sofort beendet und wirft den Wert <code>undefined</code> zurück</p> + +<p>Das ist dasselbe wie folgender Ausdruck:</p> + +<pre class="brush: js">let nestedProp = ((obj.first === null || obj.first === undefined) ? undefined : obj.first.second);</pre> + +<h3 id="Optionale_Verkettung_mit_Funktionsaufrufen">Optionale Verkettung mit Funktionsaufrufen</h3> + +<p>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.</p> + +<p>Verwendet man optionale Verkettung mit Funktionsaufrufen, wird der Ausdruck automatisch <code>undefined</code> zurückwerfen, sollte die Funktion nicht existieren:</p> + +<pre class="brush: js">let result = someInterface.customMethod?.();</pre> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Wenn eine Eigenschaft mit dem Namen existiert, die aber keine Funktion ist, wird <code>?.</code> trotzdem eine {{JSxRef("TypeError")}} Ausnahme auslösen (<code>x.y</code><code> ist keine Funktion</code>).</p> +</div> + +<h4 id="Optionale_Callbacks_oder_Event_Handler_handhaben">Optionale Callbacks oder Event Handler handhaben</h4> + +<p>If you use callbacks or fetch methods from an object with <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring">a destructuring assignment</a>, you may have non-existent values that you cannot call as functions unless you have tested their existence. Using <code>?.</code>, you can avoid this extra test:</p> + +<pre class="brush: js">// 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); + } + } +} +</pre> + +<pre class="brush: js">// 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 + } +} +</pre> + +<h3 id="Optional_chaining_with_expressions">Optional chaining with expressions</h3> + +<p>You can also use the optional chaining operator when accessing properties with an expression using <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Bracket_notation">the bracket notation of the property accessor</a>:</p> + +<pre class="brush: js">let nestedProp = obj?.['prop' + 'Name']; +</pre> + +<h3 id="Array_item_access_with_optional_chaining">Array item access with optional chaining</h3> + +<pre class="brush: js">let arrayItem = arr?.[42];</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Basic_example">Basic example</h3> + +<p>This example looks for the value of the <code>name</code> property for the member <code>bar</code> in a map when there is no such member. The result is therefore <code>undefined</code>.</p> + +<pre class="brush: js">let myMap = new Map(); +myMap.set("foo", {name: "baz", desc: "inga"}); + +let nameBar = myMap.get("bar")?.name;</pre> + +<h3 id="Short-circuiting_evaluation">Short-circuiting evaluation</h3> + +<p>When using optional chaining with expressions, if the left operand is <code>null</code> or <code>undefined</code>, the expression will not be evaluated. For instance:</p> + +<pre class="brush: js">let potentiallyNullObj = null; +let x = 0; +let prop = potentiallyNullObj?.[x++]; + +console.log(x); // 0 as x was not incremented +</pre> + +<h3 id="Stacking_the_optional_chaining_operator">Stacking the optional chaining operator</h3> + +<p>With nested structures, it is possible to use optional chaining multiple times:</p> + +<pre class="brush: js">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?.(); +</pre> + +<h3 id="Combining_with_the_nullish_coalescing_operator">Combining with the nullish coalescing operator</h3> + +<p>The nullish coalescing operator may be used after optional chaining in order to build a default value when none was found:</p> + +<pre class="brush: js">let customer = { + name: "Carl", + details: { age: 82 } +}; +const customerCity = customer?.city ?? "Unknown city"; +console.log(customerCity); // Unknown city</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://tc39.es/proposal-optional-chaining/#top">Proposal for the "optional chaining" operator</a></td> + <td>Stage 4</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.operators.optional_chaining")}}</p> +</div> + +<h3 id="Implementation_Progress">Implementation Progress</h3> + +<p>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 <a href="https://github.com/tc39/test262">Test262</a>, the standard test suite of JavaScript, in the nightly build, or latest release of each browser's JavaScript engine.</p> + +<div>{{EmbedTest262ReportResultsTable("optional-chaining")}}</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The {{JSxRef("Operators/Nullish_Coalescing_Operator", "Nullish Coalescing Operator", '', 1)}}</li> + <li><a href="https://github.com/tc39/proposals">TC39 proposals</a></li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}} {{SeeCompatTable}}</div> + +<p>Der experimentelle Pipline Operator <code>|></code> (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</p> + +<p><code>'%21' |> decodeURI</code> statt <code>decodeURI('%21')</code> zu schreiben.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">expression |> function</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Verkettete_Funktionsaufrufe">Verkettete Funktionsaufrufe</h3> + +<p>Der Pipline Operator kann die Lesbarkeit von verketteten Funktionsaufrufen verbessern.</p> + +<pre class="brush: js">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 +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="http://tc39.github.io/proposal-pipeline-operator/">Pipeline operator draft</a></td> + <td>Stage 1</td> + <td>Kein Teil der ECMAScript Spezifikation.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.operators.pipeline")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="https://github.com/tc39/proposals">TC39 proposals</a></li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Eigenschaftszugriffe erlauben den Zugriff auf Eigenschaften eines Objekts, indem die Punktnotation oder Klammernotation benutzt wird.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-propertyaccessors.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">object.property +object['property'] +</pre> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>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 <a href="/de/docs/Web/JavaScript/Reference/Functions">Funktions</a> Instanz hat.</p> + +<p>Es gibt zwei Wege auf Eigenschaften zuzugreifen: Die Punktnotation und die Klammernotation.</p> + +<h3 id="Punktnotation">Punktnotation</h3> + +<pre class="brush: js">get = object.property; +object.property = set; +</pre> + +<p>In diesem Quelltext muss <code>property</code> ein gültiger Bezeichner ein, d. h. eine Sequenz von alphanumerischen Zeichen inklusive Unterstrich (<code>_</code>) und Dollarzeichen (<code>$</code>) die nicht mit einer Nummer beginnen können. Zum Beispiel ist <code>object.$1</code> gültig währenddem <code>object.1</code> nicht gültig ist.</p> + +<pre class="brush: js">document.createElement('pre'); +</pre> + +<p>Hier wird die Methode namens "createElement" von <code>document</code> erfragt und aufgerufen.</p> + +<p>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.</p> + +<pre class="brush: js">77 .toExponential(); +// oder +77 +.toExponential(); +// oder +(77).toExponential(); +// oder +77..toExponential(); +// oder +77.0.toExponential(); +// weil 77. === 77.0, keine Zweideutigkeit</pre> + +<h3 id="Klammernotation">Klammernotation</h3> + +<pre class="brush: js">get = object[property_name]; +object[property_name] = set; +</pre> + +<p><code>property_name</code> 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).</p> + +<pre class="brush: js">document['createElement']('pre'); +</pre> + +<p>Dieses macht genau dasselbe wie das vorherige Beispiel.</p> + +<p>Ein Leerzeichen vor der Klammernotation ist erlaubt.</p> + +<pre class="brush: js">document ['createElement']('pre');</pre> + +<h3 id="Eigenschaftensnamen">Eigenschaftensnamen</h3> + +<p>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 <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/toString">toString </a>in einen String umgewandelt.</p> + +<pre class="brush: js">var object = {}; +object['1'] = 'value'; +console.log(object[1]); +</pre> + +<p>Dies gibt "value" aus, weil 1 in '1' umgewandelt wird.</p> + +<pre class="brush: js">var foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {}; +object[foo] = 'value'; +console.log(object[bar]); +</pre> + +<p>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']".</p> + +<h3 id="Methodenbindung">Methodenbindung</h3> + +<p>Eine Methode ist nicht an ein Objekt gebunden zu dem sie gehört. Vor allem <code>this</code> ist nicht an eine Methode gebunden, d. h. <code>this</code> muss nicht unbedingt auf das Objekt verweisen das die Methode enthält. <code>this</code> wird stattdessen vom Funktionsaufruf gesetzt. Siehe auch <code><a href="/de/docs/Web/JavaScript/Reference/Operators/this">this</a></code> dazu.</p> + +<h3 id="Hinweis_zu_eval">Hinweis zu <code>eval</code></h3> + +<p>JavaScript-Anfänger machen oft den Fehler <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/eval">eval </a>zu nutzen wo die Klammernotation verwendet werden kann. Zum Beispiel sieht man folgende Syntax häufig in vielen Skripten.</p> + +<pre class="brush: js">x = eval('document.forms.form_name.elements.' + strFormControl + '.value'); +</pre> + +<p><a href="https://www.nczonline.net/blog/2013/06/25/eval-isnt-evil-just-misunderstood/">eval</a> ist langsam und sollte wenn möglich vermieden werden. Außerdem würde <code>strFormControl</code> 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.</p> + +<pre class="brush: js">x = document.forms['form_name'].elements[strFormControl].value; +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-property-accessors', 'Property Accessors')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-property-accessors', 'Property Accessors')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.2.1', 'Property Accessors')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.2.1', 'Property Accessors')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.operators.property_accessors")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Object")}}</li> + <li>{{jsxref("Object/defineProperty")}}</li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Mit der <strong>Spread-Syntax</strong> 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.</p> + +<h2 id="Syntax">Syntax</h2> + +<p>Für Funktionsaufrufe:</p> + +<pre class="brush: js">myFunction(...iterableObj); +</pre> + +<p>Für Array-Literale:</p> + +<pre class="brush: js">[...iterableObj, 4, 5, 6]</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Ein_besseres_apply">Ein besseres "apply"</h3> + +<p><strong>Beispiel:</strong> Für gewöhnlich wird {{jsxref( "Function.prototype.apply")}} verwendet, wenn man die Elemente eines Arrays als Argumente eines Funktionsaufrufs nutzen möchte:</p> + +<pre class="brush: js">function myFunction(x, y, z) { } +var args = [0, 1, 2]; +myFunction.apply(null, args);</pre> + +<p>Mit dem ES2015 Spread-Operator kann das nun wie folgt geschrieben werden:</p> + +<pre class="brush: js">function myFunction(x, y, z) { } +var args = [0, 1, 2]; +myFunction(...args);</pre> + +<p>Die Spread-Syntax kann für jedes beliebige Argument der Argumentliste verwendet werden, und sie kann auch mehrmals verwendet werden:</p> + +<pre class="brush: js">function myFunction(v, w, x, y, z) { } +var args = [0, 1]; +myFunction(-1, ...args, 2, ...[3]);</pre> + +<h3 id="Ein_mächtigeres_Array-Literal">Ein mächtigeres Array-Literal</h3> + +<p><strong>Beispiel:</strong> 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 <code>push</code>, <code>splice</code>, <code>concat</code>, etc. zurückgreifen. Mit der Spread-Syntax jedoch kann das viel prägnanter ausgedrückt werden:</p> + +<pre class="brush: js">var parts = ['shoulders', 'knees']; +var lyrics = ['head', ...parts, 'and', 'toes']; // <span class="objectBox objectBox-array"><a class="objectLink "><span class="arrayLeftBracket">[</span></a><span class="objectBox objectBox-string">"head"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"shoulders"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"knees"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"and"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"toes"</span></span>] +</pre> + +<p>Genau wie der Spread-Operator für Argumentlisten kann <code>...</code> überall im Array-Literal verwendet werden, auch mehrmals.</p> + +<h3 id="Apply_für_new">"Apply" für "new"</h3> + +<p><strong>Beispiel:</strong> In ES5 kann <code>new</code> nicht mit <code>apply</code> kombiniert werden (nach den ES5-Regeln führt <code>apply</code> einen <code>[[Call]]</code> aus, keinen <code>[[Construct]]</code>). Die Spread-Syntax von ES2015 unterstützt dies auf ganz natürliche Weise:</p> + +<pre class="brush: js">var dateFields = readDateFields(database); +var d = new Date(...dateFields);</pre> + +<h3 id="Ein_Array_kopieren">Ein Array kopieren</h3> + +<pre>var arr = [1,2,3]; +var arr2 = [...arr]; // wie arr.slice() +arr2.push(4); // arr2 wird [1,2,3,4], arr bleibt unverändert.</pre> + +<h3 id="Ein_besseres_push">Ein besseres "push"</h3> + +<p><strong>Beispiel:</strong> {{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:</p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +// Append all items from arr2 onto arr1 +Array.prototype.push.apply(arr1, arr2);</pre> + +<p>Mit dem Spread-Operator von ES2015 wird daraus:</p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +arr1.push(...arr2);</pre> + +<h3 id="Nur_apply_für_iterables">Nur "apply" für iterables</h3> + +<pre>var obj = {"key1":"value1"}; +function myFunction(x) { + console.log(x) // undefined +} +myFunction(...obj); +var args = [...obj]; +console.log(args, args.length); // [] 0</pre> + +<h2 id="Rest-Syntax_(Parameter)">Rest-Syntax (Parameter)</h2> + +<p>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.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definiert in verschiedenen Abschnitten der Spezifikation: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Array Initializer</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Argument Lists</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Spread-Operation innerhalb von Array-Literalen</td> + <td>{{CompatChrome("46")}}</td> + <td>{{CompatGeckoDesktop("16")}}</td> + <td>{{CompatIE("Edge")}}</td> + <td>{{CompatNo}}</td> + <td>7.1</td> + </tr> + <tr> + <td>Spread-Operation innerhalb von Funktionsaufrufen</td> + <td>{{CompatChrome("46")}}</td> + <td>{{CompatGeckoDesktop("27")}}</td> + <td>{{CompatIE("Edge")}}</td> + <td>{{CompatNo}}</td> + <td>7.1</td> + </tr> + <tr> + <td>Spread-Operation beim Destrukturieren ("destructuring")</td> + <td>{{CompatChrome("49")}}</td> + <td>{{CompatGeckoDesktop("34")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Spread-Operation innerhalb von Array-Literalen</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("46")}}</td> + <td>{{CompatGeckoMobile("16")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + <td>{{CompatChrome("46")}}</td> + </tr> + <tr> + <td>Spread-Operation innerhalb von Funktionsaufrufen</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("46")}}</td> + <td>{{CompatGeckoMobile("27")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + <td>{{CompatChrome("46")}}</td> + </tr> + <tr> + <td>Spread-Operation beim Destrukturieren ("destructuring")</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("34")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Rest Parameter</a></li> + <li><a href="http://exploringjs.com/es6/ch_destructuring.html#sec_rest-operator">Rest Operator</a></li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<div>Die <strong>Spread-Syntax </strong>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.</div> + +<div>{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<p>Für Funktionsaufrufe:</p> + +<pre class="syntaxbox">myFunction(...iterableObj); +</pre> + +<p>Für Array-Literale oder Strings:</p> + +<pre class="syntaxbox">[...iterableObj, '4', 'fünf', 6];</pre> + +<p>Für Objektliterale (neu in ECMAScript 2018):</p> + +<pre class="syntaxbox">let objClone = { ...obj };</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Spread_in_Funktionsaufrufen">Spread in Funktionsaufrufen</h3> + +<h4 id="Apply_ersetzen">Apply ersetzen</h4> + +<p>Es ist üblich {{jsxref( "Function.prototype.apply")}} zu benutzen, wenn man die Elemente eines Arrays als Argumente eines Funktionsaufrufs nutzen möchte.</p> + +<pre class="brush: js">function myFunction(x, y, z) { } +var args = [0, 1, 2]; +myFunction.apply(null, args);</pre> + +<p>Mit der Spread-Syntax lässt sich das ganze wie folgt schreiben:</p> + +<pre class="brush: js">function myFunction(x, y, z) { } +var args = [0, 1, 2]; +myFunction(...args);</pre> + +<p>Jedes Argument der Argumentliste kann die Spread-Syntax verwenden, und sie kann auch mehrfach verwendet werden.</p> + +<pre class="brush: js">function myFunction(v, w, x, y, z) { } +var args = [0, 1]; +myFunction(-1, ...args, 2, ...[3]);</pre> + +<h4 id="Apply_bei_new">Apply bei new</h4> + +<p>Beim Aufruf eines Konstruktors mit <code>new</code>, ist es nicht möglich ein Array und <code>apply</code> <strong>direkt </strong>zu benutzen (<code>apply</code> führt <code>[[Call]]</code> und nicht <code>[[Construct]]</code> aus). Allerdings kann dank der Spread-Syntax ein Array mit <code>new</code> verwendet werden:</p> + +<pre class="brush: js">var dateFields = [1970, 0, 1]; // 1. Januar 1970 +var d = new Date(...dateFields); +</pre> + +<p>Um <code>new</code> mit einem Array ohne die Spread-Syntax zu nutzen, müsste man das <strong>indirekt </strong>mit <em>Partial Application</em> umsetzen:</p> + +<pre class="brush: js">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"}</pre> + +<h3 id="Spread_bei_Array-Literalen">Spread bei Array-Literalen</h3> + +<h4 id="Ein_mächtigeres_Array-Literal">Ein mächtigeres Array-Literal</h4> + +<p>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 <code>push</code>, <code>splice</code>, <code>concat</code>, etc. umsteigen. Mit Spread-Syntax wird der Code kurz und bündig:</p> + +<pre class="brush: js">var parts = ['Schultern', 'Knie']; +var lyrics = ['Kopf', ...parts, 'und', 'Zehen']; +// ["Kopf", "Schultern", "Knie", "und", "Zehen"] +</pre> + +<p>Genau wie bei Argumentlisten von Funktionsaufrufen kann <code>...</code> überall und mehrach bei Array-Literalen benutzt werden.</p> + +<h4 id="Ein_Array_kopieren">Ein Array kopieren</h4> + +<pre class="brush: js">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 +</pre> + +<p><strong>Bemerkung:</strong> 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).</p> + +<pre class="brush: js">var a = [[1], [2], [3]]; +var b = [...a]; +b.shift().shift(); // 1 +// Auch Array a wurde verändert. [[], [2], [3]] +</pre> + +<h4 id="Eine_bessere_Möglichkeit_Arrays_zu_verketten">Eine bessere Möglichkeit, Arrays zu verketten</h4> + +<p>{{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:</p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +// Hänge alle Elemente von arr2 an arr1 +arr1 = arr1.concat(arr2);</pre> + +<p>Mit Spread-Syntax wird daraus:</p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +arr1 = [...arr1, ...arr2]; +</pre> + +<p>{{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:</p> + +<pre class="brush: js">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]</pre> + +<p>Bei der Spread-Syntax wird dies zu [Beachten Sie jedoch, dass dies ein neues Array <code>arr1</code> erzeugt. Im Gegensatz zu {{jsxref("Array.unshift")}} ändert es nicht das ursprüngliche Array <code>arr1</code> in-place]:</p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +arr1 = [...arr2, ...arr1]; // arr1 ist jetzt [3, 4, 5, 0, 1, 2] +</pre> + +<h3 id="Spread_für_Objektliterale">Spread für Objektliterale</h3> + +<p>Der Vorschlag zu <a href="https://github.com/tc39/proposal-object-rest-spread">Rest-/Spread-Attributen für ECMAScript</a> (Stufe 4) fügt Spread-Attribute zu <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">Objektliteralen</a> hinzu. Dadurch werden die abzählbaren Attribute von einem gegebenen Objekt zu einem neuen hinzugefügt.</p> + +<p>Flaches Klonen (ohne <code>prototype</code>) oder Zusammenführen von Objekten ist nun mit einer kürzeren Syntax als {{jsxref("Object.assign()")}} möglich.</p> + +<pre class="brush: js">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 }</pre> + +<p>Beachten Sie, dass {{jsxref("Object.assign()")}}} im Gegensatz zur Spread-Syntax <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">Setter</a> auslöst.</p> + +<p>Beachten Sie, dass Sie die Funktion {{jsxref("Object.assign()")}} weder ersetzen noch nachahmen können:</p> + +<pre class="brush: js">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 } }</pre> + +<p>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.</p> + +<h3 id="Nur_für_iterierbare_Objekte">Nur für iterierbare Objekte</h3> + +<p>Spread-Syntax (anders als bei Spread-Eigenschaften) kann nur auf <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator">iterierbare Objekte</a> angewendet werden:</p> + +<pre class="brush: js">var obj = {'key1': 'value1'}; +var array = [...obj]; // TypeError: obj is not iterable +</pre> + +<h3 id="Spread_mit_mehreren_Werten">Spread mit mehreren Werten</h3> + +<p>Beachten Sie bei der Verwendung von Spread-Syntax für Funktionsaufrufe die Möglichkeit der Überschreitung der Argumentlängenbegrenzung der JavaScript-Engine. Siehe <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="Die Methode apply() ruft eine Funktion mit einem vorgegeben Wert für this auf sowie weiteren Argumenten, die als Array (oder Array-ähnliches Objekt) bereitgestellt werden."><code>apply()</code></a> für weitere Details.</p> + +<h2 id="Rest-Syntax_(Parameter)">Rest-Syntax (Parameter)</h2> + +<p>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 <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Rest-Parameter.</a></p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definiert in mehreren Abschnitten der Spezifikation: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Array Initializer</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Argument Lists</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Keine Änderungen</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Definiert in <a href="https://tc39.github.io/ecma262/2018/#sec-object-initializer">Object Initializer</a></td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + + + +<p>{{Compat("javascript.operators.spread")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Rest-Parameters</a> (ebenfalls ‘<code>...</code>’)</li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<div>Das <strong>super</strong> Schlüsselwort wird verwendet, um Funktionen in einem Vaterobjekt auszuführen.</div> + +<div> </div> + +<div>Die <code>super.prop</code> und <code>super[expr]</code> Ausdrücke sind in allen <a href="/de/docs/Web/JavaScript/Reference/Functions/Method_definitions">Methodendefinitionen</a> von <a href="/de/docs/Web/JavaScript/Reference/Classes">Klassen</a> und <a href="/de/docs/Web/JavaScript/Reference/Operators/Object_initializer">Objekt Literalen</a> verfügbar.</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">super([arguments]); // calls the parent constructor. +super.functionOnParent([arguments]); +</pre> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Wenn ein Konstruktor verwendet wird, muss das <code>super</code> Schlüsselwort verwendet werden, bevor das <code>this</code> Schlüsselwort verwendet werden kann. Mit dem <code>super</code> Schlüsselwort kann man auch Funktionen im Vaterobjekt ausführen.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="super_in_Klassen_verwenden"><code>super</code> in Klassen verwenden</h3> + +<p>Der Codeabschnitt ist vom <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes Beispiel</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">Live Demo</a>). Hier wird <code>super()</code> aufgerufen, um das duplizieren von Teilen des Konstruktors zu vermeiden, was zwischen <code>Rectangle</code> und <code>Square</code> üblich ist.</p> + +<pre class="brush: js">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'; + } +}</pre> + +<h3 id="super_Aufruf_in_statischen_Methoden"><code>super</code> Aufruf in statischen Methoden</h3> + +<p><code>super</code> kann auch in <a href="/de/docs/Web/JavaScript/Reference/Classes/static">statischen</a> Methoden verwendet werden.</p> + +<pre class="brush: js">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' +</pre> + +<h3 id="Das_Löschen_von_Supereigenschaften_erzeugt_einen_Fehler">Das Löschen von Supereigenschaften erzeugt einen Fehler</h3> + +<p>Man kann den <a href="/de/docs/Web/JavaScript/Reference/Operators/delete"><code>delete</code> Operator</a> in Verbindung mit <code>super.prop</code> oder <code>super[expr]</code> nicht einsetzen, um Eigenschaften zu löschen, es führt zu einem {{jsxref("ReferenceError")}}.</p> + +<pre class="brush: js">class Base { + constructor() {} + foo() {} +} +class Derived extends Base { + constructor() {} + delete() { + delete super.foo; + } +} + +new Derived().delete(); // ReferenceError: invalid delete involving 'super'. </pre> + +<h3 id="super.prop_kann_keine_schreibgeschützten_Eigenschaften_überschreiben"><code>super.prop</code> kann keine schreibgeschützten Eigenschaften überschreiben</h3> + +<p>Wenn eine schreibgeschützte Eigenschaft mit z.B. {{jsxref("Object.defineProperty")}}" erzeugt wird, kann der Wert nicht mit <code>super</code> überschrieben werden.</p> + +<pre class="brush: js">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 +</pre> + +<h3 id="Nutzen_von_super.prop_in_Objektliteralen">Nutzen von <code>super.prop</code> in Objektliteralen</h3> + +<p>super kann auch in der <a href="/de/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer / literal</a> Notation verwendet werden. In diesem Beispiel definieren zwei Objekte eine Methode. Im zweiten Beispiel wird mit <code>super</code> die Funktion im ersten Objekt aufgerufen. Das funktioniert mit Hilfe von {{jsxref("Object.setPrototypeOf()")}}. Damit ist es möglich den Prototypen von <code>obj2</code> auf <code>obj1</code> zu setzen, damit <code>super method1</code> in <code>obj1</code> findet.</p> + +<pre class="brush: js">var obj1 = { + method1() { + console.log("method 1"); + } +} + +var obj2 = { + method2() { + super.method1(); + } +} + +Object.setPrototypeOf(obj2, obj1); +obj2.method2(); // logs "method 1" +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-super-keyword', 'super')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initiale Definition</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.operators.super")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/JavaScript/Reference/Classes">Klassen</a></li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Das <strong>this Schlüsselwort einer Funktion</strong> in JavaScript verhält sich verglichen mit anderen Sprachen ein bisschen anders. Es gibt zudem Unterschiede zwischen dem <a href="/de/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict Modus</a> und nicht strict Modus.</p> + +<p>In den meisten Fällen ist der Wert von <code>this</code> 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 <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind</a></code> Methode ein, <a href="#Die_bind_Methode">um den Wert vom <code>this</code> einer Funktion zu setzen (egal, wie sie aufgerufen wird)</a>. ECMAScript 2015 hat die <a href="/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Pfeilfunktionen</a> implementiert, die kein eigenes <code>this</code> besitzt (<code>this</code> verweist auf das <code>this</code> des umschließenden Ausführungskontextes).</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-this.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">this</pre> + +<h2 id="Globaler_Kontext">Globaler Kontext</h2> + +<p>Im globalen Ausführungskontext (außerhalb jeder Funktion), referenziert <code>this</code> auf das globale Objekt, egal ob im strict Modus oder nicht.</p> + +<pre class="brush:js">// 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" +</pre> + +<h2 id="Funktionskontext">Funktionskontext</h2> + +<p>Innerhalb einer Funktion hängt der Wert von <code>this</code> davon ab, wie die Funktion aufgerufen wird.</p> + +<h3 id="Einfacher_Aufruf">Einfacher Aufruf</h3> + +<p>Weil der folgende Code nicht im <a href="/de/docs/Web/JavaScript/Reference/Strict_mode">strict Modus</a> ist und weil <code>this</code> nicht vom Aufruf gesetzt wird, referenziert <code>this</code> das globale Objekt, welches in einem Browser <code>window</code> ist.</p> + +<pre class="brush: js">function f1(){ + return this; +} + +// In einem Browser: +f1() === window; // true + +// In Node: +f1() === global; // true</pre> + +<p>Im strict Modus bleibt der Wert von <code>this</code> jedoch auf dem Wert, auf den er beim Eingeben des Ausführungskontextes festgelegt wurde. Im folgenden Fall wird dies standardmäßig auf <code>undefined</code> sein:</p> + +<pre class="brush:js">function f2(){ + "use strict"; // see strict mode + return this; +} + +f2() === undefined; // true +</pre> + +<p>Wenn <code>this</code> im <strong>strict Modus</strong> nicht vom Ausführungskontext definiert wird, bleibt dieser <code>undefined</code>.</p> + +<div class="note">Im zweiten Beispiel sollte <code>this</code> <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code> sein, weil <code>f2</code> direkt und nicht als eine Methode oder Eigenschaft eines Objektes (z. B. <code>window.f2()</code>) 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 <code>window</code> Objekt zurück.</div> + +<p>Um den Wert von <code>this</code> von einem in den anderen Kontext zu überführen, benutzt man <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call</a> oder <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">apply</a><strong>:</strong></p> + +<pre class="brush: js">// 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'</pre> + +<p>Wenn eine Funktion das <code>this</code> Schlüsselwort im Körper verwendet, kann dessen Wert an ein Objekt gebunden werden, wenn die <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call</a></code> oder <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">apply</a></code> Methode genutzt wird, die alle Funktion von <code>Function.prototype</code> erben.</p> + +<pre class="brush: js">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</pre> + +<p>Bei <code>call</code> und <code>apply</code> ist zu beachten, dass wenn der für <code>this</code> übergebene Wert kein Objekt ist, wird dieser mit der internen Operation <code>ToObject</code> zu einem Objekt konvertiert. Ist der übergebene Wert ein primitiver Typ wie <code>7</code> oder <code>'foo'</code>, wird dieser mit einem zugehörigen Konstruktor zu einem Objekt konvertiert, so dass die primitive Nummer <code>7</code> mit <code>new Number(7)</code> und <code>'foo'</code> mit <code>new String('foo')</code> zu ein Objekt konvertiert wird.</p> + +<pre class="brush: js">function bar() { + console.log(Object.prototype.toString.call(this)); +} + +bar.call(7); // [object Number] +bar.call('foo'); // [object String]</pre> + +<h3 id="Die_bind_Methode">Die <code>bind</code> Methode</h3> + +<p>ECMAScript 5 hat <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind</a></code> eingeführt. Der Aufruf von <code>f.bind(someObject)</code> erstellt eine neue Funktion mit dem selben Körper und Gültigkeitsbereich von <code>f</code>, aber <code>this</code> unterscheidet sich zur original Funktion. In der neuen Funktion ist <code>this</code> permanent mit dem Parameter von <code>bind</code> gebunden, egal wie die Funktion benutzt wird.</p> + +<pre class="brush:js">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</pre> + +<h3 id="Pfeilfunktionen">Pfeilfunktionen</h3> + +<p>In <a href="/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Pfeilfunktionen</a>, wird <code>this</code> auf das <code>this</code> des umschließenden lexikalischen Kontextes gesetzt. In globalem Code wird es auf das globale Objekt gesetzt.</p> + +<pre class="brush: js">var globalObject = this; +var foo = (() => this); +console.log(foo() === globalObject); // true</pre> + +<div class="note"> +<p>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.</p> +</div> + +<pre class="brush: js">// Aufruf als Methode eines Objektes +var obj = {foo: foo}; +console.log(obj.foo() === globalObject); // true + +// Versuch this mit <code class="language-js">call</code> zu setzen +console.log(foo.call(obj) === globalObject); // true + +// Versuch this mit bind zu setzen +foo = foo.bind(obj); +console.log(foo() === globalObject); // true</pre> + +<p>Es ist egal, auf welches <code>this</code> für <code>foo</code> beim erstellen gesetzt wurde (im Beispiel oben das globale Objekt). Das selbe gilt für Pfeilfunktionen, die in einer anderen Funktion erstellt werden: ihr <code>this</code> wird auf das <code>this</code> des äußeren Ausführungskontext gesetzt.</p> + +<pre class="brush: js">// 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 +</pre> + +<p>Im oberen Beispiel, gibt die Funktion (nennen wir sie anonyme Funktion A), die zu <code>obj.bar</code> zugewiesen ist, gibt eine andere Funktion (nennen wir sie anonyme Funktion B) zurück, die als Pfeilfunktion erstellt wurde. Als Ergebnis ist das <code>this</code> von B permanent das <code>this</code> von <code>obj.bar</code> (Funktion A) beim Aufruf. Wenn die zurückgegebene Funktion (Funktion B) aufgerufen wird, ist der <code>this</code> Wert immer der, der er initial war. Im obigen Beispielcode ist das <code>this</code> der Funktion B auf das <code>this</code> der Funktion A gesetzt, welches obj ist, so dass es auf <code>obj</code> gesetzt bleibt, während hingegen normalerweise <code>this</code> <code>undefined</code> oder das globale Objekt (oder jede andere Methode wie im vorherigen Beispiel im globalen Ausführungskontext) ist.</p> + +<h3 id="Alseine_Objektmethode">Alseine Objektmethode</h3> + +<p>Wenn eine Funktion als Methode eines Objektes aufgerufen wird, hat <code>this</code> eine Referenz auf das Objekt, auf dem die Methode aufgerugen wurde.</p> + +<p>Im folgenden Beispiel ist <code>this</code> innerhalb der Funktion auf <code>o</code> gebunden, wenn <code>o.f()</code> ausgeführt wird.</p> + +<pre class="brush:js">var o = { + prop: 37, + f: function() { + return this.prop; + } +}; + +console.log(o.f()); // 37 +</pre> + +<p>Zu beachten ist, dass dieses Verhalten nicht davon beeinflusst ist wie und wo die Funktion definiert ist. Im folgenden Beispiel definierten wir eine Inlinefunktion <code>f</code> als Eigenschaft von <code>o</code>. Man könnte auch einfach die Funktion zuerst definieren und diese dann <code>o.f</code> zuweisen. Dieses hat das selbe Ergebnis zur Folge:</p> + +<pre class="brush:js">var o = {prop: 37}; + +function independent() { + return this.prop; +} + +o.f = independent; + +console.log(o.f()); // logs 37 +</pre> + +<p>Das demonstriert, dass es nur wichtig ist, dass die Funktion als Eigenschaft <code>f</code> des Objektes <code>o</code> aufgerufen wurde.</p> + +<p>Genauso ist die <code>this</code> Bindung nur von der unmittelbaren Mitgliederreferent beeinflusst. Im folgenden Beispiel, wenn die Funktion aufgerufen wird, wird diese als Methode <code>g</code> des Objektes <code>o.b</code> aufgerufen. Während der Ausführung referenziert <code>this</code> in der Funktion <code>o.b</code>. Der Fakt, dass das Objekt selbst eine Eigenschaft von <code>o</code> ist, hat keine Konsequenz, nur die unmittelbare Referenz ist wichtig.</p> + +<pre class="brush:js">o.b = {g: independent, prop: 42}; +console.log(o.b.g()); // logs 42 +</pre> + +<h4 id="this_auf_der_Objektprototypenkette"><code>this</code> auf der Objektprototypenkette</h4> + +<p>Das selbe gilt für Methoden, die irgendwo auf der Objektprototypenkette definiert werden. Wenn die Methode auf einer Objektprototypenkette ist, referenziert <code>this</code> zu dem Objekte, auf dem die Methode aufgerufen wurde, so als währe die Methode auf dem Objekt.</p> + +<pre class="brush:js">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 +</pre> + +<p>In diesem Beispiel hat das Objekt, welches der Variablen <code>p</code> zugewiesen wird, nicht ihre eigene <code>f</code> Eigenschaft, es erbt sie von seinem Prototyp. Aber es spielt keine Rolle, ob die Suche nach <code>f</code> eventuell eine Eigenschaft/Methode auf dem Objekt <code>o</code> findet; Die Suche begann als eine Referenz zu <code>p.f</code>, so hat <code>this</code> in der Funktion eine Referenz zu dem Objekt <code>p</code>. Weil <code>f</code> als Methode von <code>p</code> aufgerufen wurde, referenziert <code>this</code> <code>p</code>. Dieses ist eine interessante Funktion von JavaScripts's Prototypenvererbung.</p> + +<h4 id="this_mit_Gettern_oder_Settern"><code>this</code> mit Gettern oder Settern</h4> + +<p>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 <code>this</code> zu dem Objekt gebunden, auf dem der Getter oder Setter aufgerufen wurde.</p> + +<pre class="brush:js">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 +</pre> + +<h3 id="Als_ein_Konstruktor">Als ein Konstruktor</h3> + +<p>Wenn eine Funktion als Konstruktor verwendet wird (mit dem <code><a href="/de/docs/Web/JavaScript/Reference/Operators/new">new</a></code> Schlüsselwort), ist <code>this</code> an das neu erstellte Objekt gebunden.</p> + +<div class="note"> +<p>Weil der Standard für einen Konstruktor besagt, dass das Objekt, welches auf <code>this</code> referenziert, zurückgegeben wird, kann stattdessen ein anderes Objekt zurückgegeben werden (wenn der Rückgabewert kein Objekt ist, wird <code>this</code> zurückgegeben).</p> +</div> + +<pre class="brush:js">/* + * 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 +</pre> + +<p>Im letzen Beispiel (<code>C2</code>) wird das gebundene <code>this</code> Objekt verworfen, weil während des Erstellens ein anderes Objekt zurückgegeben wird. (Das macht das Statement <code>this.a = 37;</code> zu todem Code. Er ist nicht ganz tod, weil er ausgeführt wird, aber entfernt werden kann ohne einen Effekt zu haben.)</p> + +<h3 id="Als_ein_DOM_Eventhandler">Als ein DOM Eventhandler</h3> + +<p>Wenn eine Funktion als Eventhandler genutzt wird, wird sein <code>this</code> auf das Element, welches das Event feuert, gesetzt (manche Browser folgen dieser Konvention nicht für das dynamische hinzufügen von Methoden nicht über <code>addEventListener</code>).</p> + +<pre class="brush:js">// 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); +}</pre> + +<h3 id="In_einem_Inlineeventhandler">In einem Inlineeventhandler</h3> + +<p>Wenn Code in einem inline <a href="/de/docs/Web/Guide/Events/Event_handlers">on-event Handler</a> aufgerufen wird, wird <code>this</code> auf das DOM Element gesetzt, auf dem der Listener aufgerufen wird:</p> + +<pre class="brush:js"><button onclick="alert(this.tagName.toLowerCase());"> + Show this +</button> +</pre> + +<p>Der obere Alert zeigt <code>button</code>. Zu beachten ist, dass nur bei äußerem Code das <code>this</code> so gesetzt wird:</p> + +<pre class="brush:js"><button onclick="alert((function(){return this}()));"> + Show inner this +</button> +</pre> + +<p>In diesem Fall ist das <code>this</code> der inneren Funktion nicht gesetzt, so dass das globale/window Objekt zurückgegeben wird (z. B. das Standardobjekt in nicht strict Modus, wo <code>this</code> nicht vom Aufruf gesetzt wird).</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-this-keyword', 'The this keyword')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-this-keyword', 'The this keyword')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.1', 'The this keyword')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.1.1', 'The this keyword')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.1.1', 'The this keyword')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Erste Definition. Implementiert in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.operators.this")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">Strict Modus</a></li> + <li><a href="http://rainsoft.io/gentle-explanation-of-this-in-javascript/">Gentle explanation of 'this' keyword in JavaScript</a></li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Der <strong><code>typeof</code></strong> Operator gibt einen String zurück, der den Typ des unausgewerteten Operanden beschreibt.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-typeof.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<p>Dem <code>typeof</code> Operator folgt sein Operand:</p> + +<pre class="syntaxbox notranslate"><code>typeof <em>O</em><code><em>perand</em></code></code></pre> + +<h3 id="Parameter">Parameter</h3> + +<p><code><em>Operand</em></code> ist ein Ausdruck, dessen Typ zurückgegeben werden soll. Dies kann ein Objekt oder ein {{Glossary("Primitiv", "primitive")}} sein.</p> + +<p>Klammern sind optional.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Die folgende Tabelle fasst die möglichen Rückgabewerte von <code>typeof</code> zusammen. Mehr Informationen zu Typen und primitiven Datentypen sind auf der Seite <a href="/de/docs/Web/JavaScript/Data_structures">JavaScript Datentypen und Datenstrukturen</a> zu finden.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Typ</th> + <th scope="col">Rückgabewert</th> + </tr> + </thead> + <tbody> + <tr> + <td>Undefined</td> + <td><code>"undefined"</code></td> + </tr> + <tr> + <td>Null</td> + <td><code>"object" </code>(see below)</td> + </tr> + <tr> + <td>Boole'scher Wert</td> + <td><code>"boolean"</code></td> + </tr> + <tr> + <td>Zahl</td> + <td><code>"number"</code></td> + </tr> + <tr> + <td>Zeichenkette</td> + <td><code>"string"</code></td> + </tr> + <tr> + <td>Symbol (neu in ECMAScript 2015)</td> + <td><code>"symbol"</code></td> + </tr> + <tr> + <td>Host-Objekt (von der JS-Umgebung bereitgestellt)</td> + <td><em>implementierungsabhängig</em></td> + </tr> + <tr> + <td>Funktionsobjekt (implementiert [[Call]] nach ECMA-262)</td> + <td><code>"function"</code></td> + </tr> + <tr> + <td>Alle anderen Objekte</td> + <td><code>"object"</code></td> + </tr> + </tbody> +</table> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush:js notranslate">// 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'; +</pre> + +<h3 id="null"><code>null</code></h3> + +<pre class="brush:js notranslate">// This stands since the beginning of JavaScript +typeof null === 'object'; +</pre> + +<p>In der ersten JavaScript-Implementierung bestanden JavaScript-Werte aus einem Typenbezeichner und dem eigentlichen Wert. Der Typenbezeichner für Objekte war 0. <code>null</code> wurde durch den NULL-Zeiger dargestellt (auf den meisten Plattformen 0x00). Infolgedessen besaß <code>null</code> den Typenbezeichner 0, wodurch der seltsame Rückgabewert für <code>typeof</code> entstand. (<a href="http://www.2ality.com/2013/10/typeof-null.html">Quelle</a>)</p> + +<p>Es gab einen Korrekturvorschlag für ECMAScript, der aber <a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:typeof_null">abgelehnt wurde</a>. Dadurch wäre <code>typeof null === 'null'</code> gewesen.</p> + +<h3 id="Einsatz_des_new_Operators">Einsatz des <code>new</code> Operators</h3> + +<pre class="brush:js notranslate">// 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 +</pre> + +<h3 id="Notwendigkeit_von_Klammern_in_der_Syntax">Notwendigkeit von Klammern in der Syntax</h3> + +<pre class="brush:js notranslate">// 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' +</pre> + +<h3 id="Reguläre_Ausdrücke">Reguläre Ausdrücke</h3> + +<p>Aufrufbare reguläre Ausdrücke waren eine nicht standardkonforme Erweiterung in manchen Browsern.</p> + +<pre class="brush:js notranslate">typeof /s/ === 'function'; // Chrome 1-12, nicht ECMAScript 5.1-konform +typeof /s/ === 'object'; // Firefox 5+, ECMAScript 5.1-konform +</pre> + +<h3 id="Temporal_Dead_Zone_errors">Temporal Dead Zone errors</h3> + +<p>Vor ECMAScript 2015 war bei <code>typeof</code> immer garantiert, dass ein String in jeder Lage zurückgegeben wird. Mit dem Hinzufügen von nicht hochgezogenen, blockweisen <code><a href="/de/docs/Web/JavaScript/Reference/Statements/let">let</a></code> and <code><a href="/de/docs/Web/JavaScript/Reference/Statements/const">const</a></code> Variablen, kann es zu <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError">ReferenceError</a></code>s kommen, wenn die Variablen nicht nicht definiert sind. Das steht im Kontrast zu nicht definierten Variablen, welche mit <code>typeof</code> 'undefined' zurück geben. Blockvariablen haben eine <a href="/de/docs/Web/JavaScript/Reference/Statements/let#Zeitweilig_tote_Zonen_und_Fehler_mit_let">temporäre tote Zone</a> vom Start des Blockes bis zum Durchführen der Initialisierung. In dieser Zeit kann dieser Fehler auftreten.</p> + +<pre class="brush: js notranslate">typeof undeclaredVariable === 'undefined'; +typeof newLetVariable; let newLetVariable; // ReferenceError +typeof newConstVariable; const newConstVariable = 'hello'; // ReferenceError +</pre> + +<h3 id="Ausnahmen">Ausnahmen</h3> + +<p>Alle aktuellen Browser zeigen ein nicht standardisiertes hochgezogenes Objekt {{domxref("document.all")}} mit dem Typ Undefined.</p> + +<pre class="brush:js notranslate">typeof document.all === 'undefined'; +</pre> + +<p>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. <code>document.all</code> hat das Typ-Tag <code>'undefined'</code> und wird alsAusnahmeverstoß der Regeln klassifiziert.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-typeof-operator', 'The typeof Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-typeof-operator', 'The typeof Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.4.3', 'The typeof Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.4.3', 'The typeof Operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.4.3', 'The typeof Operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.1.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.operators.typeof")}}</p> + +<h2 id="IE-Spezifischer_Hinweis">IE-Spezifischer Hinweis</h2> + +<p>In IE 6, 7 und 8 sind viele Hostobjekte als Objekte statt Funktionen typisiert, zum Beispiel:</p> + +<pre class="brush: js notranslate">typeof alert === 'object'</pre> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><code><a href="/de/docs/Web/JavaScript/Reference/Operators/instanceof" title="/en-US/docs/JavaScript/Reference/Operators/instanceof">instanceof</a></code></li> + <li><a href="http://es-discourse.com/t/why-typeof-is-no-longer-safe/15">Warum typeof nicht mehr "sicher" ist (englisch)</a></li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>JavaScript kennt sowohl den strikten als auch den Typ konvertierenden Vergleich. Ein strikter Vergleich (z. B. <code>===</code>) gibt nur true zurück, wenn der gleiche Typ und der gleiche Wert vorhanden sind. Der häufiger verwendete abstrakte Vergleich (z. B. <code>==</code>) wandelt die Operanden in den gleichen Typen um, bevor sie verglichen werden. Bei relationalen Vergleichsoperatoren (z. B. <code><=</code>) werden die Operanden vor dem Vergleich zuerst in elementare Datentypen konvertiert und dann in gleiche Typen umgewandelt.</p> + +<p>Strings werden entsprechend der lexikographischen Ordnung, basierend auf den Unicode, verglichen.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-comparisonoperators.html")}}</div> + + + +<p>Merkmale von Vergleichen:</p> + +<ul> + <li>Zwei Strings sind strikt gleich, wenn sie die gleiche Abfolge von Zeichen, die gleiche Länge und die gleichen Zeichen in übereinstimmenden Positionen haben.</li> + <li>Zwei Zahlen sind strikt gleich, wenn sie numerisch gleich sind (den gleichen Zahlwert haben). <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="NaN">NaN</a> ist mit nichts gleich, auch nicht mit sich selbst. +0 und -0 sind strikt gleich zueinander.</li> + <li>Zwei Boolesche Operanden sind exakt gleich wenn beide <code>true</code> oder beide <code>false</code> sind.</li> + <li>Zwei unterschiedliche Objekte sind niemals gleich, weder in strikten noch nicht-strikten Vergleichen.</li> + <li>Ein Ausdruck, der Objekte vergleicht, gilt nur als <code>true</code>, wenn die Operanden auf das gleiche Objekt zeigen.</li> + <li>Die Typen <code>Null</code> und <code>undefined</code> sind immer strikt gleich zu sich selbst und abstrakt gleich zueinander.</li> +</ul> + +<h2 id="Gleichheitsoperatoren">Gleichheitsoperatoren</h2> + +<h3 id="Gleichheit_()">Gleichheit (==)</h3> + +<p>Der Gleichheitsoperator konvertiert die Operanden, wenn sie <strong>nicht vom gleichen Typs</strong> sind und prüft dann auf strikte Gleichheit. Sind <strong>beide Operanden Objekte</strong>, vergleicht JavaScript die Referenzen; Referenzen gelten als gleich, wenn sie auf das gleiche Objekt im Speicher zeigen.</p> + +<h4 id="Syntax">Syntax</h4> + +<pre class="syntaxbox">x == y +</pre> + +<h4 id="Beispiele">Beispiele</h4> + +<pre class="brush: js">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 +</pre> + +<h3 id="Ungleichheit_(!)">Ungleichheit (!=)</h3> + +<p>Der Ungleichheitsoperator gibt true zurück, wenn die Operanden nicht gleich sind. Wenn die beiden Operanden <strong>nicht vom gleichen Typ </strong>sind, versucht JavaScript die Operanden in einen, für den Vergleich passenden Typ, umzuwandeln. Wenn <strong>beide Operanden Objekte sind</strong>, vergleicht JavaScript die Referenzen; Referenzen sind ungleich, wenn sie auf verschiedene Objekte im Speicher verweisen.</p> + +<p>Syntax</p> + +<pre class="syntaxbox">x != y</pre> + +<h4 id="Beispiele_2">Beispiele</h4> + +<pre class="brush: js">1 != 2 // true +1 != "1" // false +1 != '1' // false +1 != true // false +0 != false // false +</pre> + +<h3 id="Identität_strikte_Gleichheit_()">Identität / strikte Gleichheit (===)</h3> + +<p>Der Identitätsoperator gibt true zurück, wenn die Operanden strikt gleich sind (siehe oben) <strong>ohne eine Typkonvertierung</strong></p> + +<h4 id="Syntax_2">Syntax</h4> + +<pre class="syntaxbox">x === y</pre> + +<h4 id="Beispiele_3">Beispiele</h4> + +<pre class="brush: js ">3 === 3 // true +3 === '3' // false +var object1 = {'key': 'value'}, object2 = {'key': 'value'} +object1 === object2 // false +</pre> + +<h3 id="Nicht_identisch_Strikte_Ungleichheit_(!)">Nicht identisch / Strikte Ungleichheit (!==)</h3> + +<p>Der strikte Ungleichheitsoperator gibt true zurück, wenn die Operanden<strong> nicht vom gleichen Typ sind bzw. ungleich sind</strong>.</p> + +<h4 id="Syntax_3">Syntax</h4> + +<pre class="syntaxbox">x !== y</pre> + +<h4 id="Beispiele_4">Beispiele</h4> + +<pre class="brush: js">3 !== '3' // true +4 !== 3 // true +</pre> + +<h2 id="Relationale_Operatoren">Relationale Operatoren</h2> + +<p>Jeder dieser Operatoren wird die <code>valueOf()</code> Funktion aufrufen, bevor ein Vergleich durchgeführt wird.</p> + +<h3 id="Größer-als-Operator_(>)">Größer-als-Operator (>)</h3> + +<p>Der Größer-als-Operator gibt true zurück, wenn der linke Operand größer als der rechte Operand ist.</p> + +<h4 id="Syntax_4">Syntax</h4> + +<pre class="syntaxbox">x > y</pre> + +<h4 id="Beispiele_5">Beispiele</h4> + +<pre class="brush: js">4 > 3 // true +</pre> + +<h3 id="Größer-oder-gleich-Operator_(>)">Größer-oder-gleich-Operator (>=)</h3> + +<p>Der Größer-oder-gleich-Operator gibt true zurück, wenn der linke Operand größer als oder gleich dem rechten Operanden ist.</p> + +<h4 id="Syntax_5">Syntax</h4> + +<pre class="syntaxbox"> x >= y</pre> + +<h4 id="Beispiele_6">Beispiele</h4> + +<pre class="brush: js">4 >= 3 // true +3 >= 3 // true +</pre> + +<h3 id="Kleiner-als-Operator_(<)">Kleiner-als-Operator (<)</h3> + +<p>Der Kleiner-als-Operator gibt true zurück, wenn der linke Operand kleiner als der rechte Operand ist.</p> + +<h4 id="Syntax_6">Syntax</h4> + +<pre class="syntaxbox"> x < y</pre> + +<h4 id="Beispiele_7">Beispiele</h4> + +<pre class="brush: js">3 < 4 // true +</pre> + +<h3 id="Kleiner-oder-gleich-Operator_(<)">Kleiner-oder-gleich-Operator (<=)</h3> + +<p>Der Kleiner-oder-gleich-Operator gibt true zurück, wenn der linke Operand kleiner oder gleich dem rechten Operanden ist.</p> + +<h4 id="Syntax_7">Syntax</h4> + +<pre class="syntaxbox"> x <= y</pre> + +<h4 id="Beispiele_8">Beispiele</h4> + +<pre class="brush: js">3 <= 4 // true +</pre> + +<h2 id="Die_Gleichheitsoperatoren_anwenden">Die Gleichheitsoperatoren anwenden</h2> + +<p>Die Standard-Gleichheitsoperatoren (<code>==</code> und <code>!=</code>) benutzen den <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">Abstract Equality Comparison Algorithmus</a>, 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 <code>5 == '5'</code> das Zeichen auf der rechten Seite in eine Zahl konvertiert.</p> + +<p>Die strikten Gleichheitsoperatoren (<code>===</code> und <code>!==</code>) benutzen den <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">Strict Equality Comparison Algorithmus</a> und sind dafür gedacht, Operanden des gleichen Typs zu vergleichen. Wenn die Operanden von unterschiedlichen Typen sind, ist das Ergebnis immer <code>false</code>, wie <code>5 !== '5'</code>.</p> + +<p>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.</p> + +<p>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:</p> + +<ul> + <li>Wenn eine Zahl und eine Zeichenkette verglichen werden, wird die Zeichenkette zu einem Zahlenwert umgewandelt. JavaScript versucht das numerische Zeichenliteral in einen Wert des Typs <code>Number</code> zu wandeln. Zuerst wird der mathematische Wert des numerischen Zeichenliterals ermittelt. Danach wird der Wert auf den nächsten Wert des Typs <code>Number</code> gerundet.</li> + <li>Wenn einer der Operanden ein Boolescher Typ ist, wird der Operand zur 1 konveriert wenn er <code>true</code> ist und zur +0 wenn <code>false</code>.</li> + <li>Wenn ein Objekt mit einer Zahl oder einer Zeichenkette verglichen wird, versucht JavaScript den Defaultwert für das Objekt zurückzugeben. Operatoren versuchen das Objekt in einen elementaren Wert (<code>String</code> oder <code>Number)</code> umzuwandeln, indem sie die <code>valueOf</code> und <code>toString</code> Methoden der Objekte benutzen. Kann ein Objekt nicht umgewandelt werden, wird ein Laufzeitfehler erzeugt.</li> + <li>Ein Objekt wird nur dann in einen elementaren Datentypen umgewandelt, wenn sein Vergleichsoperand ein elementarer Datentyp ist. Sind beide Operanden Objekte, werden sie als Objekte verglichen und der Gleichheitstest liefert nur dann true, wenn beide auf das gleiche Objekt zeigen.</li> +</ul> + +<div class="note"><strong>Hinweis:</strong> String Objekte sind vom Typ Objekte, nicht String! String Objekte werden selten eingesetzt, so dass das folgende Ergebnis überraschend sein kann:</div> + +<pre class="brush:js">// 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' </pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial Definition. Implementiert in JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Fügt <code>===</code> und <code>!==</code> Operatoren hinzu. Implementiert in JavaScript 1.3</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.8')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>In verschiedenen Kapiteln der Spezifikation definiert: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Relational Operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Equality Operators</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-relational-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>In verschiedenen Kapiteln der Spezifikation definiert: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-relational-operators">Relational Operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-equality-operators">Equality Operators</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-relational-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>In verschiedenen Kapiteln der Spezifikation definiert: <a href="http://tc39.github.io/ecma262/#sec-relational-operators">Relational Operators</a>, <a href="http://tc39.github.io/ecma262/#sec-equality-operators">Equality Operators</a></td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.operators.comparison")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Object.is()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li><a href="/de/docs/Web/JavaScript/Equality_comparisons_and_sameness">Equality comparisons and sameness</a></li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Der <strong><code>void</code> Operator</strong> evaluiert einen gegebenen <code><em>Ausdruck</em></code> und gibt dann {{jsxref("Global_Objects/undefined", "undefined")}} zurück.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-voidoperator.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">void <em>Ausdruck</em></pre> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>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.</p> + +<p>Der <code>void</code> Ausdruck wird oft nur deswegen verwendet, um den primitiven Wert <code>undefined</code> 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)</p> + +<h2 id="Immediately_Invoked_Function_Expressions">Immediately Invoked Function Expressions</h2> + +<p>Wenn man eine <a href="/de/docs/Glossary/IIFE">immediately-invoked function expression</a> verwendet, dann kann <code>void</code> benutzt werden, um das keyword <code>function</code> als Ausdruck und nicht als Deklaration auswerten zu lassen.</p> + +<pre class="brush: js">void function iife() { + var bar = function () {}; + var baz = function () {}; + var foo = function () { + bar(); + baz(); + }; + var biz = function () {}; + + foo(); + biz(); +}(); +</pre> + +<h2 id="JavaScript_URIs">JavaScript URIs</h2> + +<p>Wenn ein Browser einer <code>javascript:</code> 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 <code>void</code> Ausdruck kann dazu benutzt werden in diesen Fällen {{jsxref("Global_Objects/undefined", "undefined")}} zurückzugeben. Zum Beispiel:</p> + +<pre class="brush: html"><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> +</pre> + +<p>Anmerkung: Die Verwendung des <code>javascript:</code> pseudo Protokolls wird gegenüber anderen nicht invasiven Maßnahmen wie Event Handlern nicht empfohlen.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.4.2', 'The void Operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.1</td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.4.2', 'The void Operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.4.2', 'The void Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-void-operator', 'The void Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-void-operator', 'The void Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.operators.void")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Global_Objects/undefined", "undefined")}}</li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Das <code>yield</code> Schlüsselwort wird eingesetzt zum Anhalten und Fortsetzen einer Generatorfunktion ({{jsxref("Statements/function*", "function*")}} oder <a href="/de/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">veralteten Generatorfunktion</a>) eingesetzt.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-yield.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">[<em>rv</em>] = <strong>yield</strong> [<em>expression</em>];</pre> + +<dl> + <dt><code>expression</code></dt> + <dd>Definiert den Wert, der von der Generatorfunktion über das <a href="/de/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterator_protocol">Iterator Protokoll</a> zurückgegeben wird. wird dieser weggelassen, wird <code>undefined</code> zurückgegeben.</dd> + <dt><code>rv</code></dt> + <dd> + <p>Gibt den optionalen Wert zurück, der der <code>next()</code> Methode des Generators übergeben wird, damit dieser weiter verarbeitet werden kann.</p> + </dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Das <code>yield</code> Schlüsselwort hält die Ausführung der Generatorfunktion an und gibt den Wert des Ausdrucks nach dem <code>yield</code> Schlüsselwort an den Aufrufer des Generators zurück. Es kann als die generatorbasierte Version des <code>return</code> Schlüsselwortes gesehen werden.</p> + +<p>Das <code>yield</code> Schlüsselwort gibt ein <code>IteratorResult</code> Objekt mit zwei Eigenschaften, <code>value</code> und <code>done</code>, zurück. Die <code>value</code> Eigenschaft ist das Ergebnis des ausgewerteten <code>yield</code> Ausdrucks und <code>done</code> ist <code>false</code>, was gedeutet, dass der Generator noch nicht fertig ist.</p> + +<p>Solange ein <code>yield</code> Ausdruck pausiert, wird die Codeausführung des Generators pausiert, bis die <code>next()</code> Methode des Generators aufgerufen wird. Mit jedem Aufruf der Generator <code>next()</code> Methode läuft der Generator weiter, bis einer der folgenden Punkte eintritt:</p> + +<ul> + <li> Ein <code>yield</code>, welches dazu führt, dass der Generator wieder Pausiert und einen neuen Generatorwert zurückgibt. Beim nächsten Aufruf von <code>next()</code> wird die Ausführung direkt nach dem <code>yield</code> fortgesetzt.</li> + <li>{{jsxref("Statements/throw", "throw")}} wird eingesetzt um einen Fehler im Generator zu erzeugen. Dieses stoppt den Generator vollständig und führt dazu, dass die Ausführung beim Aufrufer fortgesetzt wird, wie es bei üblicherweise bei Fehlern der Fall ist.</li> + <li>Das Ende einer Generatorfunktion wird erreicht; In diesem Fall endet die Ausführung des Generator und ein <code>IteratorResult</code> Objekt wird zum Aufrufer zurückgegeben, bei dem <code>value</code> {{jsxref("undefined")}} ist und <code>done</code> <code>true</code> ist.</li> + <li>Ein {{jsxref("Statements/return", "return")}} Statement wird erreicht. In diesem Fall endet die Ausführung des Generators und ein <code>IteratorResult</code> Objekt wird zum Aufrufer zurückgegeben, welches als <code>value</code> den vom <code>return</code> Statement spezifizierten Wert enthält und <code>done</code> <code>true</code> ist.</li> +</ul> + +<p>Wenn ein optionaler Wert der <code>next()</code> Methode des Generators übergeben wird, wird der Wert es der aktuelle Rückgabewert der <code>yield</code> Operation sein.</p> + +<p>Durch den Generatorcodepfad, seinem <code>yield</code> 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.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Der folgende Code ist die Deklaration einer Beispielgeneratorfunktion.</p> + +<pre class="brush: js">function* countAppleSales () { + var saleList = [3, 7, 5]; + for (var i = 0; i < saleList.length; i++) { + yield saleList[i]; + } +}</pre> + +<p>Wenn eine Generatorfunktion definiert ist, kann dieser benutzt werden, um einen Iterator, wie gezeigt, zu erstellen.</p> + +<pre class="brush: js">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 }</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#', 'Yield')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#', 'Yield')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.operators.yield")}}</p> + +<h2 id="Firefox_spezifische_Hinweise">Firefox spezifische Hinweise</h2> + +<ul> + <li>Angefangen mit Gecko 29 {{geckoRelease(29)}}, erzeugt eine fertige Generatorfunktion keinen {{jsxref("TypeError")}} "generator has already finished" mehr. Stattdessen wird ein <code>IteratorResult</code> Objekt wie folgendes zurückgegeben: <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</li> + <li>Angefangen mit Gecko 33 {{geckoRelease(33)}}, wurde das einlesen des <code>yield</code> Ausdrucks aktualisert, um konform mit der ES2015 Spezifikation zu sein ({{bug(981599)}}): + <ul> + <li>Der Ausdruck nach dem <code>yield</code> Schlüsselwort ist optional und das Weglassen führt nicht mehr zu einem {{jsxref("SyntaxError")}}: <code>function* countAppleSales() { yield; }</code></li> + </ul> + </li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/JavaScript/Guide/The_Iterator_protocol">Das Iterator Protokoll</a></li> + <li>{{jsxref("Statements/function*", "function*")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Operators/yield*", "yield*")}}</li> +</ul> 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* +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Der <strong><code>yield*</code> Ausdruck</strong> wird eingesetzt um an einen anderen {{jsxref("Statements/function*", "Generator")}} oder iterierbares Objekt zu delegieren.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-yieldasterisk.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"> yield* [[expression]];</pre> + +<dl> + <dt><code>expression</code></dt> + <dd>Der Ausdruck, der ein Iterierbares Objekt zurückgibt.</dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Das <code>yield*</code> Ausdrucksliteral iteriert über den Operanden und gibt jeden zurückgegebenen Wert zurück.</p> + +<p>Der Wert von <code>yield*</code> Ausdrücken selbst ist der Wert der vom Iterator zurückgegeben wird, wenn der geschlossen wird (z. B., wenn <code>done</code> <code>true</code> ist).</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Zu_einem_anderen_Generator_delegieren">Zu einem anderen Generator delegieren</h3> + +<p>Im folgenden Code werden Werte von <code>g1()</code> und <code>g2()</code> beim Aufruf von <code>next() </code>zurückgegeben.</p> + +<pre class="brush: js">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} +</pre> + +<h3 id="Andere_Iterable_Objekte">Andere Iterable Objekte</h3> + +<p>Neben Generatorobjekten kann <code>yield*</code> auch andere Iterable Objekte wie Arrays, Strings oder Arguments-Objekte zurückgeben.</p> + +<pre class="brush: js">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} +</pre> + +<h3 id="Der_Wert_des_yield*_Ausdrucks_selbst">Der Wert des <code>yield*</code> Ausdrucks selbst</h3> + +<p><code>yield*</code> ist ein Ausdruck, kein Statement, weshalb es zu einem Wert ausgewertet wird.</p> + +<pre class="brush: js">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" +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#', 'Yield')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#', 'Yield')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.operators.yield_star")}}</p> + +<h2 id="Firefox_spezifische_Hinweise">Firefox spezifische Hinweise</h2> + +<ul> + <li>Beginnend mit Gecko 33 {{geckoRelease(33)}}, wurde das Einlesen des yield Ausdrucks aktualisiert, um der ES2015 Spezifikation gerecht zu werden ({{bug(981599)}}): + <ul> + <li>Die Zeilenumbruchrestriktion ist jetzt Implementiert. Es ist kein Zeilenumbruch zwischen "yield" and "*" erlaubt. Code wie der folgende erzeugt einen {{jsxref("SyntaxError")}}: + <pre class="brush: js">function* foo() { + yield + *[]; +}</pre> + </li> + </ul> + </li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/JavaScript/Guide/The_Iterator_protocol">Das Iterator Protokoll</a></li> + <li>{{jsxref("Statements/function*", "function*")}}</li> + <li>{{jsxref("Operators/function*", "function* Ausdruck")}}</li> + <li>{{jsxref("Operators/yield", "yield")}}</li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Ein <strong>Zuweisungsoperator</strong> weist dem linken Operanten einen Wert auf Basis des rechten Operanten zu.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}</div> + + + +<h2 id="Überblick">Überblick</h2> + +<p>Der Basiszuweisungsoperator ist das Gleich (<code>=</code>), welches den Wert des rechten Operanten dem linken Operanten zuweist. So wird bei <code>x = y</code> der Wert von <code>y</code> <code>x</code> zugewiesen. Die anderen Zuweisungsoperatoren sind Kurzformen für Standardoperationen, wie es in den folgenden Definition und Beispielen gezeigt wird.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Name</th> + <th>Kurzformoperator</th> + <th>Bedeutung</th> + </tr> + <tr> + <td><a href="#Assignment">Zuweisung</a></td> + <td><code>x = y</code></td> + <td><code>x = y</code></td> + </tr> + <tr> + <td><a href="#Addition_assignment">Additionszuweisung</a></td> + <td><code>x += y</code></td> + <td><code>x = x + y</code></td> + </tr> + <tr> + <td><a href="#Subtraction_assignment">Subtraktionszuweisung</a></td> + <td><code>x -= y</code></td> + <td><code>x = x - y</code></td> + </tr> + <tr> + <td><a href="#Multiplication_assignment">Multiplikationszuweisung</a></td> + <td><code>x *= y</code></td> + <td><code>x = x * y</code></td> + </tr> + <tr> + <td><a href="#Division_assignment">Divisionszuweisung</a></td> + <td><code>x /= y</code></td> + <td><code>x = x / y</code></td> + </tr> + <tr> + <td><a href="#Remainder_assignment">Restzuweisung</a></td> + <td><code>x %= y</code></td> + <td><code>x = x % y</code></td> + </tr> + <tr> + <td><a href="#Exponentiation_assignment">Potenzierungszuweisung</a></td> + <td><code>x **= y</code></td> + <td><code>x = x ** y</code></td> + </tr> + <tr> + <td><a href="#Left_shift_assignment">Links verschiebende Zuweisung</a></td> + <td><code>x <<= y</code></td> + <td><code>x = x << y</code></td> + </tr> + <tr> + <td><a href="#Right_shift_assignment">Rechts verschiebende Zuweisung</a></td> + <td><code>x >>= y</code></td> + <td><code>x = x >> y</code></td> + </tr> + <tr> + <td><a href="#Unsigned_right_shift_assignment">Vorzeichenlose rechts verschiebende Zuweisung</a></td> + <td><code>x >>>= y</code></td> + <td><code>x = x >>> y</code></td> + </tr> + <tr> + <td><a href="#Bitwise_AND_assignment">Bitweise AND Zuweisung</a></td> + <td><code>x &= y</code></td> + <td><code>x = x & y</code></td> + </tr> + <tr> + <td><a href="#Bitwise_XOR_assignment">Bitweise XOR Zuweisung</a></td> + <td><code>x ^= y</code></td> + <td><code>x = x ^ y</code></td> + </tr> + <tr> + <td><a href="#Bitwise_OR_assignment">Bitweise OR Zuweisung</a></td> + <td><code>x |= y</code></td> + <td><code>x = x | y</code></td> + </tr> + </tbody> +</table> + +<h2 id="Zuweisung"><a name="Assignment">Zuweisung</a></h2> + +<p>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.</p> + +<h4 id="Syntax">Syntax</h4> + +<pre class="syntaxbox"><strong>Operator:</strong> x = y +</pre> + +<h4 id="Beispiele">Beispiele</h4> + +<pre class="brush: js">// 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 +</pre> + +<h3 id="Additionszuweisung"><a name="Addition_assignment">Additionszuweisung</a></h3> + +<p>Der Additionszuweisungsoperator <strong>addiert</strong> 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.</p> + +<h4 id="Syntax_2">Syntax</h4> + +<pre class="syntaxbox"><strong>Operator:</strong> x += y +<strong>Bedeutung:</strong> x = x + y +</pre> + +<h4 id="Beispiele_2">Beispiele</h4> + +<pre class="brush: js">// 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" +</pre> + +<h3 id="Subtraktionszuweisung"><a name="Subtraction_assignment">Subtraktionszuweisung</a></h3> + +<p>Der Subtraktionszuweisungsoperator <strong>subtahiert</strong> 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.</p> + +<h4 id="Syntax_3">Syntax</h4> + +<pre class="syntaxbox"><strong>Operator:</strong> x -= y +<strong>Bedeutung:</strong> x = x - y +</pre> + +<h4 id="Beispiele_3">Beispiele</h4> + +<pre class="brush: js">// Die folgenden Variablen werden vorausgesetzt +// bar = 5 + +bar -= 2 // 3 +bar -= 'foo' // NaN +</pre> + +<h3 id="Multiplikationszuweisung"><a name="Multiplication_assignment">Multiplikationszuweisung</a></h3> + +<p>Der Multiplikationszuweisungsoperator <strong>multipliziert</strong> 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.</p> + +<h4 id="Syntax_4">Syntax</h4> + +<pre class="syntaxbox"><strong>Operator:</strong> x *= y +<strong>Bedeutung:</strong> x = x * y +</pre> + +<h4 id="Beispiele_4">Beispiele</h4> + +<pre class="brush: js">// Die folgenden Variablen werden vorausgesetzt +// bar = 5 + +bar *= 2 // 10 +bar *= 'foo' // NaN +</pre> + +<h3 id="Divisionszuweisung"><a name="Division_assignment">Divisionszuweisung</a></h3> + +<p>Der Divisionszuweisungsoperator <strong>dividiert</strong> 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.</p> + +<h4 id="Syntax_5">Syntax</h4> + +<pre class="syntaxbox"><strong>Operator:</strong> x /= y +<strong>Bedeutung:</strong> x = x / y +</pre> + +<h4 id="Beispiele_5">Beispiele</h4> + +<pre class="brush: js">// Die folgenden Variablen werden vorausgesetzt +// bar = 5 + +bar /= 2 // 2.5 +bar /= 'foo' // NaN +bar /= 0 // Infinity +</pre> + +<h3 id="Restzuweisung"><a name="Remainder_assignment">Restzuweisung</a></h3> + +<p>Der Restzuweisungsoperator <strong>dividiert</strong> einer Variable durch den rechten Operanten und weist den <strong>Rest</strong> des Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Arithmetic_Operators", "Restoperator", "#Remainder", 1)}} für mehr Details nach.</p> + +<h4 id="Syntax_6">Syntax</h4> + +<pre class="syntaxbox"><strong>Operator:</strong> x %= y +<strong>Bedeutung:</strong> x = x % y +</pre> + +<h4 id="Beispiele_6">Beispiele</h4> + +<pre class="brush: js">// Die folgenden Variablen werden vorausgesetzt +// bar = 5 + +bar %= 2 // 1 +bar %= 'foo' // NaN +bar %= 0 // NaN +</pre> + +<h3 id="Potenzierungszuweisung"><a id="Exponentiation_assignment" name="Exponentiation_assignment">Potenzierungszuweisung</a></h3> + +<p>Der Potenzierungszuweisungsoperator <strong>potenziert</strong> 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.</p> + +<h4 id="Syntax_7">Syntax</h4> + +<pre class="syntaxbox"><strong>Operator:</strong> x **= y +<strong>Bedeutung:</strong> x = x ** y +</pre> + +<h4 id="Beispiele_7">Beispiele</h4> + +<pre class="brush: js">// Die folgenden Variablen werden vorausgesetzt +// bar = 5 + +bar **= 2 // 25 +bar **= 'foo' // NaN</pre> + +<h3 id="Links_verschiebende_Zuweisung"><a name="Left_shift_assignment">Links verschiebende Zuweisung</a></h3> + +<p>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.</p> + +<h4 id="Syntax_8">Syntax</h4> + +<pre class="syntaxbox"><strong>Operator:</strong> x <<= y +<strong>Bedeutung:</strong> x = x << y +</pre> + +<h4 id="Beispiele_8">Beispiele</h4> + +<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) +bar <<= 2; // 20 (00000000000000000000000000010100) +</pre> + +<h3 id="Rechts_verschiebende_Zuweisung"><a name="Right_shift_assignment">Rechts verschiebende Zuweisung</a></h3> + +<p>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.</p> + +<h4 id="Syntax_9">Syntax</h4> + +<pre class="syntaxbox"><strong>Operator:</strong> x >>= y +<strong>Bedeutung:</strong> x = x >> y +</pre> + +<h4 id="Beispiele_9">Beispiele</h4> + +<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) +bar >>= 2; // 1 (00000000000000000000000000000001) + +var bar -5; // (-00000000000000000000000000000101) +bar >>= 2; // -2 (-00000000000000000000000000000010) +</pre> + +<h3 id="Vorzeichenlose_rechts_verschiebende_Zuweisung"><a name="Unsigned_right_shift_assignment">Vorzeichenlose rechts verschiebende Zuweisung</a></h3> + +<p>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.</p> + +<h4 id="Syntax_10">Syntax</h4> + +<pre class="syntaxbox"><strong>Operator:</strong> x >>>= y +<strong>Bedeutung:</strong> x = x >>> y +</pre> + +<h4 id="Beispiele_10">Beispiele</h4> + +<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) +bar >>>= 2; // 1 (00000000000000000000000000000001) + +var bar = -5; // (-00000000000000000000000000000101) +bar >>>= 2; // 1073741822 (00111111111111111111111111111110)</pre> + +<h3 id="Bitweise_UND_Zuweisung"><a name="Bitwise_AND_assignment">Bitweise UND Zuweisung</a></h3> + +<p>Der bitweise UND Zuweisungsoperator nutzt die Bitrepräsentation beider Operanten, führt eine bitweises UND Operation aus und weist das Ergebnis der Variablen zu.<strong> </strong>Siehe beim {{jsxref("Operators/Bitwise_Operators", "bitweisen UND Operator", "#Bitwise_AND", 1)}} für mehr Details nach.</p> + +<h4 id="Syntax_11">Syntax</h4> + +<pre class="syntaxbox"><strong>Operator:</strong> x &= y +<strong>Bedeutung:</strong> x = x & y +</pre> + +<h4 id="Beispiele_11">Beispiele</h4> + +<pre class="brush: js">var bar = 5; +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +bar &= 2; // 0 +</pre> + +<h3 id="Bitweise_XOR_Zuweisung"><a name="Bitwise_XOR_assignment">Bitweise XOR Zuweisung</a></h3> + +<p>Der bitweise XOR Zuweisungsoperator nutzt die Bitrepräsentation beider Operanten, führt eine bitweises XOR Operation aus und weist das Ergebnis der Variablen zu.<strong> </strong>Siehe beim {{jsxref("Operators/Bitwise_Operators", "bitweisen XOR Operator", "#Bitwise_XOR", 1)}} für mehr Details nach.</p> + +<h4 id="Syntax_12">Syntax</h4> + +<pre class="syntaxbox"><strong>Operator:</strong> x ^= y +<strong>Bedeutung:</strong> x = x ^ y +</pre> + +<h4 id="Beispiele_12">Beispiele</h4> + +<pre class="brush: js">var bar = 5; +bar ^= 2; // 7 +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +// ----------------------------------- +// 7: 00000000000000000000000000000111 +</pre> + +<h3 id="Bitweise_ODER_Zuweisung"><a name="Bitwise_OR_assignment">Bitweise ODER Zuweisung</a></h3> + +<p>Der bitweise ODER Zuweisungsoperator nutzt die Bitrepräsentation beider Operanten, führt eine bitweises ODER Operation aus und weist das Ergebnis der Variablen zu.<strong> </strong>Siehe beim {{jsxref("Operators/Bitwise_Operators", "bitweisen ODER Operator", "#Bitwise_OR", 1)}} für mehr Details nach.</p> + +<h4 id="Syntax_13">Syntax</h4> + +<pre class="syntaxbox"><strong>Operator:</strong> x |= y +<strong>Bedeutung:</strong> x = x | y +</pre> + +<h4 id="Beispiele_13">Beispiele</h4> + +<pre class="brush: js">var bar = 5; +bar |= 2; // 7 +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +// ----------------------------------- +// 7: 00000000000000000000000000000111 +</pre> + +<h2 id="Beispiele_14">Beispiele</h2> + +<h3 id="Linker_Operant_mit_anderem_Zuweisungsoperator">Linker Operant mit anderem Zuweisungsoperator</h3> + +<p>In ungewöhnlichen Situationen kann ein Zuweisungsoperator (z. B. <code>x += y</code>) nicht identisch mit der äquivalenten Zuweisung (hier <code>x = x + y</code>). Wenn der linke Operant einer Zuweisung selbst eine Zuweisung enthält, wird der linke Operant nur einem ausgewertet. Zum Beispiel:</p> + +<pre class="brush: js">a[i++] += 5 // i wird einmal ausgewertet +a[i++] = a[i++] + 5 // i wird zweimal ausgewertet +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-assignment-operators', 'Assignment operators')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.13', 'Assignment operators')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.13', 'Assignment operators')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.operators.assignment")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">Arithmetische Operatoren</a></li> +</ul> |