diff options
Diffstat (limited to 'files/de/web/javascript/reference/global_objects/array')
43 files changed, 7480 insertions, 0 deletions
diff --git a/files/de/web/javascript/reference/global_objects/array/@@iterator/index.html b/files/de/web/javascript/reference/global_objects/array/@@iterator/index.html new file mode 100644 index 0000000000..790a7abcff --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/@@iterator/index.html @@ -0,0 +1,89 @@ +--- +title: 'Array.prototype[@@iterator]()' +slug: Web/JavaScript/Reference/Global_Objects/Array/@@iterator +tags: + - Array + - ECMAScript 2015 + - Iterator + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@iterator +--- +<div>{{JSRef}}</div> + +<div>Der Initialwert der <code><strong>@@iterator</strong></code> Eigenschaft ist das selbe Funktionsobjekt wie der Initialwert der {{jsxref("Array.prototype.values()", "values()")}} Eigenschaft.</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>arr</var>[Symbol.iterator]()</code></pre> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Der Initialwert für den {{jsxref("Array.prototype.values()", "values()")}} <strong>Iterator</strong>. Im Standardfall gibt <code>arr[Symbol.iterator]</code> die Funktion von {{jsxref("Array.prototype.values()", "values()")}} zurück.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Iterieren_mit_einer_for...of_Schleife">Iterieren mit einer <code>for...of</code> Schleife</h3> + +<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p']; +var eArr = arr[Symbol.iterator](); +// your browser must support for..of loop +// and let-scoped variables in for loops +for (let letter of eArr) { + console.log(letter); +} +</pre> + +<h3 id="Alternative_Iteration">Alternative Iteration</h3> + +<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p']; +var eArr = arr[Symbol.iterator](); +console.log(eArr.next().value); // w +console.log(eArr.next().value); // y +console.log(eArr.next().value); // k +console.log(eArr.next().value); // o +console.log(eArr.next().value); // p +</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-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.@@iterator")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.values()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/@@species/index.html b/files/de/web/javascript/reference/global_objects/array/@@species/index.html new file mode 100644 index 0000000000..c4de8a7978 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/@@species/index.html @@ -0,0 +1,76 @@ +--- +title: 'get Array[@@species]' +slug: Web/JavaScript/Reference/Global_Objects/Array/@@species +tags: + - Array + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@species +--- +<div>{{JSRef}}</div> + +<p>Die <code><strong>Array[@@species]</strong></code> Zugriffseigenschaft gibt den Array Konstruktor zurück.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">Array[Symbol.species] +</pre> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Der {{jsxref("Array")}} Konstruktor.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Die <code>species</code> Zugriffseigenschaft gibt den Standard-Konstruktor des <code>Array</code> Objekts zurück. Unterklassen können die Zuweisung Überschreiben, um die Konstruktorzuweisung ändern.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Die <code>species</code> Eigenschaft gibt die Standard-Konstruktor-Funktion, welches der <code>Array</code> Konstruktor für <code>Array</code> Objekte ist.</p> + +<pre class="brush: js">Array[Symbol.species]; // function Array()</pre> + +<p>In einem abgeleiteten Collection Objekt (z. B. ein benutzerdefiniertes Array <code>MyArray</code>), ist der <code>MyArray</code> der species des <code>MyArray</code> Konstruktors. Manchmal möchte man in abgeleiteten Klassenden Oberklassenkonstruktor zurückgeben. Dieses kann mit Überschreiben erreicht werden:</p> + +<pre class="brush: js">class MyArray extends Array { + // Overwrite MyArray species to the parent Array constructor + static get [Symbol.species]() { return Array; } +}</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('ES6', '#sec-get-array-@@species', 'get Array [ @@species ]')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial Definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-get-array-@@species', 'get Array [ @@species ]')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.@@species")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Symbol.species")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/@@unscopables/index.html b/files/de/web/javascript/reference/global_objects/array/@@unscopables/index.html new file mode 100644 index 0000000000..2cb4b51b11 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/@@unscopables/index.html @@ -0,0 +1,76 @@ +--- +title: 'Array.prototype[@@unscopables]' +slug: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Property + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables +--- +<div>{{JSRef}}</div> + +<p>Die <code><strong>@@unscopable</strong></code> Symbol Eigenschaft enthält Namen von Eigenschaften, welche vor der ES2015 Version nicht im ECMAScript Standard waren. Diese Eigenschaften werden bei <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code> Statement Bindungen ignoriert.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>arr</var>[Symbol.unscopables]</pre> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Der Standard Array Eigenschaften, die von den <code>with</code> Bindungen ausgenommen werden, sind: <code>copyWithin</code>, <code>entries</code>, <code>fill</code>, <code>find</code>, <code>findIndex</code>, <code>includes</code>, <code>keys</code>, und <code>values</code>.</p> + +<p>Siehe {{jsxref("Symbol.unscopables")}} für das setzten von <code>unscopables</code> für eigene Objekte</p> + +<p>{{js_property_attributes(0,0,1)}}</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Der Folgende Quelltext funktioniert in ES5 und niedriger. Jedoch wurde in ECMAScript 2015 und Später die {{jsxref("Array.prototype.keys()")}} eingeführt. Das bedeutet, dass in <code>with</code> Umgebungen "keys" jetzt eine Methode und keine Variable ist. Hier kommt die eingebaute <code>@@unscopables</code> <code>Array.prototype[@@unscopables]</code> Symboleigenschaft ins Spiel und verhindert, dass einige der Array Methoden in einer <code>with</code> Anweisung gescoped werden.</p> + +<pre class="brush: js">var keys = []; + +with (Array.prototype) { + keys.push('something'); +} + +Object.keys(Array.prototype[Symbol.unscopables]); +// ["copyWithin", "entries", "fill", "find", "findIndex", +// "includes", "keys", "values"]</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', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.@@unscopables")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Symbol.unscopables")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/concat/index.html b/files/de/web/javascript/reference/global_objects/array/concat/index.html new file mode 100644 index 0000000000..6bd46675da --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/concat/index.html @@ -0,0 +1,156 @@ +--- +title: Array.prototype.concat() +slug: Web/JavaScript/Reference/Global_Objects/Array/concat +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat +--- +<div>{{JSRef}}</div> + +<p>Die Methode <strong><code>concat()</code></strong> führt zwei oder mehr Arrays zu einem zusammen. Die Methode ändert nicht die existierenden Arrays, sondern gibt stattdessen ein neues zurück.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-concat.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <var>new_array</var> = <var>old_array</var>.concat(<var>value1</var>[, <var>value2</var>[, ...[, <var>valueN</var>]]])</pre> + +<h3 id="Parameters" name="Parameters">Parameter</h3> + +<dl> + <dt><code>value<em>N</em></code></dt> + <dd>Arrays und/oder Werte, die mit dem aktuellen zu einem neuen Array zusammenführt werden sollen.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Eine neue {{jsxref("Array")}} Instanz.</p> + +<h2 id="Description" name="Description">Beschreibung</h2> + +<p><code>concat</code> generiert ein neues Array. Dieses besteht aus den Elementen des Arrays, auf dem diese Methode aufgerufen wurde, gefolgt von dem Element oder den Elementen, die als Argument übergeben wurden.</p> + +<p>Die <code>concat </code>Methode verändert nicht das <code>this</code> Objekt oder eines der übergebenen Argumente, sondern gibt eine flache Kopie (<em>shallow copy</em>) zurück, die Kopien der Elemente in den ursprünglichen Arrays enthält. Elemente der ursprünglichen Arrays werden folgendermaßen in das neue Array kopiert:</p> + +<ul> + <li>Objektreferenzen (und nicht das eigentliche Objekt): <code>concat</code> kopiert Objektreferenzen in das neue Array. Sowohl das ursprüngliche Array als auch das neue Array zeigen auf das gleiche Objekt. Das heißt, wenn ein referiertes Objekt verändert wird, sind diese Änderungen sowohl im neuen als auch in den ursprünglichen Arrays sichtbar.</li> + <li>Zeichenketten (Strings), Zahlen und Booleane (nicht {{jsxref("Global_Objects/String", "String")}}, {{jsxref("Global_Objects/Number", "Number")}} und {{jsxref("Global_Objects/Boolean", "Boolean")}} Objekte): <code>concat</code> kopiert die Werte von Strings und Zahlen in das neue Array.</li> +</ul> + +<div class="note"> +<p><strong>Anmerkung:</strong> Die Zusammenführung von Arrays und Werten verändert die Ausgangswerte und -objekte nicht. Etwaige weitere Operationen auf dem neuen Array (nur wenn Elemente keine Objekt-Referenz sind) haben keine Auswirkungen auf die Ausgangsarrays und umgekehrt.</p> +</div> + +<h2 id="Examples" name="Examples">Beispiele</h2> + +<h3 id="Example:_Concatenating_two_arrays" name="Example:_Concatenating_two_arrays">Zusammenführen zweier Arrays</h3> + +<p>Der folgende Quellcode führt zwei Arrays zusammen:</p> + +<pre class="brush: js">var alpha = ['a', 'b', 'c'],; +var numeric = [1, 2, 3]; + +alpha.concat(numeric); +// Result: ['a', 'b', 'c', 1, 2, 3] +</pre> + +<h3 id="Example:_Concatenating_three_arrays" name="Example:_Concatenating_three_arrays">Zusammenführen von drei Arrays</h3> + +<p>Der folgende Quellcode führt drei Arrays zusammen:</p> + +<pre class="brush: js">var num1 = [1, 2, 3], + num2 = [4, 5, 6], + num3 = [7, 8, 9]; + +var nums = num1.concat(num2, num3); + +console.log(nums); +// Result: [1, 2, 3, 4, 5, 6, 7, 8, 9] +</pre> + +<h3 id="Example:_Concatenating_three_arrays" name="Example:_Concatenating_three_arrays">Zusammenführen von Werten in ein Array</h3> + +<p>Der folgende Quellcode führt drei Werte in ein Array zusammen:</p> + +<pre class="brush: js">var alpha = ['a', 'b', 'c']; + +var alphaNumeric = alpha.concat(1, [2, 3]); + +console.log(alphaNumeric); +// Result: ['a', 'b', 'c', 1, 2, 3] +</pre> + +<h3 id="Zusammenführen_von_geschachtelten_Arrays">Zusammenführen von geschachtelten Arrays</h3> + +<p>Der folgende Quellcode führt inneinander geschachtelte Array zusammen und demonstriert die Erhaltung der Referenzen:</p> + +<pre class="brush: js">var num1 = [[1]]; +var num2 = [2, [3]]; + +var nums = num1.concat(num2); + +console.log(nums); +// result in [[1], 2, [3]] + +// modify the first element of num1 +num1[0].push(4); + +console.log(nums); +// results in [[1, 4], 2, [3]]; +</pre> + +<h2 id="Specifications" name="Specifications">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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.concat")}}</p> +</div> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} — Hinzufügen/Entfernen eines Elemente am Ende des Arrays.</li> + <li>{{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} — Hinzufügen/Entfernen eines Elemente am Beginn des Arrays.</li> + <li>{{jsxref("Array.splice", "splice")}} — Hinzufügen/Entfernen eines Elemente an der angegebenen Stelle im Array.</li> + <li>{{jsxref("String.prototype.concat()")}}</li> + <li>{{jsxref("Symbol.isConcatSpreadable")}} – Kontrolle über flaches Konkatinieren.</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/copywithin/index.html b/files/de/web/javascript/reference/global_objects/array/copywithin/index.html new file mode 100644 index 0000000000..6a7e9391d6 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/copywithin/index.html @@ -0,0 +1,187 @@ +--- +title: Array.prototype.copyWithin() +slug: Web/JavaScript/Reference/Global_Objects/Array/copyWithin +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Method + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/copyWithin +--- +<div>{{JSRef}}</div> + +<p>Die <code><strong>copyWithin()</strong></code> Methode kopiert einen Teil eines Arrays in eine andere Stelle des gleichen Arrays und gibt das Array zurück, ohne die Länge des Arrays zu verändern.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-copywithin.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>arr</var>.copyWithin(<var>target</var>) +<var>arr</var>.copyWithin(<var>target</var>, <var>start) +arr</var>.copyWithin(<var>target</var>, <var>start</var>, <var>end</var>)</code></pre> + +<h3 id="Parameters" name="Parameters">Parameter</h3> + +<dl> + <dt><code>target</code></dt> + <dd>Null-Basierter Index an dem die kopierte Sequenz kopiert wird. Wenn <code>target</code> negativ ist, wird vom Ende angefangen zu zählen.</dd> + <dd>Wenn <code>target</code> glößer oder gleich <code>arr.length</code> ist, wird nicht kopiert. Wenn <code>target</code> nach <code>start</code> positioniert ist, wird die kopierte Sequenz gekürzt, um in die Länge des Arrays zu passen.</dd> + <dt><code>start</code> {{optional_inline}}</dt> + <dd>Null-Basierter Index an dem das Kopieren begonnen werden soll. Wenn <code>start</code> negativ ist, wird vom Ende angefangen zu zählen.</dd> + <dd>Wenn <code>start</code> nicht angegeben wird, nutzt <code>copyWithin</code> den Standardwert 0.</dd> + <dt><code>end</code> {{optional_inline}}</dt> + <dd>Null-Basierter Index an dem das Kopieren beendet werden soll. <code>end</code> ist exklusiv und wird deswegen nicht mitkopiert. Wenn <code>end</code> negativ ist, wird vom Ende angefangen zu zählen.</dd> + <dd>Wenn <code>end</code> nicht angegeben wird, nutzt <code>copyWithin</code> den Standardwert <code>arr.length</code>.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Das geänderte Array</p> + +<h2 id="Description" name="Description">Beschreibung</h2> + +<p><code>copyWithin</code> arbeitet wie die <code>memcpy</code> Funktion in C und C++ und ist eine hoch perfomante Methode zum Verschieben von Daten in einem {{jsxref("Array")}} oder {{jsxref("TypedArray")}}. Die Sequenz wird in einer Operation kopiert und eingefügt; Die eingefügte Sequenz wird den kopierten Wert haben, auch wenn sich die Regionen im Array überschneiden.</p> + +<p>Die <code>copyWithin</code> Funktion ist absichtlich generisch. Es wird nicht vorausgesetzt, dass <code>this</code> ein {{jsxref("Array")}} Objekt ist.</p> + +<p>Die <code>copyWithin</code> Methode ist eine veränderbare Methode. Sie ändert nichts an der Länge von <code>this</code>, aber sie ändert den Inhalt von <code>this</code> und erstellt neue Eigenschaften, wenn es notwendig ist.</p> + +<h2 id="Examples" name="Examples">Beispiele</h2> + +<pre class="brush: js">[1, 2, 3, 4, 5].copyWithin(-2); +// [1, 2, 3, 1, 2] + +[1, 2, 3, 4, 5].copyWithin(0, 3); +// [4, 5, 3, 4, 5] + +[1, 2, 3, 4, 5].copyWithin(0, 3, 4); +// [4, 2, 3, 4, 5] + +[1, 2, 3, 4, 5].copyWithin(-2, -3, -1); +// [1, 2, 3, 3, 5] + +[].copyWithin.call({length: 5, 3: 1}, 0, 3); +// {0: 1, 3: 1, length: 5} + +// ES2015 Typed-Arrays sind Unterklassen von Array +var i32a = new Int32Array([1, 2, 3, 4, 5]); + +i32a.copyWithin(0, 2); +// Int32Array [3, 4, 5, 4, 5] + +// Für Plattformen die noch nicht ES6 unterstützen: +[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4); +// Int32Array [4, 2, 3, 4, 5] +</pre> + +<h2 id="Polyfill" name="Polyfill">Polyfill</h2> + +<pre>if (!Array.prototype.copyWithin) { + Array.prototype.copyWithin = function(target, start/*, end*/) { + // Steps 1-2. + if (this == null) { + throw new TypeError('this is null or not defined'); + } + + var O = Object(this); + + // Steps 3-5. + var len = O.length >>> 0; + + // Steps 6-8. + var relativeTarget = target >> 0; + + var to = relativeTarget < 0 ? + Math.max(len + relativeTarget, 0) : + Math.min(relativeTarget, len); + + // Steps 9-11. + var relativeStart = start >> 0; + + var from = relativeStart < 0 ? + Math.max(len + relativeStart, 0) : + Math.min(relativeStart, len); + + // Steps 12-14. + var end = arguments[2]; + var relativeEnd = end === undefined ? len : end >> 0; + + var final = relativeEnd < 0 ? + Math.max(len + relativeEnd, 0) : + Math.min(relativeEnd, len); + + // Step 15. + var count = Math.min(final - from, len - to); + + // Steps 16-17. + var direction = 1; + + if (from < to && to < (from + count)) { + direction = -1; + from += count - 1; + to += count - 1; + } + + // Step 18. + while (count > 0) { + if (from in O) { + O[to] = O[from]; + } else { + delete O[to]; + } + + from += direction; + to += direction; + count--; + } + + // Step 19. + return O; + }; +}</pre> + +<h2 id="Specifications" name="Specifications">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-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.copyWithin")}}</p> +</div> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/entries/index.html b/files/de/web/javascript/reference/global_objects/array/entries/index.html new file mode 100644 index 0000000000..2bd4fb9942 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/entries/index.html @@ -0,0 +1,84 @@ +--- +title: Array.prototype.entries() +slug: Web/JavaScript/Reference/Global_Objects/Array/entries +tags: + - Array + - ECMAScript 2015 + - Iterator + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries +--- +<div>{{JSRef}}</div> + +<p>Die <code><strong>entries()</strong></code> Methode gibt ein neues <code><strong>Array Iterator</strong></code> Objekt zurück, das Schlüssel-Wert-Paare für jeden Index im Array enthält.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-entries.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>arr</var>.entries()</code></pre> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein neues {{jsxref("Array")}}-iterator Objekt.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Einsatz_einer_for…of_Schleife">Einsatz einer <a href="/de/docs/Web/JavaScript/Reference/Statements/for...of">for…of</a> Schleife</h3> + +<pre class="brush:js">var a = ['a', 'b', 'c']; +var iterator = a.entries(); + +for (let e of iterator) { + console.log(e); +} +// [0, 'a'] +// [1, 'b'] +// [2, 'c'] +</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('ES6', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.entries")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.values()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li><a href="/de/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></li> + <li><a href="/de/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/every/index.html b/files/de/web/javascript/reference/global_objects/array/every/index.html new file mode 100644 index 0000000000..a29a0e4e0c --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/every/index.html @@ -0,0 +1,195 @@ +--- +title: Array.prototype.every() +slug: Web/JavaScript/Reference/Global_Objects/Array/every +tags: + - Array + - ECMAScript 5 + - JavaScript + - Method + - Prototype + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/every +--- +<div>{{JSRef}}</div> + +<p>Die <code><strong>every()</strong></code> Methode testet ob alle Elemente in einem Array einen Test bestehen, welcher mittels einer implementierten Funktion bereitgestellt wird.</p> + +<div class="note"> +<p>Hinweis: Diese Methode gibt <code>true</code> für jede Bedingung bei einem leeren Array zurück.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/array-every.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>arr</var>.every(<var>callback</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Funktion welche jedes Element testet, mit drei Argumenten: + <dl> + <dt><code>currentValue</code> (required)</dt> + <dd>Der aktuelle Wert des Arrays.</dd> + <dt><code>index</code>{{Optional_inline}}</dt> + <dd>Der Index des aktuellen Elementes im Array.</dd> + <dt><code>array</code>{{Optional_inline}}</dt> + <dd>Das Array auf welchem <code>every</code> aufgerufen wurde.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{Optional_inline}}</dt> + <dd>Optional. Wert welcher als <code>this</code> in der <code>callback </code> Funktion benutzt wird.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p><code><strong>true</strong></code> wenn die callback-Funktion einen {{Glossary("truthy")}} Wert für jedes Array-Element zurückgibt, andernfalls <code><strong>false</strong></code>.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Die <code>every</code> Methode führt die übergebene <code>callback</code> Funktion für jedes Element in dem Array aus, solange die <code>callback</code> Funktion keinen {{Glossary("falsy")}} Wert zurückgibt. Wenn ein solches Element gefunden wird gibt die <code>every</code> Methode <code>false</code> zurück. Anderfalls, wenn<code> callback</code> für jedes Element einen {{Glossary("truthy")}} Wert zurück gibt, gibt die Funktion <code>every</code> <code>true</code> zurück. Die <code>callback</code> Funktion wird nur für Indizes im Array aufgerufen, denen ein Wert zugewiesen wurde; sie wird nicht aufgerufen für Indizes, die gelöscht wurden, oder welche, die nie beschrieben wurden.</p> + +<p>Die <code>callback</code> Funktion wird mit drei Argumenten aufgerufen: Der Wert eines Elements, der Index des Elements und Array auf dem <code>every</code> aufgerufen wurde.</p> + +<p>Wenn der <code>thisArg</code> Parameter von <code>every</code> angegeben wird, wird auf diesem Objekt die <code>callback</code> Funktion aufgerufen und dieses Objekt kann mit <code>this</code> aufgerufen werden. Anderfalls wird der Wert <code>undefined</code> für den Einsatz von <code>this</code> übergeben. Der <code>this</code> Wert ist nur in der <code>callback</code> Funktion verfügbar und wird nach den <a href="/de/docs/Web/JavaScript/Reference/Operators/this">normalen Regeln für das ermitteln von this</a> für die Funktion ermittelt.</p> + +<p>Die <code>every</code> Funktion verändert nicht die Werte des Arrays, auf dem sie aufgerufen wird.</p> + +<p>Die Anzahl der von <code>every</code> abzuarbeitenden Elemente wird vor dem ersten Aufruf von <code>callback</code> ermittelt. Elemente welche nach dem Aufruf von <code>every</code> angehängt werden, werden nicht von der <code>callback</code> Funktion besucht. Wenn existierende Element eines Arrays geändert werden, wird der <code>callback</code> Funktion der Wert übergeben, der zu dem Zeitpunkt des Aufrufens von <code>callback</code> im Array steht. Werte die gelöscht werden, werden nicht besucht.</p> + +<p><code>every</code> Arbeitet wie ein <a href="https://de.wikipedia.org/wiki/Quantor#Existenz-_und_Allquantor">Allquantor</a> in der Mathematik. Wenn das Array leer ist, gibt er <code>true</code> zurück. (Es ist wahr, dass alle Elemente einer <a href="https://de.wikipedia.org/wiki/Leere_Menge">leeren Menge</a> immer alle Bedingungen erfüllen.)</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Größe_aller_Arrayelemente_abprüfen">Größe aller Arrayelemente abprüfen</h3> + +<p>Das folgende Beispiel testet, ob alle Elemente in einem Array größer oder gleich 10 sind.</p> + +<pre class="brush: js">function isBigEnough(element, index, array) { + return element >= 10; +} +[12, 5, 8, 130, 44].every(isBigEnough); // false +[12, 54, 18, 130, 44].every(isBigEnough); // true +</pre> + +<h3 id="Einsatz_von_arrow_Funktionen">Einsatz von arrow Funktionen</h3> + +<p><a href="/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow Funktionen</a> unterstützen eine kürzere Syntax für den gleichen Test.</p> + +<pre class="brush: js">[12, 5, 8, 130, 44].every(elem => elem >= 10); // false +[12, 54, 18, 130, 44].every(elem => elem >= 10); // true</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>every</code> wurde im ECMA-262 Standard in der 5. Auflage hinzugefügt. Es kann sein, dass diese Funktion in anderer Implementierungen des Standards nicht vorkommt. Man dieses beheben, indem man den folgenden Quelltext an den Anfang eines Programms hinzufügt. Dadurch wird die <code>every</code> Funktion dort hinzugefügt, wo sie nicht nativ unterstützt wird. Der Algorithmus ist exakt der aus der 5. Auflage des ECMA-262 Standards, mit der Voraussetzung, dass <code>Object</code> und <code>TypeError</code> ihre originalen Werte haben und dass <code>callbackfn.call</code> die originale Funktion {{jsxref("Function.prototype.call")}} aufrufen kann.</p> + +<pre class="brush: js">if (!Array.prototype.every) { + Array.prototype.every = function(callbackfn, thisArg) { + 'use strict'; + var T, k; + + if (this == null) { + throw new TypeError('this is null or not defined'); + } + + // 1. Let O be the result of calling ToObject passing the this + // value as the argument. + var O = Object(this); + + // 2. Let lenValue be the result of calling the Get internal method + // of O with the argument "length". + // 3. Let len be ToUint32(lenValue). + var len = O.length >>> 0; + + // 4. If IsCallable(callbackfn) is false, throw a TypeError exception. + if (typeof callbackfn !== 'function') { + throw new TypeError(); + } + + // 5. If thisArg was supplied, let T be thisArg; else let T be undefined. + if (arguments.length > 1) { + T = thisArg; + } + + // 6. Let k be 0. + k = 0; + + // 7. Repeat, while k < len + while (k < len) { + + var kValue; + + // a. Let Pk be ToString(k). + // This is implicit for LHS operands of the in operator + // b. Let kPresent be the result of calling the HasProperty internal + // method of O with argument Pk. + // This step can be combined with c + // c. If kPresent is true, then + if (k in O) { + + // i. Let kValue be the result of calling the Get internal method + // of O with argument Pk. + kValue = O[k]; + + // ii. Let testResult be the result of calling the Call internal method + // of callbackfn with T as the this value and argument list + // containing kValue, k, and O. + var testResult = callbackfn.call(T, kValue, k, O); + + // iii. If ToBoolean(testResult) is false, return false. + if (!testResult) { + return false; + } + } + k++; + } + return 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('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.every")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("TypedArray.prototype.every()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/fill/index.html b/files/de/web/javascript/reference/global_objects/array/fill/index.html new file mode 100644 index 0000000000..5f4821e986 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/fill/index.html @@ -0,0 +1,155 @@ +--- +title: Array.prototype.fill() +slug: Web/JavaScript/Reference/Global_Objects/Array/fill +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Method + - Prototype + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill +--- +<div>{{JSRef}}</div> + +<p>Die <code><strong>fill()</strong></code> Methode befüllt ein Array mit einem statischen Wert von einem Startindex bis zu einem Endindex. Der Endindex wird nicht mit eingeschlossen.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-fill.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>arr</var>.fill(<var>value</var>[, <var>start<var>[, <var>end</var>]])</var></var></code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>value</code></dt> + <dd>Wert, mit dem ein Array gefüllt werden soll.</dd> + <dt><code>start</code> {{optional_inline}}</dt> + <dd>Startindex, Standardwert ist 0.</dd> + <dt><code>end</code> {{optional_inline}}</dt> + <dd>Endindex, Standardwert ist <code>this.length</code>.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Das geänderte Array.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Die <strong><code>fill</code></strong> Methode nimmt bis zu drei Argumente entgegen: <code>value</code>, <code>start</code> und <code>end</code>. Die Argumente <code>start</code> und <code>end</code> sind optional und haben als Standardwert 0 und <code>length</code> des <code>this</code> Objektes.</p> + +<p>Wenn <code>start</code> negativ ist, wird stattdessen <code>length+start</code> benutzt, wobei <code>length</code> die Länge des Arrays ist. Wenn <code>end</code> negativ ist, wird stattdessen <code>length+end</code> benutzt.</p> + +<p>Die <code><strong>fill</strong></code> Funktion ist absichtlich generisch. Es ist nicht nötig, dass der <code>this</code> Wert ein Array Objekt ist.</p> + +<p>Die <code><strong>fill</strong></code> Methode ist eine verändernde Methode. Sie verändert das <code>this</code> Objekt selbst und gibt dieses zurück. Sie erstellt keine Kopie des Objektes.</p> + +<p>Wenn der <code><strong>fill</strong></code> Methode ein Objekt übergeben wird, wird das Objekt kopiert und die Referenz der Kopie wird im Array eingesetzt.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: js">[1, 2, 3].fill(4); // [4, 4, 4] +[1, 2, 3].fill(4, 1); // [1, 4, 4] +[1, 2, 3].fill(4, 1, 2); // [1, 4, 3] +[1, 2, 3].fill(4, 1, 1); // [1, 2, 3] +[1, 2, 3].fill(4, 3, 3); // [1, 2, 3] +[1, 2, 3].fill(4, -3, -2); // [4, 2, 3] +[1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3] +[1, 2, 3].fill(4, 3, 5); // [1, 2, 3] +Array(3).fill(4); // [4, 4, 4] +[].fill.call({ length: 3 }, 4); // {0: 4, 1: 4, 2: 4, length: 3} + +// Objects by reference. +var arr = Array(3).fill({}) // [{}, {}, {}]; +arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }] +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">if (!Array.prototype.fill) { + Object.defineProperty(Array.prototype, 'fill', { + value: function(value) { + + // Steps 1-2. + if (this == null) { + throw new TypeError('this is null or not defined'); + } + + var O = Object(this); + + // Steps 3-5. + var len = O.length >>> 0; + + // Steps 6-7. + var start = arguments[1]; + var relativeStart = start >> 0; + + // Step 8. + var k = relativeStart < 0 ? + Math.max(len + relativeStart, 0) : + Math.min(relativeStart, len); + + // Steps 9-10. + var end = arguments[2]; + var relativeEnd = end === undefined ? + len : end >> 0; + + // Step 11. + var final = relativeEnd < 0 ? + Math.max(len + relativeEnd, 0) : + Math.min(relativeEnd, len); + + // Step 12. + while (k < final) { + O[k] = value; + k++; + } + + // Step 13. + return O; + } + }); +} +</pre> + +<p>Wenn es wirklich notwendig ist veraltete JavaScript-Umgebungen zu unterstützen, die <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code> nicht unterstützen, ist es meistens besser Methoden von <code>Array.prototype</code> nicht mit einem Polyfill zu unterstützen, weil sie nicht als nicht-aufzählbar eingestellt werden können.</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-array.prototype.fill', 'Array.prototype.fill')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.fill")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("TypedArray.prototype.fill()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/filter/index.html b/files/de/web/javascript/reference/global_objects/array/filter/index.html new file mode 100644 index 0000000000..6f1ee08498 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/filter/index.html @@ -0,0 +1,235 @@ +--- +title: Array.prototype.filter() +slug: Web/JavaScript/Reference/Global_Objects/Array/filter +tags: + - Array + - ECMAScript 5 + - JavaScript + - Method + - Prototype + - Reference + - filter + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter +--- +<div>{{JSRef}}</div> + +<p><code>filter()</code> erstellt ein neues Array mit allen Elementen, die den von der bereitgestellten Funktion implementierten Test bestehen.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-filter.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate"><var>let newArray = arr</var>.filter(<var>callback(element[, index[, array]])</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Eine Funktion, um jedes Element des Arrays zu testen. Die Funktion gibt <code>true</code> zurück, um das Element zu behalten, ansonsten <code>false</code>.</dd> + <dd> + <dl> + <dt><code>element</code></dt> + <dd>Das aktuell zu testende Element aus dem Array.</dd> + <dt><code>index</code> {{optional_inline}}</dt> + <dd>Der Index des aktuell zu testenden Elements aus dem Array.</dd> + <dt><code>array</code> {{optional_inline}}</dt> + <dd>Das Array auf welchem <code>filter</code> aufgerufen wurde.</dd> + </dl> + </dd> + <dt><code>thisArg</code> {{optional_inline}}</dt> + <dd>Wert, der als <code>this</code> innerhalb der Funktion genutzt wird.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein neues Array mit den Elementen, die den Test bestanden haben. Wenn kein Element den Test besteht, wird ein leeres Array zurückgegeben.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p><code>filter()</code> ruft eine bereitgestellte <code>callback</code>-Funktion einmal für jedes Element in einem Array auf und erstellt ein neues Array aller Werte, für die <code>callback</code> einen Wert zurückgibt <a href="/de/docs/Glossary/Truthy">der umgewandelt <code>true</code> ergibt</a>. <code>callback</code> wird nur für Indizes des Arrays aufgerufen, denen Werte zugewiesen wurden. Es wird nicht für Indizes aufgerufen, die gelöscht oder denen nie Werte zugewiesen wurden. Array-Elemente, die den Test in <code>callback</code> nicht bestehen, werden einfach übersprungen und sind im neuen Array nicht enthalten.</p> + +<p><code>callback</code> wird mit drei Argumenten aufgerufen:</p> + +<ol> + <li>Der Wert des Elements</li> + <li>Der Index des Elements</li> + <li>Das Array-Objekt, das durchlaufen wird</li> +</ol> + +<p>Falls der Parameter <code>thisArg</code> an <code>filter</code> übergeben wird, wird er als Wert für <code>this</code> innerhalb von <code>callback</code> verwendet. Andernfalls hat <code>this</code> den Wert {{jsxref("undefined")}}. Welchen Wert <code>callback</code> letztendlich in <code>this</code> sieht wird gemäß <a href="/de/docs/Web/JavaScript/Reference/Operators/this">der üblichen Regeln bestimmt, nach denen <code>this</code> für eine Funktion ermittelt wird</a>.</p> + +<p><code>filter()</code> selbst verändert das Array nicht, auf dem es aufgerufen wird.</p> + +<p>Der Bereich der von <code>filter()</code> verarbeiteten Elemente wird vor dem ersten Aufruf von <code>callback</code> festgelegt. Elemente, die nach Beginn des Aufrufs von <code>filter()</code> an das Array angehängt werden, werden von <code>callback</code> nicht berücksichtigt. Wenn vorhandene Elemente des Arrays geändert werden, ist der Wert maßgeblich, den <code>filter()</code> beim Erreichen eines Elements antrifft und dann an <code>callback</code> übergibt. Nachfolgende Elemente, die nach Beginn eines Durchlaufs von <code>filter()</code> gelöscht werden, bevor sie eingelesen werden konnten, werden nicht mehr berücksichtigt.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Alle_kleinen_Werte_herausfiltern">Alle kleinen Werte herausfiltern</h3> + +<p>Das folgende Beispiel nutzt <code>filter()</code>, um ein gefiltertes Array zu erstellen, aus dem alle Element mit Werten kleiner als 10 entfernt werden.</p> + +<pre class="brush: js notranslate">function isBigEnough(value) { + return value >= 10; +} + +let filtered = [12, 5, 8, 130, 44].filter(isBigEnough); +// filtered is [12, 130, 44] +</pre> + +<h3 id="Filtern_von_ungültigen_Werten_aus_JSON">Filtern von ungültigen Werten aus JSON</h3> + +<p>Das folgende Beispiel nutzt <code>filter()</code>, um ein gefiltertes JSON zu erstellen, in welchem alle Elemente mit numerischer <code>id</code> ungleich null sind.</p> + +<pre class="brush: js notranslate">let arr = [ + { id: 15 }, + { id: -1 }, + { id: 0 }, + { id: 3 }, + { id: 12.2 }, + { }, + { id: null }, + { id: NaN }, + { id: 'undefined' } +]; + +let invalidEntries = 0; + +function isNumber(obj) { + return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj); +} + +function filterByID(obj) { + if (isNumber(obj.id) && obj.id !== 0) { + return true; + } + invalidEntries++; + return false; +} + +let arrByID = arr.filter(filterByID); + +console.log('Filtered Array\n', arrByID); +// Filtered Array +// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }] + +console.log('Number of Invalid Entries = ', invalidEntries); +// <span class="diff_add">Number of Invalid Entries = 5</span> +</pre> + +<h3 id="Suchen_in_Arrays">Suchen in Arrays</h3> + +<p>Das folgende Beispiel nutzt <code>filter()</code>, um ein Array gemäß eines Suchkriterius zu filtern.</p> + +<pre class="brush: js notranslate">let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']; + +/** + * Filter array items based on search criteria (query) + */ +function filterItems(arr, query) { + return arr.filter(function(el) { + return el.toLowerCase().indexOf(query.toLowerCase()) > -1; + }) +} + +console.log(filterItems(fruits, 'ap')); // ['apple', 'grapes'] +console.log(filterItems(fruits, 'an')); // ['banana', 'mango', 'orange']</pre> + +<h4 id="ES2015_Implementierung">ES2015 Implementierung</h4> + +<pre class="brush: js notranslate">const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']; + +/** + * Filter array items based on search criteria (query) + */ +const filterItems = (arr, query) => { + return arr.filter(el => el.toLowerCase().indexOf(query.toLowerCase()) > -1); +}; + +console.log(filterItems(fruits, 'ap')); // ['apple', 'grapes'] +console.log(filterItems(fruits, 'an')); // ['banana', 'mango', 'orange']</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>filter()</code> wurde dem ECMA-262-Standard in der 5. Auflage hinzugefügt. Als solches ist es möglicherweise nicht in allen Implementierungen des Standards enthalten. Sie können dies umgehen, indem Sie den folgenden Code am Anfang Ihrer Skripte einfügen, um die Verwendung von <code>filter()</code> in Implementierungen zu ermöglichen, die es nicht nativ unterstützen. Dieser Algorithmus entspricht dem in der 5. Auflage von ECMA-262 angegebenen Algorithmus, vorausgesetzt dass <code>callback.call()</code> mit dem ursprünglichen Wert von {{jsxref("Function.prototype.call()")}} auswertet wird und {{jsxref("Array.prototype.push()")}} seinen ursprünglichen Wert hat.</p> + +<pre class="brush: js notranslate">if (!Array.prototype.filter) { + Array.prototype.filter = function(func, thisArg) { + 'use strict'; + if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) ) + throw new TypeError(); + + let len = this.length >>> 0, + res = new Array(len), // preallocate array + t = this, c = 0, i = -1; + if (thisArg === undefined) { + while (++i !== len){ + // checks to see if the key was set + if (i in this){ + if (func(t[i], i, t)){ + res[c++] = t[i]; + } + } + } + } + else{ + while (++i !== len){ + // checks to see if the key was set + if (i in this){ + if (func.call(thisArg, t[i], i, t)){ + res[c++] = t[i]; + } + } + } + } + + res.length = c; // shrink down array to proper size + return res; + }; +}</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('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.filter")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/find/index.html b/files/de/web/javascript/reference/global_objects/array/find/index.html new file mode 100644 index 0000000000..2741360a67 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/find/index.html @@ -0,0 +1,243 @@ +--- +title: Array.prototype.find() +slug: Web/JavaScript/Reference/Global_Objects/Array/find +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Method + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/find +--- +<div>{{JSRef}}</div> + +<p>Die Methode <code><strong>find()</strong></code> gibt den <strong>Wert</strong> des Elements eines Arrays zurück, welches <strong>als erstes</strong> die Bedingung einer bereitgestellten Testfunktion erfüllt. Andernfalls wird {{jsxref("undefined")}} zurückgegeben.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-find.html")}}</div> + + + +<p>Siehe auch die Methode {{jsxref("Array.prototype.findIndex()", "findIndex()")}}, die den <strong>Index</strong> eines gefundenen Elements im Array anstelle seines Werts zurückgibt.</p> + +<p>Wenn Sie die Position eines Elements ermitteln oder feststellen müssen, ob ein Element in einem Array vorhanden ist, verwenden Sie {{jsxref("Array.prototype.indexOf()", "indexOf()")}} oder {{jsxref("Array.prototype.includes()", "includes()")}}.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>arr</var>.find(callback<var>[, thisArg]</var>)</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Funktion, die auf jedes Element angewendet wird mit drei Argumenten: + <dl> + <dt><code>element</code></dt> + <dd>Das aktuelle Element, das im Array verarbeitet wird.</dd> + <dt><code>index</code> {{optional_inline}}</dt> + <dd>Der Index des aktuellen Elements im Array.</dd> + <dt><code>array</code> {{optional_inline}}</dt> + <dd>Das Array, welches mit <code>find()</code> durlaufen wird.</dd> + </dl> + </dd> + <dt><code>thisArg</code> {{optional_inline}}</dt> + <dd>Wert der als <code>this</code> verwendet wird, wenn <code>callback</code> ausgeführt wird.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Der <strong>Wert</strong> des Elements, welches <strong>als erstes</strong> die Bedingung der bereitgestellten Testfunktion erfüllt. Andernfalls wird {{jsxref("undefined")}} zurückgegeben.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p><code>find()</code> führt die <code>callback</code>-Funktion einmal für jeden Index des Arrays aus, bis ein Index gefunden wird, in dem <code>callback</code> einen {{Glossary("truthy")}}-Wert zurückgibt. Wenn ein solches Element gefunden wird, gibt <code>find()</code> sofort den Wert dieses Elements zurück, {{jsxref("undefined")}}. <code>callback</code> wird für jeden Index des Arrays von <code>0</code> bis <code>length - 1</code> aufgerufen und nicht nur für Indizes, denen Werte zugewiesen wurden. Dies kann bedeuten, dass es für Arrays mit Leerstellen weniger effizient ist als andere Methoden, die nur Indizes durchlaufen, denen ein Wert zugewiesen wurde.</p> + +<p><code>callback</code> wird mit drei Argumenten aufgerufen:</p> + +<ol> + <li>Der Wert des Elements</li> + <li>Der Index des Elements</li> + <li>Das Array-Objekt, das durchlaufen wird</li> +</ol> + +<p> </p> + +<p>Falls der Parameter <code>thisArg</code> an <code>find()</code> übergeben wird, wird er als Wert für <code>this</code> innerhalb von <code>callback</code> verwendet. Andernfalls hat <code>this</code> den Wert {{jsxref("undefined")}}. Welchen Wert <code>callback</code> letztendlich in <code>this</code> sieht wird gemäß <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/this">der üblichen Regeln bestimmt, nach denen <code>this</code> für eine Funktion ermittelt wird</a>.</p> + +<p><code>find()</code> selbst verändert das Array nicht, auf dem es aufgerufen wird.</p> + +<p>Der Bereich der von <code>find()</code> verarbeiteten Elemente wird vor dem ersten Aufruf von <code>callback</code> festgelegt. Elemente, die nach Beginn des Aufrufs von <code> find()</code> an das Array angehängt werden, werden von <code>callback</code> nicht berücksichtigt. Wenn vorhandene Elemente des Arrays geändert werden, ist der Wert maßgeblich, den <code>find()</code> beim Erreichen eines Elements antrifft und dann an <code>callback</code> übergibt. <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/delete">Gelöschte</a> Elemente werden weiterhin verarbeitet.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Ermitteln_eines_Objekts_innerhalb_eines_Arrays_anhand_eines_seiner_Eigenschaften">Ermitteln eines Objekts innerhalb eines Arrays anhand eines seiner Eigenschaften</h3> + +<pre class="brush: js">var inventory = [ + {name: 'apples', quantity: 2}, + {name: 'bananas', quantity: 0}, + {name: 'cherries', quantity: 5} +]; + +function isCherries(fruit) { + return fruit.name === 'cherries'; +} + +console.log(inventory.find(isCherries)); +// { name: 'cherries', quantity: 5 }</pre> + +<h4 id="Benutzung_einer_ES2015_Pfeilfunktion">Benutzung einer ES2015 Pfeilfunktion</h4> + +<pre class="brush: js">const inventory = [ + {name: 'apples', quantity: 2}, + {name: 'bananas', quantity: 0}, + {name: 'cherries', quantity: 5} +]; + +const result = inventory.find( fruit => fruit.name === 'cherries' ); + +console.log(result) // { name: 'cherries', quantity: 5 }</pre> + +<h3 id="Ermitteln_einer_Primzahl_innerhalb_eines_Arrays">Ermitteln einer Primzahl innerhalb eines Arrays</h3> + +<p>Im folgenden Beispiel wird ein Element im Array ermittelt, das eine Primzahl ist (oder {{jsxref("undefined")}} zurückgibt, wenn keine Primzahl vorhanden ist).</p> + +<pre class="brush: js">function isPrime(element, index, array) { + var start = 2; + while (start <= Math.sqrt(element)) { + if (element % start++ < 1) { + return false; + } + } + return element > 1; +} + +console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found +console.log([4, 5, 8, 12].find(isPrime)); // 5 +</pre> + +<p>Das folgende Beispiel zeigt, dass nicht vorhandene und gelöschte Elemente durchlaufen werden und der Wert maßgeblich ist, der beim Erreichen des Elements angetroffen und an <code>callback</code> übergeben wird.</p> + +<pre class="brush: js">// Array deklarieren, das an Index 2, 3 und 4 keine Elemente hat +var array = [0,1,,,,5,6]; + +// Zeige alle Indizes, nicht nur die denen Werte zugewiesen wurden +array.find(function(value, index) { + console.log('Visited index ' + index + ' with value ' + value); +}); + +// Zeige alle Indizes, inklusive gelöschter +array.find(function(value, index) { + + // Lösche Element 5 in erstem Durchlauf + if (index == 0) { + console.log('Deleting array[5] with value ' + array[5]); + delete array[5]; + } + // Element 5 wird weiterhin durchlaufen, obwohl es gelöscht wurde + console.log('Visited index ' + index + ' with value ' + value); +}); +// Erwartete Ausgaben: +// Deleting array[5] with value 5 +// Visited index 0 with value 0 +// Visited index 1 with value 1 +// Visited index 2 with value undefined +// Visited index 3 with value undefined +// Visited index 4 with value undefined +// Visited index 5 with value undefined +// Visited index 6 with value 6 +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Diese Methode wurde der ECMAScript 2015-Spezifikation hinzugefügt und ist möglicherweise noch nicht in allen JavaScript-Implementierungen verfügbar. Sie können <code>Array.prototype.find()</code> jedoch mit dem folgenden Snippet nachrüsten:</p> + +<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.find +if (!Array.prototype.find) { + Object.defineProperty(Array.prototype, 'find', { + value: function(predicate) { + // 1. Let O be ? ToObject(this value). + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var o = Object(this); + + // 2. Let len be ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // 3. If IsCallable(predicate) is false, throw a TypeError exception. + if (typeof predicate !== 'function') { + throw new TypeError('predicate must be a function'); + } + + // 4. If thisArg was supplied, let T be thisArg; else let T be undefined. + var thisArg = arguments[1]; + + // 5. Let k be 0. + var k = 0; + + // 6. Repeat, while k < len + while (k < len) { + // a. Let Pk be ! ToString(k). + // b. Let kValue be ? Get(O, Pk). + // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)). + // d. If testResult is true, return kValue. + var kValue = o[k]; + if (predicate.call(thisArg, kValue, k, o)) { + return kValue; + } + // e. Increase k by 1. + k++; + } + + // 7. Return undefined. + return undefined; + }, + configurable: true, + writable: true + }); +} +</pre> + +<p>Wenn Sie stark veraltete JavaScript-Engines unterstützen müssen, die {{jsxref("Object.defineProperty()")}} nicht unterstützen, empfiehlt es sich Methoden aus <code>Array.prototype</code> gar nicht mit Polyfills nachzubauen, da es nicht möglich ist sie als nicht-enumerierbar zu kennzeichnen.</p> + +<h2 id="Specifikationen">Specifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.find', 'Array.prototype.find')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.find")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> + <li>{{jsxref("Array.prototype.includes()")}}</li> + <li>{{jsxref("Array.prototype.filter()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/findindex/index.html b/files/de/web/javascript/reference/global_objects/array/findindex/index.html new file mode 100644 index 0000000000..904ff025fc --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/findindex/index.html @@ -0,0 +1,189 @@ +--- +title: Array.prototype.findIndex() +slug: Web/JavaScript/Reference/Global_Objects/Array/findIndex +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Method + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Die Methode <code><strong>findIndex()</strong></code> gibt den <strong>Index</strong> des ersten Elements im Array zurück, <strong>das die bereitgestellte Testfunktion erfüllt.</strong> Andernfalls wird -1 zurückgegeben, um anzuzeigen, dass kein Element den Test bestanden hat.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/array-findindex.html")}}</div> + + + +<p>Siehe auch die Methode {{jsxref("Array.find", "find()")}}, die den Wert eines Arrayelements anstelle dessen Index zurückgibt.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>arr</var>.findIndex(callback(element<var>[, index[, array]]</var>)<var>[, thisArg]</var>)</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Eine Funktion, die für jeden Wert im Array ausgeführt wird, bis sie <code>true</code> zurückgibt, um anzuzeigen, dass das gewünschte Element gefunden wurde. Sie akzeptiert 3 Argumente: + <dl> + <dt><code>element</code></dt> + <dd>Das aktuelle Element, das im Array verarbeitet wird.</dd> + <dt><code>index</code> {{optional_inline}}</dt> + <dd>Der Index des aktuellen Elements, das im Array verarbeitet wird.</dd> + <dt><code>array</code> {{optional_inline}}</dt> + <dd>Das Array, welches mit <code>findIndex()</code> durchlaufen wird.</dd> + </dl> + </dd> + <dt><code>thisArg</code> {{optional_inline}}</dt> + <dd>Wert der als <code>this</code> verwendet wird, wenn <code>callback</code> ausgeführt wird</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein Index im Array, wenn ein Element den Test besteht, ansonsten <strong>-1.</strong></p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p><code>findIndex()</code> ruft eine bereitgestellte <code>callback</code>-Funktion einmal für jeden Array-Index <code>0..length-1</code> (inklusive) im Array auf bis <code>callback</code> einen {{Glossary("truthy")}}-Wert findet.</p> + +<p>Wird ein solches Element gefunden gibt <code>findIndex()</code> sofort den Index des gefundenen Elements zurück. Gibt callback nie einen {{Glossary("truthy")}}-Wert zurück oder ist <code>length</code> gleich 0 gibt <code>findIndex()</code> -1 zurück. Im Gegensatz zu einigen anderen Array-Methoden wie {{jsxref("Array.prototype.some()", "some()")}} wird in Arrays mit Leerstellen <code>callback</code> <strong>auch für</strong> Indizes aufgerufen, die keinen Inhalt haben.</p> + +<p><code>callback</code> wird mit drei Argumenten aufgerufen:</p> + +<ol> + <li>Der Wert des Elements</li> + <li>Der Index des Elements</li> + <li>Das Array-Objekt, das durchlaufen wird</li> +</ol> + +<p>Falls der Parameter <code>thisArg</code> an <code>findIndex()</code> übergeben wird, wird er als Wert für <code>this</code> innerhalb von <code>callback</code> verwendet. Andernfalls hat <code>this</code> den Wert {{jsxref("undefined")}}. Welchen Wert <code>callback</code> letztendlich in <code>this</code> sieht wird gemäß <a href="/de/docs/Web/JavaScript/Reference/Operators/this">der üblichen Regeln bestimmt, nach denen <code>this</code> für eine Funktion ermittelt wird</a>.</p> + +<p>Der Bereich der von <code>findIndex()</code> verarbeiteten Elemente wird vor dem ersten Aufruf von <code>callback</code> festgelegt. Elemente, die nach Beginn des Aufrufs von <code> findIndex()</code> an das Array angehängt werden, werden von <code>callback</code> nicht berücksichtigt. Wenn vorhandene Elemente des Arrays geändert werden, ist der Wert maßgeblich, den <code>findIndex()</code> beim Erreichen eines Elements antrifft und dann an <code>callback</code> übergibt. <a href="/de/docs/Web/JavaScript/Reference/Operators/delete">Gelöschte</a> Elemente werden weiterhin verarbeitet.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Index_einer_Primzahl_in_einem_Array_finden">Index einer Primzahl in einem Array finden</h3> + +<p>Das folgende Beispiel gibt den Index eines Elements im Array zurück, das eine Primzahl ist, oder -1, wenn keine Primzahl vorhanden ist.</p> + +<pre class="brush: js">function isPrime(element, index, array) { + var start = 2; + while (start <= Math.sqrt(element)) { + if (element % start < 1) { + return false; + } else { + start++; + } + } + return element > 1; +} + +console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found +console.log([4, 6, 7, 12].findIndex(isPrime)); // 2 (array[2] is 7) +</pre> + +<h3 id="Index_mithilfe_einer_Pfeilfunktion_ermitteln">Index mithilfe einer Pfeilfunktion ermitteln</h3> + +<p>Im folgenden Beispiel wird der Index einer Frucht mithilfe einer Pfeilfunktion ermittelt:</p> + +<pre class="brush: js">const fruits = ["apple", "banana", "cantaloupe", "blueberries", "grapefruit"]; + +const index = fruits.findIndex(fruit => fruit === "blueberries"); + +console.log(index); // 3 +console.log(fruits[index]); // blueberries +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.findindex +if (!Array.prototype.findIndex) { + Object.defineProperty(Array.prototype, 'findIndex', { + value: function(predicate) { + // 1. Let O be ? ToObject(this value). + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var o = Object(this); + + // 2. Let len be ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // 3. If IsCallable(predicate) is false, throw a TypeError exception. + if (typeof predicate !== 'function') { + throw new TypeError('predicate must be a function'); + } + + // 4. If thisArg was supplied, let T be thisArg; else let T be undefined. + var thisArg = arguments[1]; + + // 5. Let k be 0. + var k = 0; + + // 6. Repeat, while k < len + while (k < len) { + // a. Let Pk be ! ToString(k). + // b. Let kValue be ? Get(O, Pk). + // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)). + // d. If testResult is true, return k. + var kValue = o[k]; + if (predicate.call(thisArg, kValue, k, o)) { + return k; + } + // e. Increase k by 1. + k++; + } + + // 7. Return -1. + return -1; + }, + configurable: true, + writable: true + }); +} +</pre> + +<p>Wenn Sie stark veraltete JavaScript-Engines unterstützen müssen, die {{jsxref("Object.defineProperty()")}} nicht unterstützen, empfiehlt es sich Methoden aus <code>Array.prototype</code> gar nicht mit Polyfills nachzubauen, da es nicht möglich ist sie als nicht-enumerierbar zu kennzeichnen.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.findindex', 'Array.prototype.findIndex')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.findIndex")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/flat/index.html b/files/de/web/javascript/reference/global_objects/array/flat/index.html new file mode 100644 index 0000000000..4e18ff7649 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/flat/index.html @@ -0,0 +1,116 @@ +--- +title: Array.prototype.flat() +slug: Web/JavaScript/Reference/Global_Objects/Array/flat +tags: + - Array + - Experimental + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat +--- +<div>{{JSRef}} {{SeeCompatTable}}</div> + +<p>Die <code><strong>flat()</strong></code> Methode erstellt rekursiv ein neues Array mit allen Elementen von Unterarrays bis zu einer spezifizierten Tiefe.</p> + +<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatten.html")}}</p> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>var newArray = arr</var>.flat(<var>depth</var>);</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>depth</code> {{optional_inline}}</dt> + <dd>Das Tiefenlevel, welches angibt, bis zu welcher Tiefe die Arraystruktur abgeflacht werden soll. Der Standardwert ist 1.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein neues Array, welches die Elemente der Unterarrays enthält.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Abflachen_von_geschachtelten_Arrays">Abflachen von geschachtelten Arrays</h3> + +<pre class="brush: js">var arr1 = [1, 2, [3, 4]]; +arr1.flat(); +// [1, 2, 3, 4] + +var arr2 = [1, 2, [3, 4, [5, 6]]]; +arr2.flat(); +// [1, 2, 3, 4, [5, 6]] + +var arr3 = [1, 2, [3, 4, [5, 6]]]; +arr3.flat(2); +// [1, 2, 3, 4, 5, 6] +</pre> + +<h3 id="Abflachen_und_Löcher_in_Arrays">Abflachen und Löcher in Arrays</h3> + +<p>Die <code>flat</code> Methode entfernt leere Plätze in Arrays:</p> + +<pre class="brush: js">var arr4 = [1, 2, , 4, 5]; +arr4.flat(); +// [1, 2, 4, 5]</pre> + +<h2 id="Alternative">Alternative</h2> + +<h3 id="reduce_und_concat"><code>reduce</code> und <code>concat</code></h3> + +<pre>var arr1 = [1, 2, [3, 4]]; +arr1.flat(); + +// Um ein Array um eine Ebene zu glätten. +arr1.reduce((acc, val) => acc.concat(val), []); +// [1, 2, 3, 4] + +// Um mehrere Ebenen zu glätten muss reduce und concat rekursiv eingesetzt werden. + +var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]]; + +function flattenDeep(arr1) { + return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []); +} +flattenDeep(arr1); + +// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4] +</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><a href="https://tc39.github.io/proposal-flatMap/#sec-Array.prototype.flat"><code>Array.prototype.flat</code> proposal</a></td> + <td>Candidate (3)</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.flat")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array.prototype.flatMap()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/flatmap/index.html b/files/de/web/javascript/reference/global_objects/array/flatmap/index.html new file mode 100644 index 0000000000..2840429333 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/flatmap/index.html @@ -0,0 +1,117 @@ +--- +title: Array.prototype.flatMap() +slug: Web/JavaScript/Reference/Global_Objects/Array/flatMap +tags: + - Array + - Experimental + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/flatMap +--- +<div>{{JSRef}} {{SeeCompatTable}}</div> + +<p>Die <code><strong>flatMap()</strong></code> Methode bildet jedes Element über eine Funktion ab und flacht das Ergebnis in ein Array ab. Sie ist identisch zu einem <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a> gefolgt von einem <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array/flat">flat</a> der Tiefe 1, aber <code>flatMap</code> ist <span id="result_box" lang="de"><span>oft nützlich und beide in einer Methode zusammenführen ist etwas effizienter.</span></span></p> + +<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatmap.html")}}</p> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>var new_array = arr</var>.flatMap(function <var>callback(currentValue[, index[, array]]) { + // return element for new_array +}</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Funktion, die ein Element für das neue Array erzeugt, welche drei Argumente hat: + <dl> + <dt> </dt> + <dt><code>currentValue</code></dt> + <dd>Das aktuelle Element, das im Array verarbeitet wird.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>Der Index des aktuell zu verarbeitende Elements in dem Array.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>Das Array, auf dem <code>flatMap</code> aufgerufen wurde.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{optional_inline}}</dt> + <dd>Wert, der bei der Ausführung von <code>callback</code> für <code>this</code> genutzt wird.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein neues Array mit jedem Element, dass aus dem Resultat der callback Funktion hervorgeht und auf die Tiefe 1 abgeflacht wurde.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Siehe auf der Seite {{jsxref("Array.prototype.map()")}} für eine detaillierte Beschreibung der <code>callback</code> Funktion. Die <code>flatMap</code> Methode ist identisch zu <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a></code> gefolgt von <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat">flat</a></code> mit der Tiefe 1.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="map_und_flatMap"><code>map</code> und <code>flatMap</code></h3> + +<pre class="brush: js">var arr1 = <span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>[</span></span><span class="constant decimal js numeric"><span>1</span></span><span class="comma delimiter js meta object"><span>,</span></span><span> </span><span class="brace js meta square"><span>2, 3, 4]; + +arr1.map(</span></span></span></span></span>x => [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);</span></span></span></span></span> +// [[2], [4], [6], [8]] + +arr1.flatMap(x => [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>); +// [2, 4, 6, 8]</span></span></span></span></span> + +// only one level is flattened +arr1.flatMap(x => [[x * 2]]); +// [[2], [4], [6], [8]] +</pre> + +<h2 id="Alternative">Alternative</h2> + +<h3 id="reduce_und_concat"><code>reduce</code> und <code>concat</code></h3> + +<pre class="brush: js"><code>var arr1 = [1, 2, 3, 4]; + +arr1.flatMap(x => [x * 2]); +// ist equivalent zu +arr1.reduce((acc, x) => acc.concat([x * 2]), []); +// [2, 4, 6, 8] +</code></pre> + +<div class="line"><span class="js source"><span class="comment double-slash js line"><span class="comment definition js punctuation"><span>//</span></span><span>=> [1, 2, 3, 4, 5, 6, 7, 8, 9]</span></span></span></div> + +<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><a href="https://tc39.github.io/proposal-flatMap/#sec-Array.prototype.flatMap"><code>Array.prototype.flatMap</code> proposal</a></td> + <td>Candidate (3)</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.flatMap")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array.prototype.flat()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/foreach/index.html b/files/de/web/javascript/reference/global_objects/array/foreach/index.html new file mode 100644 index 0000000000..faba9795cb --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/foreach/index.html @@ -0,0 +1,303 @@ +--- +title: Array.prototype.forEach() +slug: Web/JavaScript/Reference/Global_Objects/Array/forEach +tags: + - Array + - ECMAScript 5 + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach +--- +<div>{{JSRef}}</div> + +<p>Die <code><strong>forEach()</strong></code> Methode führt eine übergebene Funktion für jedes Element eines Arrays aus.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-foreach.html")}}</div> + + + +<p><span class="comment token">// a</span> <span class="comment token">// b</span> <span class="comment token">// c</span></p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>arr</var>.forEach(function <var>callback(currentValue [, index [, array]]) { + // Ihr Iterator +}</var>[, <var>thisArg</var>]);</pre> + +<h3 id="Parameters" name="Parameters">Parameter</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Funktion, die auf jedes Element angewendet wird mit drei Argumenten:</dd> + <dd> + <dl> + <dt><code>currentValue</code></dt> + <dd>Der Wert des aktuellen Elements im Array.</dd> + <dt><code>index</code> {{optional_inline}}</dt> + <dd>Der Index des aktuellen Elements im Array.</dd> + <dt><code>array</code> {{optional_inline}}</dt> + <dd>Das Array, welches mit <code>forEach()</code> durlaufen wird.</dd> + </dl> + </dd> + <dt><code>thisArg</code> {{optional_inline}}</dt> + <dd>Wert der als <code>this</code> verwendet wird, wenn <code>callback</code> ausgeführt wird.</dd> + <dt> </dt> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h2 id="Description" name="Description">Beschreibung</h2> + +<p><code>forEach()</code> ruft eine bereitgestellte <code>callback</code>-Funktion einmal für jedes Element in einem Array in aufsteigender Reihenfolge auf. Sie wird nicht für Elemente aufgerufen, die gelöscht oder nicht initialisiert wurden (d. h. Arrays mit leeren Elementen).</p> + +<p><code>callback</code> wird mit drei Argumenten aufgerufen:</p> + +<ol> + <li>Der Wert des Elements</li> + <li>Der Index des Elements</li> + <li>Das Array-Objekt, das durchlaufen wird</li> +</ol> + +<p>Falls der Parameter <code>thisArg</code> an <code>forEach()</code> übergeben wird, wird er als Wert für <code>this</code> innerhalb von <code>callback</code> verwendet. Andernfalls hat <code>this</code> den Wert {{jsxref("undefined")}}. Welchen Wert <code>callback</code> letztendlich in <code>this</code> sieht wird gemäß <a href="/de/docs/Web/JavaScript/Reference/Operators/this">der üblichen Regeln bestimmt, nach denen <code>this</code> für eine Funktion ermittelt wird</a>.</p> + +<p><code>forEach()</code> selbst verändert das Array nicht, auf dem es aufgerufen wird (das aufgerufene <code>callback</code> kann jedoch Änderungen vornehmen).</p> + +<p>Der Bereich der von <code>forEach()</code> verarbeiteten Elemente wird vor dem ersten Aufruf von <code>callback</code> festgelegt. Elemente, die nach Beginn des Aufrufs von <code>forEach()</code> an das Array angehängt werden, werden von <code>callback</code> nicht berücksichtigt. Wenn vorhandene Elemente des Arrays geändert werden, ist der Wert maßgeblich, den <code>forEach()</code> beim Erreichen eines Elements antrifft und dann an <code>callback</code> übergibt. Nachfolgende Elemente, die nach Beginn eines Durchlaufs von <code>forEach()</code> gelöscht werden (z. B. durch {{jsxref("Array.prototype.shift()", "shift()")}}), bevor sie eingelesen werden konnten, werden nicht mehr berücksichtigt (siehe Beispiel unten).</p> + +<p><code>forEach()</code> führt <code>callback</code> einmal für jedes Element im Array aus; im Gegensatz zu {{jsxref("Array.prototype.map()", "map()")}} oder {{jsxref("Array.prototype.reduce()", "reduce()")}} gibt es immer den Wert {{jsxref("undefined")}} zurück und ist nicht verknüpfbar. Der typische Anwendungsfall ist das Ausführen von Nebenwirkungen am Ende einer einer solchen Kette.</p> + +<div class="note"> +<p>Es gibt keine Möglichkeit eine <code>forEach()</code>-Schleife zu unterbrechen oder zu verlassen, außer durch das erzeugen einer Exception. Wird eine solche Möglichkeit jedoch benötigt, stellt <code>forEach()</code> das falsche Mittel dar.</p> + +<p>Vorzeitiges Verlassen ist verfügbar in:</p> + +<ul> + <li>Einer einfachen Schleife</li> + <li>Einer {{jsxref("statements/for...of", "for...of")}} Schleife</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> +</ul> + +<p>Die anderen Array Methoden {{jsxref("Array.prototype.every()", "every()")}}, {{jsxref("Array.prototype.some()", "some()")}}, {{jsxref("Array.prototype.find()", "find()")}} und {{jsxref("Array.prototype.findIndex()", "findIndex()")}} prüfen die Elemente im Array auf eine Bedingung, die einen {{Glossary("Truthy")}}-Wert zurückgibt mit dem bestimmt wird, ob weitere Durchläufe nötig sind.</p> +</div> + +<h2 id="Examples" name="Examples">Beispiele</h2> + +<h3 id="forEach()_statt_einer_for-Schleife"><code>forEach()</code> statt einer for-Schleife</h3> + +<pre class="brush: js">const items = ['item1', 'item2', 'item3']; +const copy = []; + +// Vorher +for (let i=0; i<items.length; i++) { + copy.push(items[i]); +} + +// Nachher +items.forEach(function(item){ + copy.push(item); +});</pre> + +<h3 id="Example:_Printing_the_contents_of_an_array" name="Example:_Printing_the_contents_of_an_array">Inhalte eines Arrays ausgeben</h3> + +<div class="blockIndicator note"> +<p><strong>Hinweis:</strong> Um den Inhalt eines Arrays vorformatiert auf der Konsole auszugeben können Sie auch {{jsxref("console.table()")}} verwenden. Dieses Beispiel zeigt eine weitere Möglichkeit mittels <code>forEach()</code>.</p> +</div> + +<p>Der folgende Code gibt eine Zeile pro Element des Arrays aus:</p> + +<pre class="brush:js">function logArrayElements(element, index, array) { + console.log('a[' + index + '] = ' + element); +} + +// Hinweis zur Auslassung: Es gibt keinen Eintrag mit dem Index 2 +// somit wird dieser übersprungen +[2, 5, , 9].forEach(logArrayElements); +// Ausgabe: +// a[0] = 2 +// a[1] = 5 +// a[3] = 9 +</pre> + +<h3 id="Verwendung_von_thisArg">Verwendung von <code>thisArg</code></h3> + +<p>Das folgende (fingierte) Beispiel aktualisiert die Eigenschaften eines Objekts eines jeden Eintrags im Array:</p> + +<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">Counter</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>sum <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>count <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> +Counter<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>add <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>array<span class="punctuation token">)</span> <span class="punctuation token">{</span> + array<span class="punctuation token">.</span><span class="function token">forEach</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>entry<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>sum <span class="operator token">+</span><span class="operator token">=</span> entry<span class="punctuation token">;</span> + <span class="operator token">++</span><span class="keyword token">this</span><span class="punctuation token">.</span>count<span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="comment token">// ^---- Beachten</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="keyword token">var</span> obj <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Counter</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +obj<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="punctuation token">[</span><span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">5</span><span class="punctuation token">,</span> <span class="number token">9</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +obj<span class="punctuation token">.</span>count<span class="punctuation token">;</span> +<span class="comment token">// 3 </span> +obj<span class="punctuation token">.</span>sum<span class="punctuation token">;</span> +<span class="comment token">// 16</span></code></pre> + +<p>Da <code>forEach()</code> der Parameter <code>thisArg</code> (<code>this</code>) zur Verfügung steht, wird er bei jedem Aufruf an <code>callback</code> weitergegeben, um es als seinen <code>this</code>-Wert zu benutzen.</p> + +<div class="note"> +<p>Wenn das Funktionsargument durch die <a href="/de/docs/Web/JavaScript/Reference/Functions/Pfeilfunktionen">Pfeilnotation</a> angegeben wird, kann der Parameter <code>thisArg</code> weggelassen werden, da Pfeilfunktionen den {{jsxref("Operators/this", "this")}}-Wert lexikalisch vermerken.</p> +</div> + +<h3 id="Example:_An_object_copy_function" name="Example:_An_object_copy_function">Funktion zum Kopieren eines Objekts</h3> + +<p>Der folgende Code erzeugt eine Kopie des übergebenen Objekts. Es gibt verschiedene Möglichkeiten, ein Objekt zu kopieren. Die Folgende ist nur eine davon und dient zur Veranschaulichung, wie <code>Array.prototype.forEach()</code> funktioniert, indem ECMAScript 5 <code>Object.*</code> Meta-Funktionen genutzt werden.</p> + +<pre class="brush: js">function copy(o) { + var copy = Object.create(Object.getPrototypeOf(o)); + var propNames = Object.getOwnPropertyNames(o); + + propNames.forEach(function(name) { + var desc = Object.getOwnPropertyDescriptor(o, name); + Object.defineProperty(copy, name, desc); + }); + + return copy; +} + +var o1 = { a: 1, b: 2 }; +var o2 = copy(o1); // o2 sieht jetzt aus wie o1</pre> + +<h3 id="Wird_das_Array_während_des_Durchlaufes_modifiziert_könnten_andere_Elemente_übersprungen_werden.">Wird das Array während des Durchlaufes modifiziert, könnten andere Elemente übersprungen werden.</h3> + +<p>Das folgende Beispiel protokolliert "eins", "zwei", "vier". Wenn der Eintrag mit dem Wert "zwei" erreicht ist, wird der erste Eintrag des Arrays mit {{jsxref("Array.prototype.shift()", "shift()")}} entfernt, was dazu führt, dass alle übrigen Einträge um eine Position aufrücken. Weil Element "vier" jetzt an einer früheren Position im Array ist, wird "drei" übersprungen. <code>forEach()</code> erzeugt keine Kopie des Arrays vor dem Durchlauf.</p> + +<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> words <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'eins'</span><span class="punctuation token">,</span> <span class="string token">'zwei'</span><span class="punctuation token">,</span> <span class="string token">'drei'</span><span class="punctuation token">,</span> <span class="string token">'vier'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +words<span class="punctuation token">.</span><span class="function token">forEach</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>word<span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>word<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>word <span class="operator token">===</span> <span class="string token">'zwei'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + words<span class="punctuation token">.</span><span class="function token">shift</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// eins</span> +<span class="comment token">// zwei</span> +<span class="comment token">// vier</span></code></pre> + +<h2 id="Polyfill" name="Polyfill">Polyfill</h2> + +<p><code>forEach()</code> wurde dem ECMA-262-Standard in der 5. Auflage hinzugefügt. Als solches ist es möglicherweise nicht in allen Implementierungen des Standards enthalten. Sie können dies umgehen, indem Sie den folgenden Code am Anfang Ihrer Skripte einfügen, um die Verwendung von <code>forEach()</code> in Implementierungen zu ermöglichen, die es nicht nativ unterstützen. Dieser Algorithmus entspricht dem in der 5. Auflage von ECMA-262 angegebenen Algorithmus, vorausgesetzt {{jsxref("Object")}} und {{jsxref("TypeError")}} haben ihre ursprünglichen Werte und <code>callback.call()</code> wird mit dem ursprünglichen Wert von {{jsxref("Function.prototype.call")}} ausgewertet.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.18 +// Reference: http://es5.github.io/#x15.4.4.18 +if (!Array.prototype.forEach) { + + Array.prototype.forEach = function(callback, thisArg) { + + var T, k; + + if (this === null) { + throw new TypeError(' this is null or not defined'); + } + + // 1. Let O be the result of calling ToObject passing the |this| value as the argument. + var O = Object(this); + + // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length". + // 3. Let len be ToUint32(lenValue). + var len = O.length >>> 0; + + // 4. If IsCallable(callback) is false, throw a TypeError exception. + // See: http://es5.github.com/#x9.11 + if (typeof callback !== "function") { + throw new TypeError(callback + ' is not a function'); + } + + // 5. If thisArg was supplied, let T be thisArg; else let T be undefined. + if (arguments.length > 1) { + T = thisArg; + } + + // 6. Let k be 0 + k = 0; + + // 7. Repeat, while k < len + while (k < len) { + + var kValue; + + // a. Let Pk be ToString(k). + // This is implicit for LHS operands of the in operator + // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk. + // This step can be combined with c + // c. If kPresent is true, then + if (k in O) { + + // i. Let kValue be the result of calling the Get internal method of O with argument Pk. + kValue = O[k]; + + // ii. Call the Call internal method of callback with T as the this value and + // argument list containing kValue, k, and O. + callback.call(T, kValue, k, O); + } + // d. Increase k by 1. + k++; + } + // 8. return undefined + }; +} +</pre> + +<h2 id="Specifications" name="Specifications">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('ES5.1', '#sec-15.4.4.18', 'Array.prototype.forEach')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser-Kompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.forEach")}}</p> +</div> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.filter()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Map.prototype.forEach()")}}</li> + <li>{{jsxref("Set.prototype.forEach()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/from/index.html b/files/de/web/javascript/reference/global_objects/array/from/index.html new file mode 100644 index 0000000000..dd254fec88 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/from/index.html @@ -0,0 +1,227 @@ +--- +title: Array.from() +slug: Web/JavaScript/Reference/Global_Objects/Array/from +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Method + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/from +--- +<div>{{JSRef}}</div> + +<p>Die <code><strong>Array.from()</strong></code> Methode erstellt eine neue, oberflächlich kopierte Array Instanz von einem Array-ähnlichen oder iterierbaren Objekt.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-from.html")}}</div> + + + +<h2 id="Parameters" name="Parameters">Syntax</h2> + +<pre>Array.from(arrayLike[, mapFn[, thisArg]])</pre> + +<h3 id="Parameters" name="Parameters"><span>Parameter</span></h3> + +<dl> + <dt><code>arrayLike</code></dt> + <dd>Ein Array-ähnliches oder iterierbares Objekt, welches zu einem Array konvertiert wird.</dd> + <dt><code>mapFn</code>{{Optional_inline}}</dt> + <dd>Map Funktion, welche auf jedes Element des Arrays angewendet wird.</dd> + <dt><code>thisArg</code>{{Optional_inline}}</dt> + <dd>Wert, welcher als <code>this</code> beim Ausführen von <code>mapFn</code> genutzt wird.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Eine neue {{jsxref("Array")}} Instanz.</p> + +<h2 id="Description" name="Description">Beschreibung</h2> + +<p><code><strong>Array.from()</strong></code> erstellt ein Array aus:</p> + +<ul> + <li>Array-ähnliche Objekte (Objekte mit einer <code>length</code> Eigenschaft und indexierten Elementen) oder</li> + <li><a href="/de/docs/Web/JavaScript/Guide/iterable">Iterierbare Objekte</a> (Objekte welche Elemente zurückgeben können, wie zum Beispiel {{jsxref("Map")}} und {{jsxref("Set")}}).</li> +</ul> + +<p><strong>Array.from() </strong>hat einen optionalen Parameter <code>mapFn</code>, welcher es erlaubt eine {{jsxref("Array.prototype.map", "map")}} Funktion auf jedem Element des Arrays (oder Subklassen) das erstellt wird, auszuführen. Genauer gesagt, ist <code>Array.from(obj, mapFn, thisArg)</code> dasselbe wie <code>Array.from(obj).map(mapFn, thisArg)</code>, mit dem Unterschied, dass kein Array als Zwischenergebnis produziert wird. Das ist besonders wichtig für Array Subklassen, wie <a href="/de/docs/Web/JavaScript/Typed_arrays">typed Arrays</a>. Das Array des Zwischenergebnisses<br> + würde sonst Werte kürzen, um dem zutreffenden Typ zu entsprechen.</p> + +<p>Die <code>length</code> Eigenschaft der <code>from()</code> Methode ist 1.</p> + +<p>In ES2015 erlaubt die class Syntax, Subklassen für eingebaute und benutzerdefinierte Klassen. Klassenseitige statische Methoden wie <code>Array.from()</code><strong> </strong>sind von der Subklasse <code>Array</code> vererbt und erzeugen eine neue Instanz der Subklasse und nicht von <code>Array</code>.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Array_von_einem_String">Array von einem <code>String</code></h3> + +<pre class="brush: js">Array.from('foo'); +// ["f", "o", "o"];</pre> + +<h3 id="Array_von_einem_Set">Array von einem <code>Set</code></h3> + +<pre class="brush: js">var s = new Set(["foo", window]); +Array.from(s); +// ["foo", window]</pre> + +<h3 id="Array_von_einem_Map">Array von einem <code>Map</code></h3> + +<pre class="brush: js">var m = new Map([[1, 2], [2, 4], [4, 8]]); +Array.from(m); +// [[1, 2], [2, 4], [4, 8]] + +var mapper = new Map([['1', 'a'], ['2', 'b']]); +Array.from(mapper.values()); +// ['a', 'b']; + +Array.from(mapper.keys()); +// ['1', '2'];</pre> + +<h3 id="Array_von_einem_Array_ähnlichen_Objekt_(arguments)">Array von einem Array ähnlichen Objekt (<code>arguments</code>)</h3> + +<pre class="brush: js">function f() { + return Array.from(arguments); +} + +f(1, 2, 3); + +// [1, 2, 3]</pre> + +<h3 id="Einsatz_von_Arrow-Funktionen_und_Array.from">Einsatz von Arrow-Funktionen und <code>Array.from</code></h3> + +<pre class="brush: js">// Using an arrow function as the map function to +// manipulate the elements +Array.from([1, 2, 3], x => x + x); +// [2, 4, 6] + + +// Generate a sequence of numbers +// Since the array is initialized with `undefined` on each position, +// the value of `v` below will be `undefined` +Array.from({length: 5}, (v, i) => i); +// [0, 1, 2, 3, 4] +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>Array.from()</code> wurde zum ECMA-262 Standard in der 6ten Version hinzugefügt. Es kann sein, dass diese in anderen Implementationen des Standards nicht verfügbar ist. Man kann das mit folgendem Code am Anfang eines Skriptes umgehen. Das Skript erlaubt das Benutzen von <code>Array.from()</code><strong> </strong>in Implementationen, welche Array.from() nicht nativ unterstützen. Dieser Algorithmus ist genau derselbe, welcher in EMCA-262, 6te Version implementiert ist, angenommen Object und TypeError haben ihre originalen Werte und <code>callback.call</code> evaluiert den Original Wert von {{jsxref("Function.prototype.call")}}. Außerdem können echte iterierbare Elemente nicht mit einem Polyfill implementiert werden. Diese Implementation unterstützt keine generischen iterierbaren Elemente so wie sie definiert sind in der 6ten Version von ECMA-262.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 6, 22.1.2.1 +if (!Array.from) { + Array.from = (function () { + var toStr = Object.prototype.toString; + var isCallable = function (fn) { + return typeof fn === 'function' || toStr.call(fn) === '[object Function]'; + }; + var toInteger = function (value) { + var number = Number(value); + if (isNaN(number)) { return 0; } + if (number === 0 || !isFinite(number)) { return number; } + return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number)); + }; + var maxSafeInteger = Math.pow(2, 53) - 1; + var toLength = function (value) { + var len = toInteger(value); + return Math.min(Math.max(len, 0), maxSafeInteger); + }; + + // The length property of the from method is 1. + return function from(arrayLike/*, mapFn, thisArg */) { + // 1. Let C be the this value. + var C = this; + + // 2. Let items be ToObject(arrayLike). + var items = Object(arrayLike); + + // 3. ReturnIfAbrupt(items). + if (arrayLike == null) { + throw new TypeError('Array.from requires an array-like object - not null or undefined'); + } + + // 4. If mapfn is undefined, then let mapping be false. + var mapFn = arguments.length > 1 ? arguments[1] : void undefined; + var T; + if (typeof mapFn !== 'undefined') { + // 5. else + // 5. a If IsCallable(mapfn) is false, throw a TypeError exception. + if (!isCallable(mapFn)) { + throw new TypeError('Array.from: when provided, the second argument must be a function'); + } + + // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined. + if (arguments.length > 2) { + T = arguments[2]; + } + } + + // 10. Let lenValue be Get(items, "length"). + // 11. Let len be ToLength(lenValue). + var len = toLength(items.length); + + // 13. If IsConstructor(C) is true, then + // 13. a. Let A be the result of calling the [[Construct]] internal method + // of C with an argument list containing the single item len. + // 14. a. Else, Let A be ArrayCreate(len). + var A = isCallable(C) ? Object(new C(len)) : new Array(len); + + // 16. Let k be 0. + var k = 0; + // 17. Repeat, while k < len… (also steps a - h) + var kValue; + while (k < len) { + kValue = items[k]; + if (mapFn) { + A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k); + } else { + A[k] = kValue; + } + k += 1; + } + // 18. Let putStatus be Put(A, "length", len, true). + A.length = len; + // 20. Return A. + return A; + }; + }()); +} +</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-array.from', 'Array.from')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.from")}}</p> +</div> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("TypedArray.from()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/includes/index.html b/files/de/web/javascript/reference/global_objects/array/includes/index.html new file mode 100644 index 0000000000..64a51dfb73 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/includes/index.html @@ -0,0 +1,181 @@ +--- +title: Array.prototype.includes() +slug: Web/JavaScript/Reference/Global_Objects/Array/includes +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes +--- +<div>{{JSRef}}</div> + +<p>Die <code><strong>includes()</strong></code> Methode prüft, ob ein Array ein bestimmtes Element enthält, und gibt entsprechend <code>true</code> oder <code>false</code> aus. Es wird der selbe sameValueZero-Algorithmus benutzt, um ein gegebenes Element zu finden.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-includes.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>arr</var>.includes(<var>searchElement</var>[, <var>fromIndex</var>])</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>searchElement</code></dt> + <dd>Das zu suchende Element.</dd> + <dt><code>fromIndex </code> {{optional_inline}}</dt> + <dd>Die Position im Array, ab welcher die Suche nach <code>searchElement</code> beginnt. Bei einem negativen Wert fängt die Suche beim Index <code>array.length - fromIndex</code> an. Default ist 0.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<dl> + <dt> + <p>Ein {{jsxref("Boolean")}}.</p> + </dt> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: js">[1, 2, 3].includes(2); // true +[1, 2, 3].includes(4); // false +[1, 2, 3].includes(3, 3); // false +[1, 2, 3].includes(3, -1); // true +[1, 2, NaN].includes(NaN); // true +</pre> + +<h3 id="fromIndex_ist_größer_oder_gleich_der_Arraylänge"><code>fromIndex</code> ist größer oder gleich der Arraylänge</h3> + +<p>Wenn <code>fromIndex</code> größer oder gleich der Arraylänge ist, wird <code>false</code> zurückgegeben. Das Array wird nicht durchsucht.</p> + +<pre class="brush: js">var arr = ['a', 'b', 'c']; + +arr.includes('c', 3); // false +arr.includes('c', 100); // false +</pre> + +<h3 id="Berechneter_Index_ist_kleiner_als_0">Berechneter Index ist kleiner als 0</h3> + +<p>Wenn <code>fromIndex</code> negativ ist, wird der Index berechnet, an dem die Suche im Array nach <code>searchElement</code> beginnen soll. Wenn diese Berechnung einen Index kleiner als 0 ergibt, wird das ganze Array durchsucht.</p> + +<pre class="brush: js">// Arraylänge ist 3 +// fromIndex ist -100 +// Der berechnete Index ist 3 + (-100) = -97 + +var arr = ['a', 'b', 'c']; + +arr.includes('a', -100); // true +arr.includes('b', -100); // true +arr.includes('c', -100); // true +</pre> + +<h3 id="Einsatz_von_includes()_als_generische_Methode">Einsatz von <code>includes()</code> als generische Methode</h3> + +<p>Die <code>includes()</code>-Methode is absichtlich generisch. Die <code>this</code>-Referenz muss nicht auf ein Array-Objekt zeigen, so dass auch andere Objekte (z. B. Array-ähnliche Objekte) genutzt werden können. Das Beispiel zeigt, wie <code>includes()</code> auf den Parametern (<a href="/de/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>) einer Funktion aufgerufen wird.</p> + +<pre class="brush: js">(function() { + console.log([].includes.call(arguments, 'a')); // true + console.log([].includes.call(arguments, 'd')); // false +})('a', 'b', 'c') +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.includes +if (!Array.prototype.includes) { + Object.defineProperty(Array.prototype, 'includes', { + value: function(searchElement, fromIndex) { + + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + // 1. Let O be ? ToObject(this value). + var o = Object(this); + + // 2. Let len be ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // 3. If len is 0, return false. + if (len === 0) { + return false; + } + + // 4. Let n be ? ToInteger(fromIndex). + // (If fromIndex is undefined, this step produces the value 0.) + var n = fromIndex | 0; + + // 5. If n ≥ 0, then + // a. Let k be n. + // 6. Else n < 0, + // a. Let k be len + n. + // b. If k < 0, let k be 0. + var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); + + function sameValueZero(x, y) { + return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y)); + } + + // 7. Repeat, while k < len + while (k < len) { + // a. Let elementK be the result of ? Get(O, ! ToString(k)). + // b. If SameValueZero(searchElement, elementK) is true, return true. + if (sameValueZero(o[k], searchElement)) { + return true; + } + // c. Increase k by 1. + k++; + } + + // 8. Return false + return false; + } + }); +} +</pre> + +<p>Sollten Sie wirklich veraltete JavaScript-Engines unterstützen müssen, die ihrerseits {{jsxref("Object.defineProperty", "Object.defineProperty")}} nicht unterstützen, ist es ratsam, die <code>Array.prototype</code>-Methode nicht mit dem Polyfill zu erweitern, da man diese nicht unabzählbar (non-enumerable) machen kann.</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('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> + <td>{{Spec2('ES7')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.includes")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("TypedArray.prototype.includes()")}}</li> + <li>{{jsxref("String.prototype.includes()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/index.html b/files/de/web/javascript/reference/global_objects/array/index.html new file mode 100644 index 0000000000..d60c037b82 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/index.html @@ -0,0 +1,460 @@ +--- +title: Array +slug: Web/JavaScript/Reference/Global_Objects/Array +tags: + - Array + - Example + - Global Objects + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array +--- +<div>{{JSRef}}</div> + +<p>Das JavaScript-<strong><code>Array</code></strong> ist ein globales Objekt und Konstruktor für das Erstellen von Arrays, welche listenähnliche Objekte sind.</p> + +<p><strong>Ein Array erstellen</strong></p> + +<pre class="brush: js">var fruits = ['Apple', 'Banana']; + +console.log(fruits.length); +// 2 +</pre> + +<p><strong>Zugriff auf ein Arrayelement (mit Index)</strong></p> + +<pre class="brush: js">var first = fruits[0]; +// Apple + +var last = fruits[fruits.length - 1]; +// Banana +</pre> + +<p><strong>Über ein Array Iterieren</strong></p> + +<pre class="brush: js">fruits.forEach(function(item, index, array) { + console.log(item, index); +}); +// Apple 0 +// Banana 1 +</pre> + +<p><strong>Ein Element am Ende des Arrays einfügen</strong></p> + +<pre class="brush: js">var newLength = fruits.push('Orange'); +// ["Apple", "Banana", "Orange"] +</pre> + +<p><strong>Ein Element am Ende des Arrays löschen</strong></p> + +<pre class="brush: js">var last = fruits.pop(); // remove Orange (from the end) +// ["Apple", "Banana"]; +</pre> + +<p><strong>Ein Element am Anfang des Arrays löschen</strong></p> + +<pre class="brush: js">var first = fruits.shift(); // remove Apple from the front +// ["Banana"]; +</pre> + +<p><strong>Ein Element am Anfang des Arrays einfügen</strong></p> + +<pre class="brush: js">var newLength = fruits.unshift('Strawberry') // add to the front +// ["Strawberry", "Banana"]; +</pre> + +<p><strong>Den Index eines Elements im Array ermitteln</strong></p> + +<pre class="brush: js">fruits.push('Mango'); +// ["Strawberry", "Banana", "Mango"] + +var pos = fruits.indexOf('Banana'); +// 1 +</pre> + +<p><strong>Ein Element mithilfe eines Index aus dem Array löschen</strong></p> + +<pre class="brush: js">var removedItem = fruits.splice(pos, 1); // this is how to remove an item + +// ["Strawberry", "Mango"]</pre> + +<p><strong>Elemente von einer Indexposition aus löschen</strong></p> + +<pre class="brush: js">var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot']; +console.log(vegetables); +// ["Cabbage", "Turnip", "Radish", "Carrot"] + +var pos = 1, n = 2; + +var removedItems = vegetables.splice(pos, n); +// this is how to remove items, n defines the number of items to be removed, +// from that position(pos) onward to the end of array. + +console.log(vegetables); +// ["Cabbage", "Carrot"] (the original array is changed) + +console.log(removedItems); +// ["Turnip", "Radish"]</pre> + +<p><strong>Ein Array kopieren</strong></p> + +<pre class="brush: js">var shallowCopy = fruits.slice(); // this is how to make a copy +// ["Strawberry", "Mango"] +</pre> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>] +new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]]) +new Array(<var>arrayLength</var>)</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Ein JavaScript-Array wird mit den angegebenen Elementen initialisiert, es sei denn, an den <code>Array</code>-Konstruktor wird eine einzelne Zahl übergeben (siehe <code>arrayLength-</code>Parameter unten). Beachte, dass dieser Sonderfall nur für JavaScript-Arrays gilt, die mit dem <code>Array</code>-Konstruktor erstellt wurden, nicht für Array-Literale, die mit der Klammer-Syntax erstellt wurden.</dd> + <dt><code>arrayLength</code></dt> + <dd>Wenn lediglich eine Ganzzahl zwischen 0 und 2<sup>32</sup>-1 (inklusive) als Argument an den <code>Array</code>-Konstruktor übergeben wird, ist der Rückgabewert ein JavaScript Array, dessen <code>length</code>-Eigenschaft dieser Zahl entspricht. (<strong>Hinweis:</strong> Dies impliziert ein Array mit leeren Elementen einer Anzahl von <code>arrayLength</code>, nicht Elementen mit Wert <code>undefined</code>). Handelt es sich bei dem Argument um irgendeine andere Zah,l wird eine {{jsxref("Global_Objects/RangeError", "RangeError")}} Exception ausgelöst.</dd> +</dl> + +<h2 id="Description" name="Description">Beschreibung</h2> + +<p>Arrays sind listenähnliche Objekte, dessen Prototyp Methoden für Durchlauf- und Mutationsoperationen besitzt. Weder die Länge eines JavaScript-Arrays noch die Typen seiner Elemente sind fix. Da sich die Länge eines Arrays jederzeit ändern kann und Daten an nicht zusammenhängenden Positionen im Array gespeichert werden können, ist nicht garantiert, dass JavaScript-Arrays verdichtet sind; dies hängt davon ab, wie der Programmierer sie benutzt. Im Allgemeinen sind dies praktische Merkmale; falls jedoch diese Funktionalität für Ihren Anwendungsfall nicht wünschenswert ist, sollten Sie in Betracht ziehen, typisierte Arrays zu verwenden.</p> + +<p>Arrays können keine Strings als Index benutzen (wie bei<a class="external" href="http://www.andrewdupont.net/2006/05/18/javascript-associative-arrays-considered-harmful/"> assoziativen Arrays</a>), sondern müssen Ganzzahlen verwenden. Der Zugriff mit nicht-ganzzahligen Werten über die <a href="/de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten#Objekte_und_Eigenschaften">Klammernotation</a> (oder <a href="/de/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Punktnotation</a>) bezieht sich nicht auf ein Element im Array, sondern legt eine Eigenschaft des Array-Objekts fest oder greift darauf zu. Die Eigenschaften des Array-Objekts und die Liste der Array-Elemente sind voneinander getrennt. Die <a href="/de/docs/Web/JavaScript/Guide/Indexed_collections#Array-Methoden">Durchlauf- und Mutationsoperationen</a> des Arrays können nicht auf diese benannten Eigenschaften angewendet werden.</p> + +<h3 id="Accessing_array_elements" name="Accessing_array_elements">Auf Elemente des Arrays zugreifen</h3> + +<p>JavaScript-Arrays sind nullindiziert: Das erste Element eines Arrays befindet sich am Index <code>0</code>, das letzte Element befindet sich an demjenigen Index, der dem Wert der Eigenschaft {{jsxref ("Array.length", "length")}} des Arrays minus 1 entspricht. Die Verwendung einer ungültigen Indexnummer gibt <code>undefined</code> zurück.</p> + +<pre class="brush: js">var arr = ['Das erste Element', 'Das zweite Element', 'Das letzte Element']; +console.log(arr[0]); // Ausgabe: 'Das erste Element' +console.log(arr[1]); // Ausgabe: 'Das zweite Element' +console.log(arr[arr.length - 1]); // Ausgabe: 'Das letzte Element' +</pre> + +<p>Array-Elemente sind Objekteigenschaften genau so wie <code>toString</code>. Wenn man jedoch wie folgt auf ein Element eines Arrays versucht zuzugreifen, wird ein Syntaxfehler ausgegeben, da der Name der Eigenschaft ungültig ist:</p> + +<pre class="brush: js">console.log(arr.0); // Syntaxfehler +</pre> + +<p>Es gibt nichts Besonderes an JavaScript-Arrays und den Eigenschaften, die dies verursachen. JavaScript-Eigenschaften, die mit einer Ziffer beginnen, können nicht mit Punktnotation referenziert werden und müssen über Klammernotation aufgerufen werden. Wenn man beispielsweise ein Objekt mit einer Eigenschaft namens <code>'3d'</code> hat, kann es nur in Klammern angegeben werden, z. B.:</p> + +<pre class="brush: js">var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]; +console.log(years.0); // ein Syntaxfehler +console.log(years[0]); // funktioniert +</pre> + +<pre class="brush: js">renderer.3d.setTexture(model, 'character.png'); // ein Syntaxfehler +renderer['3d'].setTexture(model, 'character.png'); // works funktioniert +</pre> + +<p>Beachten Sie, dass im obigen Beispiel <code>'3d'</code> in Anführungszeichen gesetzt werden musste. Es ist auch möglich, die JavaScript-Array-Indizes in Anführungszeichen zu setzen (z. B. <code>years['2']</code> statt <code>years[2]</code>), obwohl dies nicht erforderlich ist. Die 2 in <code>years[2]</code> wird von der JavaScript-Engine durch eine implizite Konvertierung mittels <code>toString</code> zwingend in eine Zeichenfolge umgewandelt. Aus diesem Grund beziehen sich <code>'2'</code> und <code>'02'</code> auf zwei unterschiedliche Elemente des <code>years</code>-Objekts und das folgende Beispiel würde <code>true</code> ergeben:</p> + +<pre class="brush: js">console.log(years['2'] != years['02']); +</pre> + +<p>Ebenso kann auf Objekteigenschaften, die zufällig reservierte Wörter(!) sind, nur als Stringliterale in Klammern zugegriffen werden:</p> + +<pre class="brush: js">var promise = { + 'var' : 'text', + 'array': [1, 2, 3, 4] +}; + +console.log(promise['var']); +</pre> + +<h3 id="Relationship_between_length_and_numerical_properties" name="Relationship_between_length_and_numerical_properties">Beziehung zwischen <code>length</code> und numerischen Eigenschaften</h3> + +<p>Die Eigenschaft {{jsxref("Array.length", "length")}} eines JavaScript-Arrays und numerische Eigenschaften sind miteinander verbunden. Etliche der eingebauten Array-Methoden (z. B. {{jsxref("Array.join", "join()")}}, {{jsxref("Array.slice", "slice()")}}, {{jsxref("Array.indexOf", "indexOf()")}}, etc.) berücksichtigen den Wert der {{jsxref("Array.length", "length")}} Eigenschaft eines Arrays, wenn diese aufgerufen werden. Andere Methoden (z. B. {{jsxref("Array.push", "push()")}}, {{jsxref("Array.splice", "splice()")}}, etc.) bewirken ebenfalls eine Veränderung der Eigenschaft {{jsxref("Array.length", "length")}} eines Arrays.</p> + +<pre class="brush: js">var fruits = []; +fruits.push('banana', 'apple', 'peach'); + +console.log(fruits.length); // 3 +</pre> + +<p>Wird einem JavaScript-Array eine Eigenschaft zugewiesen, bei der es sich um einen gültigen Array-Index handelt und dieser Index außerhalb der aktuellen Grenzen des Arrays liegt, aktualisiert die Engine die Eigenschaft {{jsxref("Array.length", "length")}} des Arrays entsprechend:</p> + +<pre class="brush: js">fruits[5] = 'mango'; +console.log(fruits[5]); // 'mango' +console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] +console.log(fruits.length); // 6 +</pre> + +<p>Beim Erhöhen von {{jsxref("Array.length", "length")}}.</p> + +<pre class="brush: js">fruits.length = 10; +console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] +console.log(fruits.length); // 10 +</pre> + +<div> +<p>Beim Verringern von {{jsxref("Array.length", "length")}} werden jedoch Elemente gelöscht.</p> + +<pre class="brush: js">fruits.length = 2; +console.log(Object.keys(fruits)); // ['0', '1'] +console.log(fruits.length); // 2 +</pre> + +<p>Der Artikel zu {{jsxref("Array.length")}} geht genauer darauf ein.</p> +</div> + +<h3 id="Creating_an_array_using_the_result_of_a_match" name="Creating_an_array_using_the_result_of_a_match">Erstellen eines Arrays als Ergebnis einer Übereinstimmung</h3> + +<p>Das Ergebnis einer Übereinstimmung eines regulären Ausdrucks und einem String kann ein JavaScript-Array erstellen. Dieses Array verfügt über Eigenschaften und Elemente, die Informationen zur Übereinstimmung beinhalten. Solch ein Array wird von {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}} und {{jsxref("String.replace")}} zurückgegeben. Am folgenden Beispiel sollen diese Eigenschaften und Elemente erläutert werden, die Tabelle darunter enthält; weitere Informationen hierzu:</p> + +<pre class="brush: js">// Übereinstimmung eines d, gefolgt von einem oder mehreren b, gefolgt von einem d +// Übereinstimmende b's und die darauf folgenden d's merken +// Groß-/Kleinschreibung ignorieren + +var myRegEx = /d(b+)(d)/i; +var myArray = myRegEx.exec('cdbBdbsbz');</pre> + +<p>Die Eigenschaften und Elemente werden wie folgt zurückgegeben:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header">Eigenschaft/Element</td> + <td class="header">Beschreibung</td> + <td class="header">Beispiel</td> + </tr> + <tr> + <td><code>input</code></td> + <td> + <p>Eine schreibgeschützte Eigenschaft, die die ursprüngliche Zeichenfolge widerspiegelt, mit der der reguläre Ausdruck abgeglichen wurde.</p> + </td> + <td>cdbBdbsbz</td> + </tr> + <tr> + <td><code>index</code></td> + <td>Eine schreibgeschützte Eigenschaft, bei der es sich um den nullbasierten Index der Übereinstimmung in der Zeichenfolge handelt.</td> + <td>1</td> + </tr> + <tr> + <td><code>[0]</code></td> + <td>Ein schreibgeschütztes Element, das die zuletzt übereinstimmenden Zeichen angibt.</td> + <td>dbBd</td> + </tr> + <tr> + <td><code>[1], ...[n]</code></td> + <td>Schreibgeschützte Elemente, die die in Klammern gesetzten Unterzeichenfolgen angeben, sofern sie im regulären Ausdruck enthalten sind. Die Anzahl der möglichen geklammerten Teilzeichenfolgen ist unbegrenzt.</td> + <td>[1]: bB<br> + [2]: d</td> + </tr> + </tbody> +</table> + +<h2 id="Properties" name="Properties">Eigenschaften</h2> + +<dl> + <dt>Array.length</dt> + <dd>Die Eigenschaft <code>length</code> des <code>Array-</code>Konstruktors, deren Wert 1 ist.</dd> + <dt>{{jsxref("Array.@@species", "get Array[@@species]")}}</dt> + <dd>Die Konstruktorfunktion zum Erstellen abgeleiteter Objekte.</dd> + <dt>{{jsxref("Array.prototype")}}</dt> + <dd>Ermöglicht das Hinzufügen von Eigenschaften zu allen Array-Objekten.</dd> +</dl> + +<h2 id="Methods" name="Methods">Methoden</h2> + +<dl> + <dt>{{jsxref("Array.from()")}}</dt> + <dd>Erstellt eine neue <code>Array</code>-Instanz aus einem Array-ähnlichen oder iterierbaren Objekt.</dd> + <dt>{{jsxref("Array.isArray()")}}</dt> + <dd>Gibt <code>true</code> zurück, wenn eine Variable ein Array ist, andernfalls <code>false</code>.</dd> + <dt>{{jsxref("Array.of()")}}</dt> + <dd>Erstellt eine neue <code>Array</code>-Instanz mit einer variablen Anzahl von Argumenten, unabhängig von Anzahl oder Typ der Argumente.</dd> +</dl> + +<h2 id="Array_instances" name="Array_instances"><code>Array</code> Instanzen</h2> + +<p>Alle <code>Array</code>-Instanzen erben von {{jsxref("Array.prototype")}}. Das Prototypobjekt des <code>Array</code>-Konstruktors kann geändert werden, um alle <code>Array</code>-Instanzen zu beeinflussen.</p> + +<h3 id="Methods_of_array_instances" name="Methods_of_array_instances">Eigenschaften</h3> + +<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Eigenschaften')}}</div> + +<h3 id="Methods_of_array_instances" name="Methods_of_array_instances">Methoden</h3> + +<h4 id="Mutator_methods" name="Mutator_methods">Mutationsmethoden</h4> + +<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutationsmethoden')}}</div> + +<h4 id="Accessor_methods" name="Accessor_methods">Zugriffsmethoden</h4> + +<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Zugriffsmethoden')}}</div> + +<h4 id="Iteration_methods" name="Iteration_methods">Zählmethoden</h4> + +<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Zählmethoden')}}</div> + +<h2 id="Array_generic_methods" name="Array_generic_methods">Generische <code>Array</code>-Methoden</h2> + +<div class="warning"> +<p><strong>Generische Array Methoden sind nicht standardisiert, veraltet und werden in naher Zukunft entfernt. </strong></p> +</div> + +<p>Manchmal möchte man Array-Methoden auf Strings oder andere Array-ähnliche Objekte anwenden (z. B. auf {{jsxref("Functions/arguments", "Argumente", "", 1)}} von Funktionen). Auf diese Weise behandelt man eine Zeichenfolge wie ein Array von Zeichen (oder ein nicht-Array wie ein Array). Um beispielsweise zu prüfen, ob jedes Zeichen in der Variablen <code><em>str</em></code> ein Buchstabe ist, würde man Folgendes schreiben:</p> + +<pre class="brush: js">function isLetter(character) { + return character >= 'a' && character <= 'z'; +} + +if (Array.prototype.every.call(str, isLetter)) { + console.log("The string '" + str + "' contains only letters!"); +}</pre> + +<p>Diese Schreibweise wurde in JavaScript 1.6 von einer kürzeren abgelöst:</p> + +<pre class="brush: js">if (Array.every(str, isLetter)) { + console.log("The string '" + str + "' contains only letters!"); +} +</pre> + +<p>{{jsxref("Global_Objects/String", "Generische Methoden", "#Generische_String-Methoden", 1)}} gibt es ebenfalls für {{jsxref("Global_Objects/String", "Strings")}}.</p> + +<p>Diese sind <strong>nicht</strong> Teil der ECMAScript-Standards und werden von nicht-Gecko-Browsern nicht unterstützt. Als Standardvariante können Sie Ihr Objekt mit {{jsxref("Array.from()")}} in ein richtiges Array konvertieren. Diese Methode wird in alten Browsern möglicherweise nicht unterstützt:</p> + +<pre class="brush: js">if (Array.from(str).every(isLetter)) { + console.log("The string '" + str + "' contains only letters!"); +} +</pre> + +<h2 id="Examples" name="Examples">Beispiele</h2> + +<h3 id="Example_Creating_an_array" name="Example:_Creating_an_array">Erstellen eines Arrays</h3> + +<p>Das folgende Beispiel erzeugt ein Array <code>msgArray</code> mit der Länge 0, weist dann <code>msgArray[0]</code> und <code>msgArray[99]</code> Werte zu und ändert somit die Länge des Arrays auf 100.</p> + +<pre class="brush: js">var msgArray = []; +msgArray[0] = 'Hello'; +msgArray[99] = 'world'; + +if (msgArray.length === 100) { + console.log('Die Länge ist 100.'); +} +</pre> + +<h3 id="Example_Creating_a_two-dimensional_array" name="Example:_Creating_a_two-dimensional_array">Erstellen eines zweidimensionalen Arrays</h3> + +<p>Im Folgenden wird ein Schachbrett als zweidimensionales Array von Strings erzeugt. Der erste Zug erfolgt durch Kopieren des 'p' in (6,4) nach (4,4). Die alte Position (6,4) wird als leer markiert.</p> + +<pre class="brush: js">var board = [ + ['R','N','B','Q','K','B','N','R'], + ['P','P','P','P','P','P','P','P'], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + ['p','p','p','p','p','p','p','p'], + ['r','n','b','q','k','b','n','r'] ]; + +console.log(board.join('\n') + '\n\n'); + +// Ziehe Bauern 2 Felder vorwärts +board[4][4] = board[6][4]; +board[6][4] = ' '; +console.log(board.join('\n')); +</pre> + +<p>Das ist die Ausgabe:</p> + +<pre class="eval">R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , , , , , + , , , , , , , +p,p,p,p,p,p,p,p +r,n,b,q,k,b,n,r + +R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , ,p, , , + , , , , , , , +p,p,p,p, ,p,p,p +r,n,b,q,k,b,n,r +</pre> + +<h3 id="Einsatz_eines_Arrays_um_Werte_tabellarisch_auszugeben">Einsatz eines Arrays, um Werte tabellarisch auszugeben</h3> + +<pre class="brush: js">values = []; +for (var x = 0; x < 10; x++){ + values.push([ + 2 ** x, + 2 * x ** 2 + ]) +}; +console.table(values)</pre> + +<p>Das Resultat ist:</p> + +<pre class="eval">0 1 0 +1 2 2 +2 4 8 +3 8 18 +4 16 32 +5 32 50 +6 64 72 +7 128 98 +8 256 128 +9 512 162</pre> + +<p>(Die erste Spalte ist der Index)</p> + +<h2 id="Specifications" name="Specifications">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-15.4', 'Array')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Neue Methoden hinzugefügt: {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Neue Methoden hinzugefügt: {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}</td> + </tr> + <tr> + <td>{{SpecName('ES7', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ES7')}}</td> + <td>Neue Methode hinzugefügt: {{jsxref("Array.prototype.includes()")}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.builtins.Array")}}</p> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten#Indexing_object_properties">JavaScript Guide: “Indexing object properties”</a></li> + <li><a href="/de/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Array_Object">JavaScript Guide: “Predefined Core Objects: <code>Array</code> Object”</a></li> + <li><a href="/de/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a></li> + <li><a href="https://github.com/plusdude/array-generics">Polyfill für JavaScript 1.8.5 generische Arrays und ECMAScript 5 Array Extras</a></li> + <li><a href="/de/docs/JavaScript_typed_arrays">Typisierte Arrays</a></li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/indexof/index.html b/files/de/web/javascript/reference/global_objects/array/indexof/index.html new file mode 100644 index 0000000000..1768427494 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/indexof/index.html @@ -0,0 +1,226 @@ +--- +title: Array.prototype.indexOf() +slug: Web/JavaScript/Reference/Global_Objects/Array/indexOf +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Die Methode <code><strong>indexOf()</strong></code> gibt den Index zurück, an dem ein bestimmtes Element im Array zum ersten Mal auftritt oder -1 wenn es nicht vorhanden ist.</span></p> + +<div class="note"> +<p><strong>Hinweis:</strong> Für die String Methode, siehe {{jsxref("String.prototype.indexOf()")}}.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/array-indexof.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>arr</var>.indexOf(<var>searchElement[</var>, <var>fromIndex]</var>)</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>searchElement</code></dt> + <dd>Element, das im Array gefunden werden soll.</dd> + <dt><code>fromIndex</code> {{optional_inline}}</dt> + <dd>Der Index, an dem die Suche beginnen soll. Wenn dieser Index größer oder gleich der Länge des Arrays ist, wird -1 zurückgegeben, d. h. das Array wird nicht durchsucht. Ist der Startindex negativ, wird er als Versatz vom Ende des Arrays verstanden. Das Array wird dann immer noch von vorne nach hinten durchsucht.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Der Index, an dem das gefundene Element das erste Mal angetroffen wurde, andernfalls <strong>-1</strong> wenn nichts gefunden wurde.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p><code>indexOf()</code> vergleicht <code>searchElement</code> mit Elementen des Arrays mittels <a href="/de/docs/Web/JavaScript/Reference/Operators/Vergleichsoperatoren#Die_Gleichheitsoperatoren_anwenden">strikter Gleichheit</a> (dieselbe Methode, die bei <code>===</code> angewendet wird).</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Verwendung_von_indexOf()">Verwendung von <code>indexOf()</code></h3> + +<p>Das folgende Beispiel nutzt <code>indexOf()</code> um Werte in einem Array zu ermitteln.</p> + +<pre class="brush: js">var array = [2, 9, 9]; +array.indexOf(2); // 0 +array.indexOf(7); // -1 +array.indexOf(9, 2); // 2 +array.indexOf(2, -1); // -1 +array.indexOf(2, -3); // 0 +</pre> + +<h3 id="Alle_Vorkommnisse_eines_Elements_ermitteln">Alle Vorkommnisse eines Elements ermitteln</h3> + +<pre class="brush: js">var indices = []; +var array = ['a', 'b', 'a', 'c', 'a', 'd']; +var element = 'a'; +var idx = array.indexOf(element); +while (idx != -1) { + indices.push(idx); + idx = array.indexOf(element, idx + 1); +} +console.log(indices); +// [0, 2, 4] +</pre> + +<h3 id="Ermitteln_ob_ein_Element_in_einem_Array_existiert_und_das_Array_aktualisieren">Ermitteln, ob ein Element in einem Array existiert und das Array aktualisieren</h3> + +<pre class="brush: js">function updateVegetablesCollection (veggies, veggie) { + if (veggies.indexOf(veggie) === -1) { + veggies.push(veggie); + console.log('New veggies collection is : ' + veggies); + } else if (veggies.indexOf(veggie) > -1) { + console.log(veggie + ' already exists in the veggies collection.'); + } +} + +var veggies = ['potato', 'tomato', 'chillies', 'green-pepper']; + +updateVegetablesCollection(veggies, 'spinach'); +// New veggies collection is : potato,tomato,chillies,green-pepper,spinach +updateVegetablesCollection(veggies, 'spinach'); +// spinach already exists in the veggies collection. +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>indexOf()</code> wurde dem ECMA-262-Standard in der 5. Auflage hinzugefügt. Als solches ist es möglicherweise nicht in allen Implementierungen des Standards enthalten. Sie können dies umgehen, indem Sie den folgenden Code am Anfang Ihrer Skripte einfügen, um die Verwendung von <code>indexOf()</code> in Implementierungen zu ermöglichen, die es nicht nativ unterstützen. Dieser Algorithmus entspricht dem in der 5. Auflage von ECMA-262 angegebenen Algorithmus, vorausgesetzt {{jsxref("TypeError")}} und {{jsxref("Math.abs()")}} haben ihre ursprünglichen Werte.</p> + +<pre class="brush: js">if (!Array.prototype.indexOf) Array.prototype.indexOf = (function(Object, max, min){ + "use strict"; + return function indexOf(member, fromIndex) { + if(this===null||this===undefined)throw TypeError("Array.prototype.indexOf called on null or undefined"); + + var that = Object(this), Len = that.length >>> 0, i = min(fromIndex | 0, Len); + if (i < 0) i = max(0, Len+i); else if (i >= Len) return -1; + + if(member===void 0){ for(; i !== Len; ++i) if(that[i]===void 0 && i in that) return i; // undefined + }else if(member !== member){ for(; i !== Len; ++i) if(that[i] !== that[i]) return i; // NaN + }else for(; i !== Len; ++i) if(that[i] === member) return i; // all else + + return -1; // if the value was not found, then return -1 + }; +})(Object, Math.max, Math.min); +</pre> + +<p>Wenn Sie sich jedoch mehr für all die kleinen technischen Elemente interessieren, die durch den ECMA-Standard definiert werden, und Leistung oder Prägnanz weniger von Belang sind, dann könnte diese erklärende Polyfill-Lösung nützlicher für Sie sein.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.14 +// Reference: http://es5.github.io/#x15.4.4.14 +if (!Array.prototype.indexOf) { + Array.prototype.indexOf = function(searchElement, fromIndex) { + + var k; + + // 1. Let o be the result of calling ToObject passing + // the this value as the argument. + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var o = Object(this); + + // 2. Let lenValue be the result of calling the Get + // internal method of o with the argument "length". + // 3. Let len be ToUint32(lenValue). + var len = o.length >>> 0; + + // 4. If len is 0, return -1. + if (len === 0) { + return -1; + } + + // 5. If argument fromIndex was passed let n be + // ToInteger(fromIndex); else let n be 0. + var n = fromIndex | 0; + + // 6. If n >= len, return -1. + if (n >= len) { + return -1; + } + + // 7. If n >= 0, then Let k be n. + // 8. Else, n<0, Let k be len - abs(n). + // If k is less than 0, then let k be 0. + k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); + + // 9. Repeat, while k < len + while (k < len) { + // a. Let Pk be ToString(k). + // This is implicit for LHS operands of the in operator + // b. Let kPresent be the result of calling the + // HasProperty internal method of o with argument Pk. + // This step can be combined with c + // c. If kPresent is true, then + // i. Let elementK be the result of calling the Get + // internal method of o with the argument ToString(k). + // ii. Let same be the result of applying the + // Strict Equality Comparison Algorithm to + // searchElement and elementK. + // iii. If same is true, return k. + if (k in o && o[k] === searchElement) { + return k; + } + k++; + } + return -1; + }; +} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.indexOf")}}</p> +</div> + +<h2 id="Kompatibilitätshinweise">Kompatibilitätshinweise</h2> + +<ul> + <li>Ab Firefox 47 {{geckoRelease(47)}} gibt diese Methode nicht mehr -0 zurück, z. B. gibt <code>[0].indexOf(0, -0)</code> jetzt immer <code>+0</code> zurück ({{bug(1242043)}}).</li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("TypedArray.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.indexOf()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/isarray/index.html b/files/de/web/javascript/reference/global_objects/array/isarray/index.html new file mode 100644 index 0000000000..2bdca7596a --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/isarray/index.html @@ -0,0 +1,121 @@ +--- +title: Array.isArray() +slug: Web/JavaScript/Reference/Global_Objects/Array/isArray +tags: + - Array + - ECMAScript5 + - JavaScript + - Method + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray +--- +<div>{{JSRef}}</div> + +<p>Die <code><strong>Array.isArray()</strong></code> Funktion prüft, ob das übergebene Objekt ein {{jsxref("Array")}} ist.</p> + +<pre class="brush: js">Array.isArray([1, 2, 3]); // true +Array.isArray({foo: 123}); // false +Array.isArray('foobar'); // false +Array.isArray(undefined); // false +</pre> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>Array.isArray(<var>obj</var>)</code></pre> + +<h3 id="Parameters" name="Parameters">Parameter</h3> + +<dl> + <dt><code>value</code></dt> + <dd>Der zu überprüfende Wert.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Wenn der Wert ein {{jsxref("Array")}} ist wird <code>true</code> zurückgegeben, andernfalls <code>false</code>.</p> + +<h2 id="Description" name="Description">Beschreibung</h2> + +<p>Wenn der Wert ein {{jsxref("Array")}} ist, wir <code>true</code> zurückzugeben, andernfalls <code>false</code>.</p> + +<p>Eine detailliertere Beschreibung ist im Artikel <a href="http://web.mit.edu/jwalden/www/isArray.html">Determining with absolute accuracy whether or not a JavaScript object is an array</a> enthalten (auf Englisch). Wird eine {{jsxref("TypedArray")}}-Instanz geprüft, wird immer <code>false</code> zurückgegeben.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Einsatz_von_Array.isArray">Einsatz von Array.isArray</h3> + +<pre class="brush: js">// die folgenden Ausdrücke geben true zurück +Array.isArray([]); +Array.isArray([1]); +Array.isArray(new Array()); +Array.isArray(new Array('a', 'b', 'c', 'd')); +Array.isArray(new Array(3)); +// wenig bekannt: Array.prototype ist selbst ein Array. +Array.isArray(Array.prototype); + +// die folgenden Ausdrücke geben alle false zurück +Array.isArray(); +Array.isArray({}); +Array.isArray(null); +Array.isArray(undefined); +Array.isArray(17); +Array.isArray("Array"); +Array.isArray(true); +Array.isArray(false); +Array.isArray(new Uint8Array(32)); +Array.isArray({ __proto__ : Array.prototype }); +</pre> + +<h3 id="instanceof_vs_isArray"><code>instanceof</code> vs <code>isArray</code></h3> + +<p>Wenn auf eine <code>Array</code> Instanz geprüft wird, ist <code>Array.isArray</code> besser geeignet als <code>instanceof</code>, weil es auch mit <code>iframes</code> funktioniert.</p> + +<pre class="brush: js">var iframe = document.createElement('iframe'); +document.body.appendChild(iframe); +xArray = window.frames[window.frames.length-1].Array; +var arr = new xArray(1,2,3); // [1,2,3] + +// Richtiges Prüfen für Arrays +Array.isArray(arr); // true +// Als nicht richtig angesehen, weil es nicht mit iframes funktioniert +arr instanceof Array; // false +</pre> + +<h2 id="Compatibility" name="Compatibility">Polyfill</h2> + +<p>Der folgende Code implementiert die Methode, wenn <code>Array.isArray()</code> nicht nativ unterstützt wird.</p> + +<pre class="brush: js">if(!Array.isArray) { + Array.isArray = function (vArg) { + return Object.prototype.toString.call(vArg) === "[object Array]"; + }; +} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.isArray")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/join/index.html b/files/de/web/javascript/reference/global_objects/array/join/index.html new file mode 100644 index 0000000000..4e986bebda --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/join/index.html @@ -0,0 +1,114 @@ +--- +title: Array.prototype.join() +slug: Web/JavaScript/Reference/Global_Objects/Array/join +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/join +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Die <code><strong>join()</strong></code> Methode verkettet alle Elemente eines Arrays (oder <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">Array-ähnlicher Objekte</a>) durch Kommata getrennt oder einem angegebenen Trennzeichen in einem String und gibt diesen zurück. Enthält das Array nur ein Element wird nur dieses ohne Trennzeichen zurückgegeben.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/array-join.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>arr</var>.join([<var>separator</var>])</code></pre> + +<h3 id="Parameters" name="Parameters">Parameter</h3> + +<dl> + <dt><code>separator</code> {{optional_inline}}</dt> + <dd>Gibt einen String an, um jedes Paar benachbarter Elemente des Arrays voneinander zu trennen. Das Trennzeichen wird bei Bedarf in einen String umgewandelt. Wenn nicht angegeben, werden die Array-Elemente durch ein Komma (",") getrennt. Wenn <code>separator</code> ein leerer String ist, werden alle Elemente ohne Trennzeichen miteinander verbunden.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein String in dem alle Arrayelemente verkettet sind. Wenn <code><em>arr</em>.length</code> gleich <code>0</code> ist, wird der leere String zurückgegeben.</p> + +<h2 id="Description" name="Description">Beschreibung</h2> + +<p>Alle Elemente des Arrays werden in Strings umgewandelt und in einem String miteinander verkettet</p> + +<div class="warning"> +<p>Falls ein Element <code>undefined</code> oder <code>null</code> ist, wird es in einen leeren String umgewandelt.</p> +</div> + +<h2 id="Examples" name="Examples">Beispiele</h2> + +<h3 id="Example:_Joining_an_array_three_different_ways" name="Example:_Joining_an_array_three_different_ways">Einen Array auf vier verschiedene Arten zusammenführen</h3> + +<p>Im folgenden Beispiel wird ein Array <code>a</code> mit drei Elementen erstellt, das dann viermal mit miteinander verbunden wird: mit dem Standardtrennzeichen, einem Komma mit Leerzeichen, einem Pluszeichen und einem leeren String.</p> + +<pre class="brush: js">var a = ['Wind', 'Rain', 'Fire']; +a.join(); // 'Wind,Rain,Fire' +a.join(', '); // 'Wind, Rain, Fire' +a.join(' + '); // 'Wind + Rain + Fire' +a.join(''); // 'WindRainFire' +</pre> + +<h3 id="Zusammenführen_eines_Array-ähnlichen_Objekts">Zusammenführen eines Array-ähnlichen Objekts</h3> + +<p>Das Folgende Beispiel fügt ein Array-ähnliches Objekt ({{jsxref("Functions/arguments", "arguments")}}) zusammen, indem {{jsxref("Function.prototype.call", "call()")}} auf <code>Array.prototype.join</code> aufgerufen wird.</p> + +<pre class="brush: js">function f(a, b, c) { + var s = Array.prototype.join.call(arguments); + console.log(s); // '<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">1,a,true'</span></span></span></span> +} +f(1, 'a', true); +// Erwartete Ausgabe: "1,a,true" +</pre> + +<h2 id="Specifications" name="Specifications">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. Implementiert in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.join")}}</p> +</div> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{jsxref("String.prototype.split()")}}</li> + <li>{{jsxref("Array.prototype.toString()")}}</li> + <li>{{jsxref("TypedArray.prototype.join()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/keys/index.html b/files/de/web/javascript/reference/global_objects/array/keys/index.html new file mode 100644 index 0000000000..e809654bcc --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/keys/index.html @@ -0,0 +1,76 @@ +--- +title: Array.prototype.keys() +slug: Web/JavaScript/Reference/Global_Objects/Array/keys +tags: + - Array + - ECMAScript 2015 + - Iterator + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/keys +--- +<div>{{JSRef}}</div> + +<p>Die <code><strong>keys()</strong></code> Methode gibt ein neues <code><strong>Array Iterator</strong></code> Objekt zurück, welches den Schlüssel für jeden Index des Arrays enthält.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-keys.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.keys()</pre> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein neues {{jsxref("Array")}} iterator-Objekt.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Der_Key_Iterator_ignoriert_keine_Lücken">Der Key Iterator ignoriert keine Lücken</h3> + +<pre class="brush: js notranslate">var arr = ['a', , 'c']; +var sparseKeys = Object.keys(arr); +var denseKeys = [...arr.keys()]; +console.log(sparseKeys); // ['0', '2'] +console.log(denseKeys); // [0, 1, 2] +</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-array.prototype.keys', 'Array.prototype.keys')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.keys")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array.prototype.values()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li><a href="/de/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/lastindexof/index.html b/files/de/web/javascript/reference/global_objects/array/lastindexof/index.html new file mode 100644 index 0000000000..7ad2b99661 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/lastindexof/index.html @@ -0,0 +1,168 @@ +--- +title: Array.prototype.lastIndexOf() +slug: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf +tags: + - Array + - ECMAScript 5 + - JavaScript + - Method + - Prototype + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf +--- +<div>{{JSRef}}</div> + +<p>Die <code><strong>lastIndexOf()</strong></code> Methode gibt den letzten Index zurück, an dem ein übergebenes Element im Array gefunden wurde, oder -1, wenn es nicht vorhanden ist. Das Array wird rückwärts durchsucht beginnend beim <code>fromIndex</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-lastindexof.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>arr</var>.lastIndexOf(<var>searchElement</var>) +<var>arr</var>.lastIndexOf(<var>searchElement</var>, <var>fromIndex</var>) +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>searchElement</code></dt> + <dd>Element, nach dem im Feld gesucht wird.</dd> + <dt><code>fromIndex</code> {{optional_inline}}</dt> + <dd>Der Index an dem die Suche rückwärts begonnen wird. Der Standardwert ist die Arraylänge minus eins (<code>arr.length - 1</code>), d. h. das gesamte Feld wird durchsucht. Wenn der Index größer oder gleich der Länge des Arrays ist, wird das gesamte Array durchsucht. Ist der Index eine negative Zahl, wird er als Offset vom Ende des Arrays behandelt. Bei Verwendung eines negativen Index wird das Array trotzdem von hinten nach vorne durchsucht. Wenn der errechnete Index kleiner als 0 ist, wird -1 zurückgegeben, d.h. das Feld wird nicht durchsucht.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Der letzte Index des gesuchten Elementes aus dem Feld. <strong>-1</strong> wenn keins gefunden wurde.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p><code>lastIndexOf</code> vergleicht das <code>searchElement</code> mit den Elementen des Feldes und verwendet hierzu die <a href="/de/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Die_Gleichheitsoperatoren_anwenden">strikte Gleichheit</a> (Die gleiche Methode, die beim <code>===</code> Operator (triple-equals) angewendet wird.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="lastIndexOf_verwenden"><code>lastIndexOf</code> verwenden</h3> + +<p>Das folgende Beispiel verwendet <code>lastIndexOf</code>, um Werte in einem Array zu finden.</p> + +<pre class="brush: js">var numbers = [2, 5, 9, 2]; +numbers.lastIndexOf(2); // 3 +numbers.lastIndexOf(7); // -1 +numbers.lastIndexOf(2, 3); // 3 +numbers.lastIndexOf(2, 2); // 0 +numbers.lastIndexOf(2, -2); // 0 +numbers.lastIndexOf(2, -1); // 3 +</pre> + +<h3 id="Finde_jedes_Vorkommen_eines_Elementes">Finde jedes Vorkommen eines Elementes</h3> + +<p>Das folgende Beispiel benutzt <code>lastIndexOf</code>, um alle Indizes eines Elementes in einem Array zu finden, wobei sie mit Hilfe von {{jsxref("Array.prototype.push", "push")}} zu einem anderen Array hinzugefügt werden, sobald sie gefunden werden.</p> + +<pre class="brush: js">var indices = []; +var array = ['a', 'b', 'a', 'c', 'a', 'd']; +var element = 'a'; +var idx = array.lastIndexOf(element); +while (idx != -1) { + indices.push(idx); + idx = (idx > 0 ? array.lastIndexOf(element, idx - 1) : -1); +} + +console.log(indices); +// [4, 2, 0] +</pre> + +<p>Der Fall <code>idx == 0</code> muss hier separat behandelt werden, weil das Element immer gefunden wird, unabhängig vom <code>fromIndex</code> Parameter, falls es das erste Element im Feld ist. Das ist der Unterschieder zur {{jsxref("Array.prototype.indexOf", "indexOf")}} Methode.</p> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>lastIndexOf</code> wurde dem ECMA-262-Standard in der fünften Edition hinzugefügt; sie könnte daher nicht in allen Browsern verfügbar sein. Der Fehler kann umgangen werden, indem der folgende Code zu Beginn eines Skriptes eingesetzt wird. Dies ermöglicht die Verwendung von <code>lastIndexOf</code>, auch wenn die Methode nativ nicht unterstützt wird. Dieser Algorithmus stimmt mit dem überein, was in ECMA-262 der 5. Edition, spezifiziert wurde, unter der Annahme, dass {{jsxref("Object")}}, {{jsxref("TypeError")}}, {{jsxref("Number")}}, {{jsxref("Math.floor")}}, {{jsxref("Math.abs")}}, und {{jsxref("Math.min")}} ihre originalen Werte haben.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.15 +// Reference: http://es5.github.io/#x15.4.4.15 +if (!Array.prototype.lastIndexOf) { + Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) { + 'use strict'; + + if (this === void 0 || this === null) { + throw new TypeError(); + } + + var n, k, + t = Object(this), + len = t.length >>> 0; + if (len === 0) { + return -1; + } + + n = len - 1; + if (arguments.length > 1) { + n = Number(arguments[1]); + if (n != n) { + n = 0; + } + else if (n != 0 && n != (1 / 0) && n != -(1 / 0)) { + n = (n > 0 || -1) * Math.floor(Math.abs(n)); + } + } + + for (k = n >= 0 ? Math.min(n, len - 1) : len - Math.abs(n); k >= 0; k--) { + if (k in t && t[k] === searchElement) { + return k; + } + } + return -1; + }; +} +</pre> + +<p>Erneute Anmerkung: Diese Implementation zielt auf eine absolute Kompatibilität von <code>lastIndexOf</code> mit Firefox und der SpiderMonkey JavaScript Umgebung aus, inklusive einigen Fällen, welche wohl Grenzfälle sind. Beim Vorhaben diese Funktion in eigenen Applikationen zu verwenden, ist eine Berechnung von <code>from</code> mit weniger komplizierten Code möglich, wenn diese Fälle ignoriert werden.</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('ES5.1', '#sec-15.4.4.15', 'Array.prototype.lastIndexOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.lastIndexOf")}}</p> +</div> + +<h2 id="Kompatibilitätshinweise">Kompatibilitätshinweise</h2> + +<ul> + <li>Beginnend mit Firefox 47 {{geckoRelease(47)}}, gibt diese Methode nicht mehr <code>-0 zurück</code>. Zum Beispiel wird <code>[0].lastIndexOf(0, -0)</code> immer <code>+0</code> zurückgeben ({{bug(1242043)}}).</li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> + <li>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/length/index.html b/files/de/web/javascript/reference/global_objects/array/length/index.html new file mode 100644 index 0000000000..5357719669 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/length/index.html @@ -0,0 +1,149 @@ +--- +title: Array.prototype.length +slug: Web/JavaScript/Reference/Global_Objects/Array/length +tags: + - Array + - JavaScript + - Property + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/length +--- +<div>{{JSRef}}</div> + +<p>Die <code><strong>length</strong></code> Eigenschaft eines Objektes vom Typ <code>Array</code> setzt die Anzahl der Elemente in einem Array oder gibt diese Anzahl zurück. Der Wert ist eine vorzeichenlose, 32-Bit Ganzzahl, welche größer als der größte Index im Array ist.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-length.html")}}</div> + + + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Der Wert der <code>length</code> Eigenschaft ist ein positive, ganze Zahl und hat einen Wert kleiner als 2<sup>32</sup>.</p> + +<pre class="brush: js notranslate">var namelistA = new Array(4294967296); //4294967296 = 2<sup>32</sup> +var namelistC = new Array(-100) //negative sign + +console.log(namelistA.length); //RangeError: Invalid array length +console.log(namelistC.length); //RangeError: Invalid array length + + + +var namelistB = []; +namelistB.length = Math.pow(2,32)-1; //set array length less than 2 to the 32nd power +console.log(namelistB.length); + +//4294967295 +</pre> + +<p>Man kann die <code>length</code> Eigenschaft eines Array zu jeder Zeit ändern, um das Array zu kürzen. Wenn ein Array mit dem Ändern der <code>length</code> Eigenschaft vergrößert wird, erhöht sich die Anzahl der der tatsächlichen Elemente. Wenn z. B. <code>length</code> auf 3 gesetzt wird und die aktuelle länge 2 ist, dann enthält das Array 3 Elemente, wobei das dritte Element <code>undefined</code> ist.</p> + +<pre class="brush: js notranslate">var arr = [1, 2, 3]; +printEntries(arr); + +arr.length = 5; // set array length to 5 while currently 3. +printEntries(arr); + +function printEntries(arr) { + var length = arr.length; + for (var i = 0; i < length; i++) { + console.log(arr[i]); + } + console.log('=== printed ==='); +} + +// 1 +// 2 +// 3 +// === printed === +// 1 +// 2 +// 3 +// undefined +// undefined +// === printed ===</pre> + +<p>Jedoch sagt die <code>length</code> Eigenschaft nicht zwangsläufig etwas über die Anzahl der definierten Werte in einem Array aus. Mehr dazu im Artikel <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array#Relationship_between_length_and_numerical_properties" title="Relationship between length and numerical properties">Beziehung zwischen Längen und nummerischen Eigenschaften</a>.</p> + +<p>{{js_property_attributes(1, 0, 0)}}</p> + +<div> +<ul> + <li><code>Writable</code>: Wenn das Attribut auf <code>false</code> gesetzt ist, kann der Wert der Eigenschaft nicht mehr geändert werden.</li> + <li><code>Configurable</code>: Wenn das Attribut auf <code>false</code> gesetzt ist, wird jeder Versuch scheitern, die Werte der Attribute <code>Writable</code>, <code>Configurable<font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> und </span></font></code><code>Enumerable </code>zu ändern.</li> + <li><code>Enumerable</code>: Wenn das Attribut auf <code>true</code> gesetzt ist, wird das Attribut während <a href="/de/docs/Web/JavaScript/Reference/Statements/for">for</a> oder <a href="/de/docs/Web/JavaScript/Reference/Statements/for...in">for..in</a> Schleifen iteriert.</li> +</ul> +</div> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Iterieren_über_ein_Array">Iterieren über ein Array</h3> + +<p>Im folgenden Beispiel wird über das <code>numbers</code> Array iteriert. Dabei wird die <code>length</code> Eigenschaft verwendet, um festzustellen, wie viele Elemente das Array enthält. Der Wert jedes Elements wird dabei verdoppelt.</p> + +<pre class="brush: js notranslate">var numbers = [1, 2, 3, 4, 5]; + +for (var i = 0; i < numbers.length; i++) { + numbers[i] *= 2; +} +// numbers enthält jetzt die Werte: [2, 4, 6, 8, 10] +</pre> + +<h3 id="Verkürzung_eines_Arrays">Verkürzung eines Arrays</h3> + +<p>Das folgende Beispiel verkürzt das Array <code>numbers</code> auf eine Länge von 3, wenn die Länge größer als 3 ist.</p> + +<pre class="brush: js notranslate">var numbers = [1, 2, 3, 4, 5]; + +if (numbers.length > 3) { + numbers.length = 3; +} + +console.log(numbers); // [1, 2, 3] +console.log(numbers.length); // 3 +</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('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompabilität">Browserkompabilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.length")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/map/index.html b/files/de/web/javascript/reference/global_objects/array/map/index.html new file mode 100644 index 0000000000..8227658ca6 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/map/index.html @@ -0,0 +1,337 @@ +--- +title: Array.prototype.map() +slug: Web/JavaScript/Reference/Global_Objects/Array/map +tags: + - Array + - ECMAScript 5 + - JavaScript + - Method + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/map +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Die <strong><code>map()</code></strong> (engl. <em>abbilden</em>) Methode<strong> </strong>wendet auf jedes Element des Arrays die bereitgestellte Funktion an und gibt das Ergebnis in einem neuen Array zurück.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/array-map.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate"><var>var new_array = arr</var>.map(function <var>callback(currentValue[, index[, array]]) { + </var>// Zurückgegebenes Element für new_array<var> +}</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parameters" name="Parameters">Parameter</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Funktion, die ein Element für das neue Array erstellt und drei Argumente entgegennimmt:</dd> + <dd> + <dl> + <dt><code>currentValue</code></dt> + <dd>Das aktuelle Element, das im Array verarbeitet wird.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>Der Index des aktuellen Elements, das im Array verarbeitet wird.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>Das Array, welches mit <code>map()</code> durchlaufen wird.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{optional_inline}}</dt> + <dd>Wert, der als <code>this</code> verwendet wird, wenn <code>callback</code> ausgeführt wird.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein neues Array, von dem jedes Element das Ergebnis der Callback-Funktion ist.</p> + +<h2 id="Description" name="Description">Beschreibung</h2> + +<p><code>map()</code> ruft eine bereitgestellte <code>callback</code> Funktion <strong>für jedes Element</strong> in einem Array der Reihe nach auf und erstellt aus den Ergebnissen ein neues Array. <code>callback</code> wird nur für Indizes des Arrays aufgerufen, denen Werte zugewiesen wurden, einschließlich {{jsxref("undefined")}}. Es wird nicht für fehlende Elemente des Arrays aufgerufen (d. h. Indizes, die noch nie festgelegt, gelöscht oder denen noch kein Wert zugewiesen wurde).</p> + +<p><code>map()</code> zu benutzen, wenn das davon neu erstellte Array nicht benutzt wird, gilt als <a href="https://de.wikipedia.org/wiki/Anti-Pattern">Anti-Pattern</a>. Verwenden Sie stattdessen {{jsxref("Array/forEach", "forEach()")}} oder {{jsxref("statements/for...of", "for...of")}}.</p> + +<p>Sie sollten <code>map()</code> nicht verwenden, wenn:</p> + +<ul> + <li>Sie das Array, das zurückgegeben wird, nicht benötigen und/oder</li> + <li>Ihr Callback keinen Wert zurückgibt.</li> +</ul> + +<p><code>callback</code> wird mit drei Argumenten aufgerufen:</p> + +<ol> + <li>Der Wert des Elements</li> + <li>Der Index des Elements</li> + <li>Das Array-Objekt, das durchlaufen wird</li> +</ol> + +<p>Falls der Parameter <code>thisArg</code> an <code>map()</code> übergeben wird, wird er als Wert für <code>this</code> innerhalb von <code>callback</code> verwendet. Andernfalls hat <code>this</code> den Wert {{jsxref("undefined")}}. Welchen Wert <code>callback</code> letztendlich in <code>this</code> steht, wird gemäß <a href="/de/docs/Web/JavaScript/Reference/Operators/this">der üblichen Regeln bestimmt, nach denen <code>this</code> für eine Funktion ermittelt wird</a>.</p> + +<p><code>map()</code> selbst verändert das Array nicht, auf dem es aufgerufen wird (das aufgerufene <code>callback</code> kann jedoch Änderungen vornehmen).</p> + +<p>Der Bereich der von <code>map()</code> verarbeiteten Elemente wird vor dem ersten Aufruf von <code>callback</code> festgelegt. Elemente, die nach Beginn des Aufrufs von <code>map()</code> an das Array angehängt werden, werden von <code>callback</code> nicht berücksichtigt. Wenn vorhandene Elemente des Arrays geändert werden, ist der Wert maßgeblich, den <code>map()</code> beim Erreichen eines Elements antrifft und dann an <code>callback</code> übergibt. Nachfolgende Elemente, die nach Beginn eines Durchlaufs von <code>map()</code> gelöscht werden, bevor sie eingelesen werden konnten, werden nicht mehr berücksichtigt.</p> + +<p>Aufgrund des in der Spezifikation definierten Algorithmus haben Arrays mit vielen leeren Elementen auch nach einem Aufruf von <code>map()</code> immer noch leere Elemente, wobei die leeren Elemente an ihren Indizes verbleiben.</p> + +<h2 id="Examples" name="Examples">Beispiele</h2> + +<h3 id="Example_Mapping_an_array_of_numbers_to_an_array_of_square_roots" name="Example:_Mapping_an_array_of_numbers_to_an_array_of_square_roots">Erstellen eines Arrays mit Quadratwurzeln aus einem Array mit Zahlen</h3> + +<p>Der folgende Code verwendet ein Array mit Zahlen und erstellt ein neues Array, das die Quadratwurzeln der Zahlen im ersten Array enthält.</p> + +<pre class="brush: js notranslate">var numbers = [1, 4, 9]; +var roots = numbers.map(Math.sqrt); +// roots ist jetzt [1, 2, 3] +// numbers ist immer noch [1, 4, 9] +</pre> + +<h3 id="Objekte_innerhalb_eines_Arrays_mit_map_neu_formatieren">Objekte innerhalb eines Arrays mit <code>map()</code> neu formatieren</h3> + +<p>Der folgende Code nimmt ein Array mit Objekten und erstellt daraus ein neues Array, in dem die Objekte neu formatiert wurden.</p> + +<pre class="brush: js notranslate">var kvArray = [{key: 1, value: 10}, + {key: 2, value: 20}, + {key: 3, value: 30}]; + +var reformattedArray = kvArray.map(obj => { + var rObj = {}; + rObj[obj.key] = obj.value; + return rObj; +}); +// reformattedArray ist jetzt [{1: 10}, {2: 20}, {3: 30}], + +// kvArray ist immer noch: +// [{key: 1, value: 10}, +// {key: 2, value: 20}, +// {key: 3, value: 30}]</pre> + +<h3 id="Example_Mapping_an_array_of_numbers_using_a_function_containing_an_argument" name="Example:_Mapping_an_array_of_numbers_using_a_function_containing_an_argument">Erstellen eines Arrays mit Zahlen mithilfe einer Funktion, die ein Argument entgegennimmt</h3> + +<p>Der folgende Code zeigt, wie <code>map()</code> im Zusammenhang mit einer Funktion arbeitet, welche ein Argument entgegennimmt. Dem Argument wird automatisch der Wert des aktuellen Elements des Arrays zugewiesen, das von <code>map()</code> durchlaufen wird.</p> + +<pre class="brush: js notranslate">var numbers = [1, 4, 9]; +var doubles = numbers.map(function(num) { + return num * 2; +}); + +// doubles ist jetzt [2, 8, 18] +// numbers ist immer noch [1, 4, 9]</pre> + +<h3 id="Example_using_map_generically" name="Example:_using_map_generically">Generischer Einsatz von <code>map()</code></h3> + +<p>In diesem Beispiel wird veranschaulicht, wie <code>map()</code> auf einen {{jsxref("Global_Objects/String", "String")}} angewendet wird, um ein Array mit Bytes zu erhalten, welche den jewiligen Zeichenwerten im <a href="https://de.wikipedia.org/wiki/American_Standard_Code_for_Information_Interchange#ASCII-Tabelle">ASCII-Zeichensatz</a> entsprechen:</p> + +<pre class="brush: js notranslate">var map = Array.prototype.map; +var a = map.call('Hello World', function(x) { + return x.charCodeAt(0); +}); +// a now equals [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100] +</pre> + +<h3 id="Example_using_map_generically_querySelectorAll" name="Example:_using_map_generically_querySelectorAll">Generischer Einsatz von <code>map()</code> zusammen mit <code>querySelectorAll()</code></h3> + +<p>In diesem Beispiel wird gezeigt, wie Sie eine Sammlung von Objekten durchlaufen, die von {{domxref("document.querySelectorAll()", "querySelectorAll()")}} erfasst wurde. Dies liegt daran, dass {{domxref("document.querySelectorAll()", "querySelectorAll()")}} eine {{domxref("NodeList")}} zurückgibt, bei der es sich um eine Auflistung von Objekten handelt. In diesem Fall geben wir alle Werte der ausgewählten Optionen auf dem Bildschirm zurück:</p> + +<pre class="brush: js notranslate">var elems = document.querySelectorAll('select option:checked'); +var values = Array.prototype.map.call(elems, function(obj) { + return obj.value; +}); +</pre> + +<p>Einfacher wäre die Methode {{jsxref("Array.from()")}}.</p> + +<h3 id="Example_Tricky_use_case" name="Example:_Tricky_use_case">Verzwickter Anwendungsfall</h3> + +<p><a href="http://www.wirfs-brock.com/allen/posts/166">(Inspiriert von diesem Blogpost)</a></p> + +<p>Üblicherweise wird die <code>callback</code> Funktion mit nur einem Argument benutzt. Das trifft auch für bestimmte andere Funktionen zu obwohl diese weitere optionale Argumente akzeptieren. Dies kann jedoch zu verwirrendem Verhalten führen.</p> + +<p>Betrachten wir folgendes Beispiel:</p> + +<pre class="brush: js notranslate">['1', '2', '3'].map(parseInt); + +// Man würde erwarten [1, 2, 3] +// Tatsächlich ist das Ergebnis aber [1, NaN, NaN] + +// parseInt wird oft nur mit einem Argument aufgerufen, akzeptiert aber zwei. +// Der erste ist ein Ausdruck und der zweite ist die Basis. + +// Array.prototype.map übergibt 3 Argumente an die Callback-Funktion: +// das Element, den Index, das Array + +// Das dritte Argument wird von parseInt ignoriert, das zweite jedoch nicht, +// was verwirrend sein kann. Siehe den Blogpost für weitere Details + +// Falls der Link nicht funktioniert: +// ein kurzes Beispiel der Durchläufe: +// parseInt(string, radix) -> map(parseInt(value, index)) +// erster Durchlauf (Index ist 0): parseInt('1', 0) // führt zu parseInt('1', 0) -> 1 +// zweiter Durchlauf (Index ist 1): parseInt('2', 1) // führt zu parseInt('2', 1) -> NaN +// dritter Durchlauf (Index ist 2): parseInt('3', 2) // führt zu parseInt('3', 2) -> NaN + +function returnInt(element) { + return parseInt(element, 10); +} + +['1', '2', '3'].map(returnInt); // [1, 2, 3] +// Tatsächliches Ergebnis ist ein Array mit Nummern (wie erwartet) + +// Wie oben, jedoch unter Verwendung der kurzen Funktionssyntax mit Pfeil +['1', '2', '3'].map( str => parseInt(str) ); + +// Eine einfachere Methode, um selbiges zu erreichen, während Fallstricke vermieden werden: +['1', '2', '3'].map(Number); // [1, 2, 3] + +// Im Gegensatz zu `parseInt` werden jedoch auch Fließkommazahlen oder (aufgelöste) Exponentialnotationen zurückgegeben: +['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]</pre> + +<p>Eine alternative Ausgabe der <code>map()</code> Methode, welche mit {{jsxref("Global_Objects/parseInt", "parseInt()")}} als Parameter aufgerufen wird, funktioniert wie folgt:</p> + +<pre class="brush: js notranslate">var xs = ['10', '10', '10']; + +xs = xs.map(parseInt); + +console.log(xs); +// Das tatsächliche Ergebnis von [ 10, NaN, 2 ] kann aufgrund der obigen Beschreibung unerwartet sein</pre> + +<h2 id="Polyfill" name="Polyfill">Polyfill</h2> + +<p><code>map()</code> wurde dem ECMA-262-Standard in der 5. Auflage hinzugefügt. Als solches ist es möglicherweise nicht in allen Implementierungen des Standards enthalten. Sie können dies umgehen, indem Sie den folgenden Code am Anfang Ihrer Skripte einfügen, um die Verwendung von <code>map()</code> in Implementierungen zu ermöglichen, die es nicht nativ unterstützen. Dieser Dieser Algorithmus entspricht dem in der 5. Auflage von ECMA-262 angegebenen Algorithmus, vorausgesetzt {{jsxref("Object")}}, {{jsxref("TypeError")}} und {{jsxref("Array")}} haben ihre ursprünglichen Werte und <code>callback.call()</code> wird mit dem ursprünglichen Wert von {{jsxref("Function.prototype.call()")}} ausgewertet.</p> + +<pre class="brush: js notranslate">// Production steps of ECMA-262, Edition 5, 15.4.4.19 +// Reference: http://es5.github.io/#x15.4.4.19 +if (!Array.prototype.map) { + + Array.prototype.map = function(callback, thisArg) { + + var T, A, k; + + if (this == null) { + throw new TypeError(' this is null or not defined'); + } + + // 1. Let O be the result of calling ToObject passing the |this| + // value as the argument. + var O = Object(this); + + // 2. Let lenValue be the result of calling the Get internal + // method of O with the argument "length". + // 3. Let len be ToUint32(lenValue). + var len = O.length >>> 0; + + // 4. If IsCallable(callback) is false, throw a TypeError exception. + // See: http://es5.github.com/#x9.11 + if (typeof callback !== 'function') { + throw new TypeError(callback + ' is not a function'); + } + + // 5. If thisArg was supplied, let T be thisArg; else let T be undefined. + if (arguments.length > 1) { + T = thisArg; + } + + // 6. Let A be a new array created as if by the expression new Array(len) + // where Array is the standard built-in constructor with that name and + // len is the value of len. + A = new Array(len); + + // 7. Let k be 0 + k = 0; + + // 8. Repeat, while k < len + while (k < len) { + + var kValue, mappedValue; + + // a. Let Pk be ToString(k). + // This is implicit for LHS operands of the in operator + // b. Let kPresent be the result of calling the HasProperty internal + // method of O with argument Pk. + // This step can be combined with c + // c. If kPresent is true, then + if (k in O) { + + // i. Let kValue be the result of calling the Get internal + // method of O with argument Pk. + kValue = O[k]; + + // ii. Let mappedValue be the result of calling the Call internal + // method of callback with T as the this value and argument + // list containing kValue, k, and O. + mappedValue = callback.call(T, kValue, k, O); + + // iii. Call the DefineOwnProperty internal method of A with arguments + // Pk, Property Descriptor + // { Value: mappedValue, + // Writable: true, + // Enumerable: true, + // Configurable: true }, + // and false. + + // In browsers that support Object.defineProperty, use the following: + // Object.defineProperty(A, k, { + // value: mappedValue, + // writable: true, + // enumerable: true, + // configurable: true + // }); + + // For best browser support, use the following: + A[k] = mappedValue; + } + // d. Increase k by 1. + k++; + } + + // 9. return A + return A; + }; +} +</pre> + +<h2 id="Specifications" name="Specifications">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('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.map")}}</p> +</div> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Map")}}-Objekt</li> + <li>{{jsxref("Array.from()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/observe/index.html b/files/de/web/javascript/reference/global_objects/array/observe/index.html new file mode 100644 index 0000000000..2926d777fc --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/observe/index.html @@ -0,0 +1,91 @@ +--- +title: Array.observe() +slug: Web/JavaScript/Reference/Global_Objects/Array/observe +tags: + - Array + - JavaScript + - Method + - Obsolete +translation_of: Archive/Web/JavaScript/Array.observe +--- +<div>{{JSRef}} {{obsolete_header}}</div> + +<p>Die <strong><code>Array.observe()</code></strong> Methode wurde für das asynchrone Beobachten von Veränderungen von Arrays benutzt, ähnlich wie {{jsxref("Object.observe()")}} für Objekte. Sie stellt einen Stream von Änderungen in der Reihenfolge, in denen sie auftreten, zur Verfügung.<br> + Equivalent zu <code>Object.observe()</code> und wird ausgeführt mit der Liste <code>["add", "update", "delete", "splice"]</code>. Diese Funktion wurde als deprecated markiert und bereits aus einigen Browsern entfernt. Man kann stattdessen das allgemeinere {{jsxref("Proxy")}} Objekt verwenden.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>Array.observe(<var>arr</var>, <var>callback</var>)</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>arr</code></dt> + <dd> Das Array, welches beobachtet wird.</dd> + <dt><code>callback</code></dt> + <dd>Die Funktion, welche bei jeder Änderung mit folgenden Argumenten aufgerufen wird: + <dl> + <dt><code>changes</code></dt> + <dd>Ein Array aus Objekten. Jedes repräsentiert eine Änderung. Die Eigenschaften dieser change Objekte sind: + <ul> + <li><strong><code>name</code></strong>: Der Name der Eigenschaft, welche geändert wurde.</li> + <li><strong><code>object</code></strong>: Das veränderte Array, nachdem die Änderung stattfand.</li> + <li><strong><code>type</code></strong>: Ein String, welcher den Typ der Änderung darstellt. Er hat den Wert "add", "update", "delete", oder "splice".</li> + <li><strong><code>oldValue</code></strong>: Nur für "update" und "delete" Typ. Der Wert vor der Änderung.</li> + <li><strong><code>index</code></strong>: Nur für "splice" Typ. Der Index, an welchem die Änderung stattfand.</li> + <li><strong><code>removed</code></strong>: Nur für "splice" Typ. Ein Array aus den gelöschten Elementen.</li> + <li><strong><code>addedCount</code></strong>: Nur für "splice" Typ. Die Anzahl an Elementen, welche hinzugefügt wurden.</li> + </ul> + </dd> + </dl> + </dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Die <code>callback</code> Funktion wird jedes mal aufgerufen, wenn eine Änderung in arr stattfindet mit einem Array von allen Änderungen in der Reihenfolge in der sie auftreten</p> + +<div class="note"> +<p>Änderungen über die Array Methoden, wie zum Beispiel <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array/pop"><code>Array.prototype.pop()</code></a>, werden als "splice" "changes" dargestellt.<br> + Index Änderungen, welche die Länge des Arrays nicht verändern, werden als "update" "changes" dargestellt.</p> +</div> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Aufzeichnung_verschiedener_change_Typen">Aufzeichnung verschiedener change Typen</h3> + +<pre class="brush: js">var arr = ['a', 'b', 'c']; + +Array.observe(arr, function(changes) { + console.log(changes); +}); + +arr[1] = 'B'; +// [{type: 'update', object: <arr>, name: '1', oldValue: 'b'}] + +arr[3] = 'd'; +// [{type: 'splice', object: <arr>, index: 3, removed: [], addedCount: 1}] + +arr.splice(1, 2, 'beta', 'gamma', 'delta'); +// [{type: 'splice', object: <arr>, index: 1, removed: ['B', 'c', 'd'], addedCount: 3}] +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p><a href="https://github.com/arv/ecmascript-object-observe">Strawman proposal specification</a>.</p> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.observe")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="//stackoverflow.com/q/29269057/778272">Under what condition would Array.observe's “add” event trigger?</a></li> + <li>{{jsxref("Array.unobserve()")}} {{experimental_inline}}</li> + <li>{{jsxref("Object.observe()")}} {{experimental_inline}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/of/index.html b/files/de/web/javascript/reference/global_objects/array/of/index.html new file mode 100644 index 0000000000..e0e69d50f5 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/of/index.html @@ -0,0 +1,102 @@ +--- +title: Array.of() +slug: Web/JavaScript/Reference/Global_Objects/Array/of +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Method + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/of +--- +<div>{{JSRef}}</div> + +<div>Die <code><strong>Array.of()</strong></code> Methode erstellt eine neue {{jsxref("Array")}} Instanz aus einer variablen Anzahl an Argumenten, ohne Rücksicht auf die Anzahl oder den Typ der Argumente.</div> + +<div> </div> + +<div>Der Unterschied zwischen <code><strong>Array.of()</strong></code> und dem <code><strong>Array</strong></code> Konstruktor ist die Behandlung von ganzen Zahlen als Argumente: <code><strong>Array.of(7)</strong></code> erstellt ein Array mit einem Element, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">7</span></font>. <code><strong>Array(7)</strong></code> hingegen erstellt ein leeres Array, bei dem die Eigenschaft <code>length<span style='background-color: #ffffff; font-family: "Open Sans",arial,x-locale-body,sans-serif;'> </span></code>den Wert <code>7</code> gesetzt ist (<strong>Bemerkung:</strong> das impliziert ein Array mit <code>7</code> leeren Elementen, bei dem alle Elemente <code>undefined</code> sind).</div> + +<div> </div> + +<pre class="brush: js"><code>Array.of(7); // [7] +Array.of(1, 2, 3); // [1, 2, 3] + +Array(7); // [ , , , , , , ] +Array(1, 2, 3); // [1, 2, 3]</code> +</pre> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>Array.of(<var>element0</var>[, <var>element1</var>[, ...[, <var>elementN</var>]]])</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Elemente, welche sich im neu erzeugten Array befinden.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Eine neue {{jsxref("Array")}} Instanz.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Diese Funktion ist Teil des EMCAScript 2015 Standards. Für mehr Information siehe <a href="https://gist.github.com/rwaldron/1074126"><code>Array.of</code> and <code>Array.from</code> </a>und <a href="https://gist.github.com/rwaldron/3186576"><code>Array.of</code> polyfill</a>.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: js">Array.of(1); // [1] +Array.of(1, 2, 3); // [1, 2, 3] +Array.of(undefined); // [undefined] +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Wird der nachfolgende Code vor jedem anderen Code eingefügt, so wird Array.of() verfügbar, falls es nicht nativ implementiert ist.</p> + +<pre class="brush: js">if (!Array.of) { + Array.of = function() { + return Array.prototype.slice.call(arguments); + }; +} +</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('ES6', '#sec-array.of', 'Array.of')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompabilität">Browser Kompabilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.of")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.from()")}}</li> + <li>{{jsxref("TypedArray.of()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/pop/index.html b/files/de/web/javascript/reference/global_objects/array/pop/index.html new file mode 100644 index 0000000000..33274647f5 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/pop/index.html @@ -0,0 +1,98 @@ +--- +title: Array.prototype.pop() +slug: Web/JavaScript/Reference/Global_Objects/Array/pop +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop +--- +<div>{{JSRef("Global_Objects", "Array")}}</div> + +<p>Die <code><strong>pop()</strong></code> Methode entfernt das <strong>letzte</strong> Element eines Arrays und gibt dieses zurück. Diese Methode ändert die Länge des Arrays.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-pop.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>arr</var>.pop()</pre> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Das entfernte Element aus dem Array; {{jsxref("undefined")}} wenn das Array leer ist.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Die <code>pop</code>-Methode entfernt das letzte Element eines Arrays und gibt dieses zurück.</p> + +<p><code>pop</code> ist bewusst generisch gehalten. DIese Methode kann mit {{jsxref("Function.call", "called", "", 1)}} oder {{jsxref("Function.apply", "applied", "", 1)}} auf einem Objekten aufgerufen werden, welches Arrays ähneln ist. <span id="result_box" lang="de"><span>Objekte, die keine </span></span><code>length</code> Eigenschaft <span lang="de"><span>enthalten, welches das letzt Element in dem Objekt markieren oder keine nullbasierten numerischen Eigenschaften widerspiegelt, verhalten sich möglicherweise nicht in einer Weise.</span></span></p> + +<p>Wenn <code>pop()</code> auf einem leeren Array aufgerufen wird, so wird <code>undefined</code> zurückgegeben.</p> + +<h2 id="Example" name="Example">Beispiele</h2> + +<h3 id="Example:_Removing_the_last_element_of_an_array" name="Example:_Removing_the_last_element_of_an_array">Entfernen des letzten Elements eines Arrays</h3> + +<p>Der folgende Code erzeugt ein Array <code>myFish</code>, das aus vier Elementen besteht. Im Anschluss daran wird das letzte Element entfernt.</p> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; + +var popped = myFish.pop(); + +console.log(myFish); // ['angel', 'clown', 'mandarin' ] + +console.log(popped); // 'sturgeon'</pre> + +<h2 id="Specifications" name="Specifications">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>ECMAScript 3rd Edition</td> + <td>{{Spec2('ES3')}}</td> + <td>Initiale Definition. Implementiert mit JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser-Kompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.pop")}}</p> +</div> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> + <li>{{jsxref("Array.prototype.splice()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/prototypen/index.html b/files/de/web/javascript/reference/global_objects/array/prototypen/index.html new file mode 100644 index 0000000000..dcab74024e --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/prototypen/index.html @@ -0,0 +1,183 @@ +--- +title: Array.Prototypen +slug: Web/JavaScript/Reference/Global_Objects/Array/Prototypen +tags: + - Array + - JavaScript + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype +--- +<div>{{JSRef}}</div> + +<p>Die <strong><code>Array.prototype (Anordnung.Muster) </code></strong>Eigenschaft repräsentiert eine Schablone (Prototypen) des {{jsxref("Array")}} Konstrukteurs und erlaubt dir neue Eigenschaften und Methoden zu allen Array Objekten hinzuzufügen.</p> + +<pre class="brush: js">// Wenn JavaScript eine first() Methode vom Grundsatz nicht unterstützt +// füge eine neue Methode als Rückgabewert des ersten Elements als Array zurück + +if (!Array.prototype.first) { + Array.prototype.first = function() { + return this[0]; + } +}</pre> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>{{jsxref("Array")}} Instanzen erben vom <code>Array.prototype.</code> Wie mit allen Konstrukteuren kannst du das Konstrukteur Protoypen Objekt ändern, um alle {{jsxref("Array")}} Instanzen zu verändern. Ein Beispiel: du kannst neue Methoden und Eigenschaften zu allen Array-Objekten hinzufügen und diese damit erweitern. Dies wird zum Beispiel für {{Glossary("Polyfill", "polyfilling")}} genutzt.</p> + +<p>Ganz nebenbei: ein Array-Protoyp selbst ist ein {{jsxref("Array")}}:</p> + +<pre class="brush: js">Array.isArray(Array.prototype); // true +</pre> + +<p>{{js_property_attributes(0, 0, 0)}}</p> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<dl> + <dt><code>Array.prototype.constructor</code></dt> + <dd>Beschreibt die Funktion um ein Objekt-Prototypen zu erstellen.</dd> + <dt>{{jsxref("Array.prototype.length")}}</dt> + <dd>Gibt die Nummer an Elementen in einem Array wieder.</dd> + <dt>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</dt> + <dd>Eine Symbol-beinhaltende Eigenschaft beschreibt das ausschließen von einem mit <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code> eingebundenden Geltungsbereich.</dd> +</dl> + +<h2 id="Methoden">Methoden</h2> + +<h3 id="Mutationsmethoden">Mutationsmethoden</h3> + +<p>Diese Methoden verändern ein Array:</p> + +<dl> + <dt>{{jsxref("Array.prototype.copyWithin()")}}</dt> + <dd>Kopiert einen Teil eines Array Elements innerhalb eines Array.</dd> + <dt>{{jsxref("Array.prototype.fill()")}}</dt> + <dd>Füllt alle Elemente eines Arrays von einem Start-Index zu einem Ende-Index mit einem festen Wert.</dd> + <dt>{{jsxref("Array.prototype.pop()")}}</dt> + <dd>Entfernt das letzte Element von einem Array und gibt dieses Element als Rückgabewert aus.</dd> + <dt>{{jsxref("Array.prototype.push()")}}</dt> + <dd>Fügt eins oder mehrere Elemente zu dem Ende des Arrays hinzu und gibt die neue Länge des Arrays zurück</dd> + <dt>{{jsxref("Array.prototype.reverse()")}}</dt> + <dd>Dreht die Reihenfolge der Elemente in einem Array um - das erste Element wird das letzte und das letzte Element wird das erste.</dd> + <dt>{{jsxref("Array.prototype.shift()")}}</dt> + <dd>Entfernt das erste Element innerhalb eines Array und gibt das Element als Rückgabewert aus.</dd> + <dt>{{jsxref("Array.prototype.sort()")}}</dt> + <dd>Sortiert innerhalb eines Arrays die Elemente und gibt das sortierte Array aus.</dd> + <dt>{{jsxref("Array.prototype.splice()")}}</dt> + <dd>Fügt Elemente von einem Array hinzu und/oder entfernt diese.</dd> + <dt>{{jsxref("Array.prototype.unshift()")}}</dt> + <dd>Fügt ein oder mehr Elemente an erster Stelle eines Array hinzu und gibt die Länge des neuen Arrays zurück.</dd> +</dl> + +<h3 id="Zugriffsmethoden">Zugriffsmethoden</h3> + +<p>Diese Methoden verändern das Array nicht und geben als Rückgabewert eine Darstellung des Arrays an.</p> + +<dl> + <dt>{{jsxref("Array.prototype.concat()")}}</dt> + <dd>Gibt ein neues Array zusammengestellt von diesem Array und verknüpft mit anderen/ mehreren Array(s) und/ oder einem/ mehreren Wert(en).</dd> + <dt>{{jsxref("Array.prototype.includes()")}}</dt> + <dd>Überprüft, ob ein Array ein bestimmtes Element enthält und gibt als Rückgabewert <code>true</code> oder <code>false</code> an.</dd> + <dt>{{jsxref("Array.prototype.indexOf()")}}</dt> + <dd>Gibt die erste Stelle (Index) eines einzelnen, dem beschriebenen, Elements innerhalb eines Array an. Wenn das Element nicht gefunden wurde gibt er -1 zurück.</dd> + <dt>{{jsxref("Array.prototype.join()")}}</dt> + <dd>Verbindet alle Elemente eines Arrays zu einem String.</dd> + <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt> + <dd>Gibt den letzten (höchsten) Index des beschriebenen Elements innerhalb eines Arrays aus, oder -1, wenn nichts gefunden wurde.</dd> + <dt>{{jsxref("Array.prototype.slice()")}}</dt> + <dd>Extrahiert einen Teil eines Arrays und gibt diesen als neues Array aus.</dd> + <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Gibt ein Array-Literal des beschriebenen Arrays zurück; du kannst diesen Wert nutzen um ein neues Array zu erstellen. Überschreibt die {{jsxref("Object.prototype.toSource()")}} Methode.</dd> + <dt>{{jsxref("Array.prototype.toString()")}}</dt> + <dd>Gibt einen String zurück, welcher das Array und seine Elemente beinhaltet. Überschreibt die {{jsxref("Object.prototype.toString()")}} Methode.</dd> + <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt> + <dd>Gibt einen lokalen String zurück, welcher das Array und seine Elemente beschreibt. Überschreibt die {{jsxref("Object.prototype.toLocaleString()")}} Methode.</dd> +</dl> + +<h3 id="Zählmethoden">Zählmethoden</h3> + +<p>Einige Methoden nehmen als Argument eine Funktion an und führen diese während des Aufrufs des Arrays aus. Wenn diese Methoden aufgerufen werden, wird die Länge (<code>length)</code> des Arrays abgetastet und jedes Element außerhalb der dieser Länge innerhalb eines nicht aufgerufenen Callbacks hinzugefügt. Andere Änderungen zu einem Array (setzen eines Wertes oder das Löschen eines Elements) könnten Auswirkungen auf das Ergebnis der Operation haben, wenn die Methode das veränderte Element im Nachhinein besucht. Während das spezielle Verhalten dieser Methoden in einem solchen Fall gut definiert sind, solltest du dich dennoch nicht darauf verlassen, damit du andere, die deinen möglicherweise lesen - nicht verwirrt werden. Wenn du das Array verändern musst, solltest du das veränderte Array in ein neu erstelltes Array packen.</p> + +<dl> + <dt>{{jsxref("Array.prototype.entries()")}}</dt> + <dd>Gibt ein neues Array Zähl Objekt <code>(Array Iterator Object) </code>zurück, welches das key/value Paar für jeden Index in dem Array innehält.</dd> + <dt>{{jsxref("Array.prototype.every()")}}</dt> + <dd>Gibt <code>true</code> zurück, wenn alle Elemente in diesem Array die zu testende Funktion bestehen.</dd> + <dt>{{jsxref("Array.prototype.filter()")}}</dt> + <dd>Erstellt ein neues Array mit allen Elementen dieses Arrays für welches die Filter-Funktion innerhalb den Rückgabewert <code>true</code> benutzt.</dd> + <dt>{{jsxref("Array.prototype.find()")}}</dt> + <dd>Gibt den ersten gefundenen Wert innerhalb eines Arrays wieder, wenn ein Element innerhalb des Arrays die definierte Test-Funktion besteht oder <code>undefined </code>wenn nichts gefunden wurde.</dd> + <dt>{{jsxref("Array.prototype.findIndex()")}}</dt> + <dd>Gibt den gefundenen Index im Array an, wenn ein Element in dem Array die angegebene Test-Funktion besteht - oder -1, wenn nichts gefunden wurde.</dd> + <dt>{{jsxref("Array.prototype.forEach()")}}</dt> + <dd>Ruft eine Funktion für jedes Element in einem Array auf.</dd> + <dt>{{jsxref("Array.prototype.keys()")}}</dt> + <dd> + <p>Gibt einen neuen <code>Array Iterator (Zeiger)</code> aus, welcher die Schlüssel für jeden Index innerhalb des Arrays beinhaltet.</p> + </dd> + <dt>{{jsxref("Array.prototype.map()")}}</dt> + <dd>Erstellt ein neues Array mit den Ergebnissen der ausgeführten definierten Funktion an jedem Element in diesem Array.</dd> + <dt>{{jsxref("Array.prototype.reduce()")}}</dt> + <dd>Reduziert das Array auf einen einzigen Wert, indem es jeweils zwei Elemente durch die angegebene Funktion ausführt. Optional: als zweiten Paramater einen Startwert angeben.</dd> + <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt> + <dd>Reduziert das Array auf einen einzigen Wert, indem es jeweils zwei Elemente durch die angegebene Funktion ausführt (von rechts nach links). Optional: als zweiten Paramater einen Startwert angeben.</dd> + <dt>{{jsxref("Array.prototype.some()")}}</dt> + <dd> + <pre class="syntaxbox">Gibt <code>true</code> zurück, wenn mindestens ein Element in diesem Array den Test der definierten Funktion besteht.</pre> + </dd> + <dt>{{jsxref("Array.prototype.values()")}}</dt> + <dd>Gibt einen neues <code>Array Iterator</code> Objekt zurück, welches die Werte für jeden Index in dem Array beinhaltet.</dd> + <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}</dt> + <dd>Gibt einen neues <code>Array Iterator</code> Objekt zurück, welches die Werte für jeden Index in dem Array beinhaltet.</dd> +</dl> + +<h3 id="Generische_Methoden_(kein_Standard)">Generische Methoden (kein Standard)</h3> + +<p>Vielen Methoden von den JavaScript Array Objekten sind für die allgemeine Anwendung an allem Objekten entwickelt wurden, welche "aussehen wie" Arrays. Der Grund ist, dass sie an allen Objekten angewandt werden könne, welche eine Längen-Eigenschaft besitzen, und welche nützlicherweise eine numerische Eigenschaft benennen (wie mit der <code>array[5]</code> Indizierung). Einige Methoden, solche wie<code> </code>{{jsxref("Array.join", "join")}}, lesen nur die Länge (<code>length)</code> und numerische Eigenschaften von dem Objekt an welches sie angewandt werden. Andere, wie {{jsxref("Array.reverse", "reverse")}}, erfordern eine Veränderung der numerischen Objekt- und Längen-Eigenschaften; diese Methoden können deshalb nicht von Objekten wie {{jsxref("String")}} aufgerufen werden, welche das künstliche Setzen ihrer Längen- (<code>length)</code> oder numerischen Eigenschaft nicht erlauben.</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')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Hinzugefügt der <code>copyWithin()</code>, <code>fill()</code>, <code>entries()</code>, <code>keys()</code>, <code>values()</code>, <code>find()</code>, <code>findIndex()</code> Methoden.</td> + </tr> + <tr> + <td>{{SpecName('ES7', '#sec-array.prototype', 'Array.prototype')}}</td> + <td>{{Spec2('ES7')}}</td> + <td>Hinzugefügt der <code>includes()</code> Methode.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.prototype")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/push/index.html b/files/de/web/javascript/reference/global_objects/array/push/index.html new file mode 100644 index 0000000000..986fcf944b --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/push/index.html @@ -0,0 +1,141 @@ +--- +title: Array.prototype.push() +slug: Web/JavaScript/Reference/Global_Objects/Array/push +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/push +--- +<div>{{JSRef}}</div> + +<p>Die <code><strong>push()</strong></code> Methode fügt ein oder mehr Elemente am Ende eines Arrays hinzu und gibt die neue Länge des Arrays zurück.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-push.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>arr</var>.push(<var>element1</var> [, ... [, <var>elementN]]</var>)</code></pre> + +<h3 id="Parameters" name="Parameters">Parameter</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Die Elemente, die am Ende des Arrays eingefügt werden.</dd> +</dl> + +<h3 id="Returns" name="Returns">Rückgabewert</h3> + +<p>Den neuen Wert der {{jsxref("Array.length", "length")}} Eigenschaft (Länge des Arrays), nachdem die Methode ausgeführt wurde.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Die <code>push</code> Methode fügt Werte an das Ende eines Arrays an.</p> + +<p class="p1"><code>push</code> ist absichtlich generisch gehalten. Die Methode kann mit Hilfe von {{jsxref("Function.call", "call()")}} und {{jsxref("Function.apply", "apply()")}} auch auf Array ähnliche Objekte angewendet werden. Die Methode wählt anhand der <code>length</code> Eigenschaft den Punkt aus, an dem die Werte eingefügt werden. Falls die <code>length</code> Eigenschaft nicht in eine Zahl umgewandelt werden kann, wird 0 als Index verwendet. Das gilt auch für den Fall, dass die <code>length</code> Eigenschaft nicht vorhanden ist. Die <code>length</code> Eigenschaft wird daraufhin erstellt.</p> + +<p class="p2">Obwohl {{jsxref("Global_Objects/String", "Strings", "", 1)}} native, Array-ähnliche Objekte sind, sind sie in Anwendungen dieser Methode nicht geeignet, da Strings unveränderlich sind. Gleiches gilt für das native, Array-ähnliche Objekt {{jsxref("Functions/arguments", "arguments", "", 1)}}.</p> + +<h2 id="Examples" name="Examples">Beispiele</h2> + +<h3 id="Example:_Adding_elements_to_an_array" name="Example:_Adding_elements_to_an_array">Elemente zu einem Array hinzufügen</h3> + +<p>Der folgende Quelltext erstellt ein <code>sports</code> Array mit zwei Elementen und fügt anschließend zwei weitere Elemente hinzu. Die Variable <code>total</code> enthält die neue Länge des Arrays.</p> + +<pre class="brush: js">var sports = ['soccer', 'baseball']; +var total = sports.push('football', 'swimming'); + +console.log(sports); // ['soccer', 'baseball', 'football', 'swimming'] +console.log(total); // 4 +</pre> + +<h3 id="Zwei_Arrays_zusammenführen">Zwei Arrays zusammenführen</h3> + +<p>Dieses Beispiel benutzt {{jsxref("Function.apply", "apply()")}}, um alle Elemente eines zweiten Arrays hinzuzufügen.</p> + +<p>Diese Methode sollte <em>nicht</em> benutzt werden, wenn das zweite Array (<code>moreVegs</code> in diesem Beispiel) sehr lang ist, weil die maximale Anzahl der Parametern, die eine Funktion haben kann, in der Praxis limitiert ist. Siehe {{jsxref("Function.apply", "apply()")}} für mehr Details.</p> + +<pre>var vegetables = ['parsnip', 'potato']; +var moreVegs = ['celery', 'beetroot']; + +// Fügt das zweite Array an das erste Array an +// Equivalent zu vegetables.push('celery', 'beetroot'); +Array.prototype.push.apply(vegetables, moreVegs); + +console.log(vegetables); // ['parsnip', 'potato', 'celery', 'beetroot']</pre> + +<h3 id="Objekte_wie_ein_Array_behandeln">Objekte wie ein Array behandeln</h3> + +<p>Wie oben angedeutet ist, ist <code>push</code> extra generisch gehalten, was man zu seinem Vorteil nutzen kann. <code>Array.prototype.push</code> kann gut auf ein Objekt angewendet werden, wie das Beispiel zeigt. Zu beachten ist, dass kein Array erstellt wird, um eine Menge von Objekten zu speichern. Stattdessen werden die Objekte in dem Objekt selbst gespeichern, indem wir <code>call</code> auf der <code>Array.prototype.push</code> Methode einsetzen, um die Methode glauben zu lassen, wir arbeiten mit einem Array. Es funktioniert einfach, dank der Art und Weise, wie JavaScript es uns erlaubt, den Ausführungskontext nach Belieben festzulegen.</p> + +<pre class="brush: js">var obj = { + length: 0, + + addElem: function addElem(elem) { + // obj.length wird automatisch erhöht, + // wenn ein Objekt hinzugefügt wird + [].push.call(this, elem); + } +}; + +// ein paar leere Objekte zu Illustrationszwecken hinzufügen +obj.addElem({}); +obj.addElem({}); +console.log(obj.length); +// → 2 +</pre> + +<p>Zu beachten ist, dass <code>obj</code> kein Array ist. Die Methode <code>push</code> erhöht erfolgreich die <code>length</code> Eigenschaft von <code>obj</code>, so als würde sie mit einem Array arbeiten.</p> + +<h2 id="Specifications" name="Specifications">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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.7', 'Array.prototype.push')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.push', 'Array.prototype.push')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.push', 'Array.prototype.push')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.push")}}</p> +</div> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/reduce/index.html b/files/de/web/javascript/reference/global_objects/array/reduce/index.html new file mode 100644 index 0000000000..bbb3e4d57c --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/reduce/index.html @@ -0,0 +1,564 @@ +--- +title: Array.prototype.reduce() +slug: Web/JavaScript/Reference/Global_Objects/Array/Reduce +tags: + - Array + - ECMAScript 5 + - JavaScript + - Method + - Prototype + - Reduce + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce +--- +<div>{{JSRef}}</div> + +<p>Die <code><strong>reduce()</strong></code>-Methode reduziert ein Array auf einen einzigen Wert, indem es jeweils zwei Elemente (von links nach rechts) durch eine gegebene Funktion reduziert.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-reduce.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>arr</var>.reduce(<var>callback[, </var><var>initialValue]</var>)</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Funktion, welche auf jeden Wert im Array angewandet wird und vier Argumente hat: + <dl> + <dt><code>accumulator</code></dt> + <dd>Der kumulierte Wert ist der Rückgabewert von <code>callback</code>; der in der zuvor zurückgegebene Wert des letzten Aufrufes von <code>callback</code> oder <code>initialValue</code> werden verwendet.</dd> + <dt><code>currentValue</code></dt> + <dd>Das aktuell zu verarbeitende Element des Arrays.</dd> + <dt><code>currentIndex</code>{{optional_inline}}</dt> + <dd>Der Index des aktuellen Elements des Arrays. Beginnt mit dem Index 0, falls <code>initialValue</code> angegeben wurde, ansonsten mit Index 1.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>Das Array, auf dem <code>reduce</code> abgerufen wird.</dd> + </dl> + </dd> + <dt><code>initialValue</code>{{optional_inline}}</dt> + <dd>Der Wert des ersten Arguments, der bei dem ersten Aufruf in <code>callback</code> zu benutzt wird. Wenn kein Initialwert angegeben wird, wird das erste Element des Arrays benutzt. Das Aufrufen von <code>reduce()</code> auf einem leeren Array ohne Initialwerts führt zu einem Fehler.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Der Ergebniswert der Reduzierung.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p><code>reduce()</code> führt die <code>callback</code>-Funktion für jedes existierende Element in dem Array aus, Ausnahme sind nicht gesetzte Werte. <code>callback</code> hat vier Parameter:</p> + +<ul> + <li><code>accumulator</code></li> + <li><code>currentValue</code></li> + <li><code>currentIndex</code></li> + <li><code>array</code></li> +</ul> + +<p>Beim ersten Aufruf von <code>callback</code> sind die Werte von <code>accumulator</code> und <code>currentValue</code> in Abhängigkeit vom Parameter <code>initialValue</code> wie folgt:</p> + +<ul> + <li>Wenn <code>initialValue</code> beim Aufruf von <code>reduce()</code> angegeben wird, ist <code>accumulator</code> gleich dem <code>initialValue</code> und <code>currentValue</code> ist gleich dem ersten Wert im Array.</li> + <li>Wenn kein <code>initialValue</code> angegeben wird, ist <code>accumulator</code> gleich mit dem ersten Wert im Array und <code>currentValue</code> wird gleich dem zweiten Wert im Array sein.</li> +</ul> + +<div class="note"> +<p><strong>Hinweis:</strong> Wenn <code>initialValue</code> nicht angegeben wird, wird <code>reduce()</code> die <code>callback</code>-Funktion startend beim Index 1 aufrufen, der erste Index wird übersprungen. Wenn <code>initialValue</code> angegeben ist, wird bei Index 0 begonnen.</p> +</div> + +<p>Wenn das Array leer ist und kein <code>initialValue</code> angegeben ist, wird ein {{jsxref("TypeError")}} erzeugt. Wenn das Array nur ein Element hat (die Position ist egal) und kein <code>initialValue</code> angegeben ist oder wenn <code>initialValue</code> angegeben ist und das Array leer ist, wird der einzelne Wert sofort zurückgegeben, ohne <code>callback</code> aufzurufen.</p> + +<p>Es ist immer sicherer <code>initialValue</code> anzugeben, weil es drei mögliche Ergebnisse ohne <code>initialValue</code> gibt, wie es im folgenden Beispiel gezeigt ist.</p> + +<pre class="brush: js">var maxCallback = ( acc, cur ) => Math.max( acc.x, cur.x ); +var maxCallback2 = ( max, cur ) => Math.max( max, cur ); + +// reduce() without initialValue +[ { x: 22 }, { x: 42 } ].reduce( maxCallback ); // 42 +[ { x: 22 } ].reduce( maxCallback ); // { x: 22 } +[ ].reduce( maxCallback ); // TypeError + +// map/reduce; better solution, also works for empty or larger arrays +[ { x: 22 }, { x: 42 } ].map( el => el.x ) + .reduce( maxCallback2, -Infinity ); +</pre> + +<h3 id="Wie_reduce_funktioniert">Wie reduce() funktioniert</h3> + +<p>Angenommen die folgende <code>reduce()</code> Funktion wird genutzt:</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduce(function (<code>accumulator,</code> <code>currentValue</code>, <code>currentIndex</code>, array) { + return <code>accumulator</code> + currentValue; +}); +</pre> + +<p>Die <code>callback</code>-Funktion wird viermal aufgerufen, mit den Parametern und Rückgabewert für jeden Aufruf wir folgend beschrieben:</p> + +<table> + <thead> + <tr> + <th scope="col"><code>callback</code></th> + <th scope="col"><code>accumulator</code></th> + <th scope="col"><code>currentValue</code></th> + <th scope="col"><code>currentIndex</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">Rückgabewert</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1. Aufruf</th> + <td><code>0</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>1</code></td> + </tr> + <tr> + <th scope="row">2. Aufruf</th> + <td><code>1</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>3</code></td> + </tr> + <tr> + <th scope="row">3. Aufruf</th> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>6</code></td> + </tr> + <tr> + <th scope="row">4. Aufruf</th> + <td><code>6</code></td> + <td><code>4</code></td> + <td><code>4</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + </tbody> +</table> + +<p>Der zurückgegebene Wert von <code>reduce()</code> ist der Rückgabewert der letzten <code>callback</code>-Funktion (<code>10</code>).</p> + +<p>Es ist zusätzlich möglich eine {{jsxref("Functions/Arrow_functions", "Arrow-Funktion","",1)}} statt einer ganzen Funktion zu benutzen. Der folgende Quelltext erzeugt die gleiche Ausgabe wie der Vorherige:</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduce( (prev, curr) => prev + curr ); +</pre> + +<p>Wenn als zweiter Parameter von <code>reduce()</code> <code>initialValue</code> angegeben ist, wird das Ergebnis wie folgt aussehen:</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduce((<code>accumulator</code>, currentValue, currentIndex, array) => { + return <code>accumulator</code> + currentValue; +}, 10); +</pre> + +<table> + <thead> + <tr> + <th scope="col"><code>callback</code></th> + <th scope="col"><code>accumulator</code></th> + <th scope="col"><code>currentValue</code></th> + <th scope="col"><code>currentIndex</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">Rückgabewert</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1. Aufruf</th> + <td><code>10</code></td> + <td><code>0</code></td> + <td><code>0</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + <tr> + <th scope="row">2. Aufruf</th> + <td><code>10</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>11</code></td> + </tr> + <tr> + <th scope="row">3. Aufruf</th> + <td><code>11</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>13</code></td> + </tr> + <tr> + <th scope="row">4. Aufruf</th> + <td><code>13</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>16</code></td> + </tr> + <tr> + <th scope="row">5. Aufruf</th> + <td><code>16</code></td> + <td><code>4</code></td> + <td><code>4</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>20</code></td> + </tr> + </tbody> +</table> + +<p>Der von <code>reduce()</code> zurückgegebene Wert ist in diesem Fall <code>20</code>.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Alle_Elemente_eines_Arrays_summieren">Alle Elemente eines Arrays summieren</h3> + +<pre class="brush: js">var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) { + return accumulator + currentValue; +}, 0); +// sum is 6 +</pre> + +<p>Alternativ als Arrow-Funktion geschrieben:</p> + +<pre class="brush: js">var total = [ 0, 1, 2, 3 ].reduce( + ( accumulator, currentValue ) => accumulator + currentValue, + 0 +);</pre> + +<h3 id="Summe_von_Werten_in_einem_Objektarray">Summe von Werten in einem Objektarray</h3> + +<p>Um in einem Array von Objekten Werte aufzusummieren, <strong>muss</strong> ein Initialwert angegeben werden, so dass jedes Element in der Funktion durchlaufen wird.</p> + +<pre class="brush: js">var initialValue = 0; +var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) { + return accumulator + currentValue.x; +},initialValue) + +console.log(sum) // logs 6 +</pre> + +<p>Alternativ als Arrow-Funktion geschrieben:</p> + +<pre class="brush: js">var initialValue = 0; +var sum = [{x: 1}, {x:2}, {x:3}].reduce( + (accumulator, currentValue) => accumulator + currentValue.x + ,initialValue +); + +console.log(sum) // logs 6</pre> + +<h3 id="Geschachtelte_Arrays_zu_einem_flachen_Array_machen">Geschachtelte Arrays zu einem flachen Array machen</h3> + +<pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduce( + function(accumulator, currentValue) { + return accumulator.concat(currentValue); + }, + [] +); +// flattened is [0, 1, 2, 3, 4, 5] +</pre> + +<p>Alternativ als Arrow-Funktion geschrieben:</p> + +<pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduce( + ( accumulator, currentValue ) => accumulator.concat(currentValue), + [] +); +</pre> + +<h3 id="Zählen_von_Instanzen_eines_Wertes_in_einem_Objekt">Zählen von Instanzen eines Wertes in einem Objekt</h3> + +<pre class="brush: js">var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']; + +var countedNames = names.reduce(function (allNames, name) { + if (name in allNames) { + allNames[name]++; + } + else { + allNames[name] = 1; + } + return allNames; +}, {}); +// countedNames is: +// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 } +</pre> + +<h3 id="Objekte_nach_einer_Eigenschaft_gruppieren">Objekte nach einer Eigenschaft gruppieren</h3> + +<pre class="brush: js">var people = [ + { name: 'Alice', age: 21 }, + { name: 'Max', age: 20 }, + { name: 'Jane', age: 20 } +]; + +function groupBy(objectArray, property) { + return objectArray.reduce(function (acc, obj) { + var key = obj[property]; + if(!acc[key]) { + acc[key] = []; + } + acc[key].push(obj); + return acc; + }, {}); +} + +var groupedPeople = groupBy(people, 'age'); +// groupedPeople is: +// { +// 20: [ +// { name: 'Max', age: 20 }, +// { name: 'Jane', age: 20 } +// ], +// 21: [{ name: 'Alice', age:21 }] +// } +</pre> + +<h3 id="Verbinden_von_Arrays_in_einem_Array_von_Objekten_mithilfe_des_Spread-Operators_und_von_initialValue"><span id="result_box" lang="de"><span>Verbinden von Arrays in einem Array von Objekten mithilfe des Spread-Operators und von <code>initialValue</code></span></span></h3> + +<pre class="brush: js">// friends - an array of objects +// where object field "books" - list of favorite books +var friends = [{ + name: 'Anna', + books: ['Bible', 'Harry Potter'], + age: 21 +}, { + name: 'Bob', + books: ['War and peace', 'Romeo and Juliet'], + age: 26 +}, { + name: 'Alice', + books: ['The Lord of the Rings', 'The Shining'], + age: 18 +}]; + +// allbooks - list which will contain all friends' books + +// additional list contained in initialValue +var allbooks = friends.reduce(function(accumulator, currentValue) { + return [...accumulator, ...currentValue.books]; +}, ['Alphabet']); + +// allbooks = [ +// 'Alphabet', 'Bible', 'Harry Potter', 'War and peace', +// 'Romeo and Juliet', 'The Lord of the Rings', +// 'The Shining' +// ]</pre> + +<h3 id="Duplikate_in_einem_Array_entfernen">Duplikate in einem Array entfernen</h3> + +<pre class="brush: js">let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]; +let result = arr.sort().reduce((accumulator, current) => { + const length = accumulator.length; + if (length === 0 || accumulator[length - 1] !== current) { + accumulator.push(current); + } + return accumulator; +}, []); +console.log(result); //[1,2,3,4,5] +</pre> + +<h3 id="Sequenzielle_Abarbeitung_von_Promises">Sequenzielle Abarbeitung von Promises</h3> + +<pre class="brush: js">/** + * Runs promises from array of functions that can return promises + * in chained manner + * + * @param {array} arr - promise arr + * @return {Object} promise object + */ +function runPromiseInSequence(arr, input) { + return arr.reduce( + (promiseChain, currentFunction) => promiseChain.then(currentFunction), + Promise.resolve(input) + ); +} + +// promise function 1 +function p1(a) { + return new Promise((resolve, reject) => { + resolve(a * 5); + }); +} + +// promise function 2 +function p2(a) { + return new Promise((resolve, reject) => { + resolve(a * 2); + }); +} + +// function 3 - will wrapped in a resolved promise by .then() +function f3(a) { + return a * 3; +} + +// promise function 4 +function p4(a) { + return new Promise((resolve, reject) => { + resolve(a * 4); + }); +} + +const promiseArr = [p1, p2, f3, p4]; +runPromiseInSequence(promiseArr, 10) + .then(console.log); // 1200 +</pre> + +<h3 id="Funktionskomposition_ermöglicht_Pipelining">Funktionskomposition ermöglicht Pipelining</h3> + +<pre class="brush: js">// Building-blocks to use for composition +const double = x => x + x; +const triple = x => 3 * x; +const quadruple = x => 4 * x; + +// Function composition enabling pipe functionality +const pipe = (...functions) => input => functions.reduce( + (acc, fn) => fn(acc), + input +); + +// Composed functions for multiplication of specific values +const multiply6 = pipe(double, triple); +const multiply9 = pipe(triple, triple); +const multiply16 = pipe(quadruple, quadruple); +const multiply24 = pipe(double, triple, quadruple); + +// Usage +multiply6(6); // 36 +multiply9(9); // 81 +multiply16(16); // 256 +multiply24(10); // 240 +</pre> + +<h3 id="Mapfunktion_mit_reduce">Mapfunktion mit reduce</h3> + +<pre class="brush: js">if (!Array.prototype.map) { + Array.prototype.map = function(callback, thisArg) { + return this.reduce(function(mappedArray, currentValue, index, array) { + mappedArray[index] = callback.call(thisArg, currentValue, index, array); + return mappedArray; + }, []); + }; +} + +[1, 2, , 3].map( + (currentValue, index, array) => currentValue + index + array.length +); // [5, 7, , 10] + +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.21 +// Reference: http://es5.github.io/#x15.4.4.21 +// https://tc39.github.io/ecma262/#sec-array.prototype.reduce +if (!Array.prototype.reduce) { + Object.defineProperty(Array.prototype, 'reduce', { + value: function(callback /*, initialValue*/) { + if (this === null) { + throw new TypeError( 'Array.prototype.reduce ' + + 'called on null or undefined' ); + } + if (typeof callback !== 'function') { + throw new TypeError( callback + + ' is not a function'); + } + + // 1. Let O be ? ToObject(this value). + var o = Object(this); + + // 2. Let len be ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // Steps 3, 4, 5, 6, 7 + var k = 0; + var value; + + if (arguments.length >= 2) { + value = arguments[1]; + } else { + while (k < len && !(k in o)) { + k++; + } + + // 3. If len is 0 and initialValue is not present, + // throw a TypeError exception. + if (k >= len) { + throw new TypeError( 'Reduce of empty array ' + + 'with no initial value' ); + } + value = o[k++]; + } + + // 8. Repeat, while k < len + while (k < len) { + // a. Let Pk be ! ToString(k). + // b. Let kPresent be ? HasProperty(O, Pk). + // c. If kPresent is true, then + // i. Let kValue be ? Get(O, Pk). + // ii. Let accumulator be ? Call( + // callbackfn, undefined, + // « accumulator, kValue, k, O »). + if (k in o) { + value = callback(value, o[k], k, o); + } + + // d. Increase k by 1. + k++; + } + + // 9. Return accumulator. + return value; + } + }); +} +</pre> + +<p>Wenn es wirklich notwendig ist veraltete JavaScript-Umgebungen zu benutzen, die <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty()</a></code> nicht unterstützen, ist es besser <code>Array.prototype</code> nicht komplett zu ersetzen, weil man es nicht non-enumerable machen kann.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezification</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce()')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.8.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.reduce")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array.prototype.reduceRight()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/reduceright/index.html b/files/de/web/javascript/reference/global_objects/array/reduceright/index.html new file mode 100644 index 0000000000..dfcb7e3a0b --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/reduceright/index.html @@ -0,0 +1,334 @@ +--- +title: Array.prototype.reduceRight() +slug: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight +tags: + - Array + - ECMAScript 5 + - JavaScript + - Method + - Prototype + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight +--- +<div>{{JSRef}}</div> + +<p>Die <code><strong>reduceRight()</strong></code> Methode wendet eine Funktion gegen einen Akkumulator auf jeden Wert des Arrays (von rechts nach links) auf und reduziert es um einen einzelnen Wert.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-reduce-right.html")}}</div> + + + +<p>Siehe auch {{jsxref("Array.prototype.reduce()")}} für links nach rechts Reduzierung.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>arr</var>.reduceRight(<var>callback</var>[, <var>initialValue</var>])</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Funktion, welche für jeden Wert im Array aufgerufen wird und vier Argumente hat: + <dl> + <dt><code>previousValue</code></dt> + <dd>Der zuvor im letzten Aufruf des Rückrufs zurückgegebene Wert, oder <code>initialValue</code>, wenn unterstützt. (siehe unten)</dd> + <dt><code>currentValue</code></dt> + <dd>Das derzeitige zu verarbeitende Element in dem Array.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>Der Index des derzeitigen zu verarbeitenden Elements in dem Array.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>Das Arrayobjekt, in dem das Element enthalten ist.</dd> + </dl> + </dd> + <dt><code>initialValue</code>{{optional_inline}}</dt> + <dd>Objekt, welches beim ersten Aufruf der <code>callback</code> Funktion initial benutzt wird. Wenn kein Initialwert angegeben ist wird das letzte Element aus dem Array benutzt. Der aufruf auf einem leeren Array ohne angabe von <code>initialValue</code> führt zu einem Fehler.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Der Wert, der aus der Reduktion resultiert.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p><code>reduceRight</code> Führt die Rückruffunktion einmal für jedes im Array vorhandene Element aus, ohne Löcher im Array, wobei vier Argumente empfangen werden: der Initialwert (<code>initialValue)</code> (oder Wert des vorherigen <code>callback</code> Aufrufes), der Wert des derzeitigen Elements, der derzeitige Index, und das Array auf welches der Durchlauf stattfindet.</p> + +<p>Der Aufruf des reduceRight <code>callback</code> würde ungefähr so aussehen:</p> + +<pre class="brush: js">array.reduceRight(function(previousValue, currentValue, index, array) { + // ... +}); +</pre> + +<p>Wenn die Funktion das erste Mal ausgeführt wird, kann der vorherige Wert (<code>previousValue)</code> und der derzeitige Wert (<code>currentValue)</code> eines von zwei Werten sein. Wenn ein Initialwert (<code>initialValue)</code> der Callback-Funktion zu <code>reduceRight</code> mitgegeben wird, dann wird der <code>previousValue</code> und <code>der initialValue</code> gleich dem <code>initialValue</code> in dem Array. Wenn kein <code>initialValue</code> mitgegeben wird, dann ist der <code>previousValue</code> gleich dem Wert in dem Array und <code>currentValue</code> wird gleich zu dem geich dem zweiten bis letzten Wert.</p> + +<p>Wenn das Array leer ist und kein <code>initialValue</code> angegeben ist wird ein {{jsxref("TypeError")}} erzeugt. Wenn das Array nur ein Element hat (die Position ist egal) und kein <code>initialValue</code> angegeben ist oder wenn <code>initialValue</code> angegeben ist und das Array leer ist, wird der einzelne Wert zurückgegeben ohne <code>callback</code> aufzurufen.</p> + +<p><span id="result_box" lang="de"><span>Einige Beispieldurchläufe der Funktion würden wie folgt aussehen:</span></span></p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) { + return previousValue + currentValue; +}); +</pre> + +<p>Die <code>callback</code> Funktion wird vier mal aufgerufen. Die Parameter und der Rückgabewert dieser Funktion sind wie folgt:</p> + +<table> + <thead> + <tr> + <th scope="col"><code>callback</code></th> + <th scope="col"><code>previousValue</code></th> + <th scope="col"><code>currentValue</code></th> + <th scope="col"><code>index</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">Rückgabewert</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1. Aufruf</th> + <td><code>4</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>7</code></td> + </tr> + <tr> + <th scope="row">2. Aufruf</th> + <td><code>7</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>9</code></td> + </tr> + <tr> + <th scope="row">3. Aufruf</th> + <td><code>9</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + <tr> + <th scope="row">4. Aufruf</th> + <td><code>10</code></td> + <td><code>0</code></td> + <td><code>0</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + </tbody> +</table> + +<p>Der Wert, der von <code>reduceRight</code> zurückgegeben wird, ist der Rückgabewert der letzen <code>callback</code> Funktion (<code>10</code>).</p> + +<p>Wenn ein <code>initialValue</code> angegeben wird, sieht das Resultat folgendermaßen aus:</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) { + return previousValue + currentValue; +}, 10); +</pre> + +<table> + <thead> + <tr> + <th scope="col"><code>callback</code></th> + <th scope="col"><code>previousValue</code></th> + <th scope="col"><code>currentValue</code></th> + <th scope="col"><code>index</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">Rückgabewert</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1. Aufruf</th> + <td><code>10</code></td> + <td><code>4</code></td> + <td><code>4</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>14</code></td> + </tr> + <tr> + <th scope="row">2. Aufruf</th> + <td><code>14</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>17</code></td> + </tr> + <tr> + <th scope="row">3. Aufruf</th> + <td><code>17</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>19</code></td> + </tr> + <tr> + <th scope="row">4. Aufruf</th> + <td><code>19</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>20</code></td> + </tr> + <tr> + <th scope="row">5. Aufruf</th> + <td><code>20</code></td> + <td><code>0</code></td> + <td><code>0</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>20</code></td> + </tr> + </tbody> +</table> + +<p>Der von <code>reduceRight</code> zurückgegebene Wert ist in diesem Fall <code>20</code>.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Alle_Elemente_in_einem_Array_summieren">Alle Elemente in einem Array summieren</h3> + +<pre class="brush: js">var sum = [0, 1, 2, 3].reduceRight(function(a, b) { + return a + b; +}); +// sum is 6 +</pre> + +<h3 id="Ein_Array_von_Arrays_in_ein_flaches_Array_schreiben">Ein Array von Arrays in ein flaches Array schreiben</h3> + +<pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) { + return a.concat(b); +}, []); +// flattened is [4, 5, 2, 3, 0, 1] +</pre> + +<h3 id="Eine_Liste_von_asynchronen_Funktionen_mit_Callbacks_hintereinander_laufen_lassen_so_dass_das_Resultat_der_vorherigen_der_nächsten_übergeben_wird">Eine Liste von asynchronen Funktionen mit Callbacks hintereinander laufen lassen, so dass das Resultat der vorherigen der nächsten übergeben wird</h3> + +<pre class="brush: js">const waterfall = (...functions) => (callback, ...args) => + functions.reduceRight( + (composition, fn) => (...results) => fn(composition, ...results), + callback + )(...args); + +const randInt = max => Math.floor(Math.random() * max) + +const add5 = (callback, x) => { + setTimeout(callback, randInt(1000), x + 5); +}; +const mult3 = (callback, x) => { + setTimeout(callback, randInt(1000), x * 3); +}; +const sub2 = (callback, x) => { + setTimeout(callback, randInt(1000), x - 2); +}; +const split = (callback, x) => { + setTimeout(callback, randInt(1000), x, x); +}; +const add = (callback, x, y) => { + setTimeout(callback, randInt(1000), x + y); +}; +const div4 = (callback, x) => { + setTimeout(callback, randInt(1000), x / 4); +}; + +const computation = waterfall(add5, mult3, sub2, split, add, div4); +computation(console.log, 5) // -> 14 + +// same as: + +const computation2 = (input, callback) => { + const f6 = x=> div4(callback, x); + const f5 = (x, y) => add(f6, x, y); + const f4 = x => split(f5, x); + const f3 = x => sub2(f4, x); + const f2 = x => mult3(f3, x); + add5(f2, input); +}</pre> + +<h3 id="Unterschied_zwischen_reduce_und_reduceRight">Unterschied zwischen <code>reduce</code> und <code>reduceRight</code></h3> + +<pre class="brush: js">var a = ['1', '2', '3', '4', '5']; +var left = a.reduce(function(prev, cur) { return prev + cur; }); +var right = a.reduceRight(function(prev, cur) { return prev + cur; }); + +console.log(left); // "12345" +console.log(right); // "54321"</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>reduceRight</code> wurde im ECMA-262 Standard in der 5. Edition hinzugefügt. Aus diesem Grund ist es in manchen Implementierungen nicht vorhanden. Dieses Problem kann beheben werden indem folgender Quelltext am Anfang des Skripts eingefügt werden, wodurch <code>reduceRight</code> auch in solchen Implementierungen unterstützt werden kann.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.22 +// Reference: http://es5.github.io/#x15.4.4.22 +if ('function' !== typeof Array.prototype.reduceRight) { + Array.prototype.reduceRight = function(callback /*, initialValue*/) { + 'use strict'; + if (null === this || 'undefined' === typeof this) { + throw new TypeError('Array.prototype.reduce called on null or undefined'); + } + if ('function' !== typeof callback) { + throw new TypeError(callback + ' is not a function'); + } + var t = Object(this), len = t.length >>> 0, k = len - 1, value; + if (arguments.length >= 2) { + value = arguments[1]; + } else { + while (k >= 0 && !(k in t)) { + k--; + } + if (k < 0) { + throw new TypeError('Reduce of empty array with no initial value'); + } + value = t[k--]; + } + for (; k >= 0; k--) { + if (k in t) { + value = callback(value, t[k], k, t); + } + } + return 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('ES5.1', '#sec-15.4.4.22', 'Array.prototype.reduceRight')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.8.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.reduceRight")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array.prototype.reduce()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/reverse/index.html b/files/de/web/javascript/reference/global_objects/array/reverse/index.html new file mode 100644 index 0000000000..84560faacb --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/reverse/index.html @@ -0,0 +1,92 @@ +--- +title: Array.prototype.reverse() +slug: Web/JavaScript/Reference/Global_Objects/Array/reverse +tags: + - Array + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse +--- +<div>{{JSRef}}</div> + +<p>Die <code><strong>reverse()</strong></code> Methode kehrt die Reihenfolge der Arrayelemente <em><a href="https://de.wikipedia.org/wiki/In-place">in-place</a></em> um. Das erste Element wird zum letzen und das letzte wird zum ersten.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-reverse.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>arr</var>.reverse()</code></pre> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Das umgedrehte Array.</p> + +<h2 id="Description" name="Description">Beschreibung</h2> + +<p>Die <code>reverse</code> Methode kehrt die Reihenfolge der Elemente des angegebenen Arrays in-place um, ändert das Array und gibt eine Referenz zu diesem zurück.</p> + +<h2 id="Examples" name="Examples">Beispiele</h2> + +<h3 id="Example:_Reversing_the_elements_in_an_array" name="Example:_Reversing_the_elements_in_an_array">Elemente in einem Array umkehren</h3> + +<p>Das folgende Beispiel erzeugt ein Array <code>a</code> mit 3 Elementen und kehrt die Reihenfolge des Arrays um. Der Aufruf von <code>reverse()</code> gibt eine Referenz zum umgekehrten Array <code>a</code> zurück.</p> + +<pre class="brush: js">var a = [1, 2, 3]; + +console.log(a) // [1, 2, 3] + +a.reverse(); + +console.log(a) // [3, 2, 1] +</pre> + +<h2 id="Specifications" name="Specifications">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. Implementiert in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.reverse")}}</p> +</div> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array.prototype.join()")}}</li> + <li>{{jsxref("Array.prototype.sort()")}}</li> + <li>{{jsxref("TypedArray.prototype.reverse()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/shift/index.html b/files/de/web/javascript/reference/global_objects/array/shift/index.html new file mode 100644 index 0000000000..e576e1bfec --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/shift/index.html @@ -0,0 +1,111 @@ +--- +title: Array.prototype.shift() +slug: Web/JavaScript/Reference/Global_Objects/Array/shift +tags: + - Array + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift +--- +<div>{{JSRef}}</div> + +<p>Die Methode <code><strong>shift()</strong></code> entfernt das <strong>erste</strong> Element eines Arrays und gibt dieses Element zurück. Diese Methode verändert die Länge des Arrays.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-shift.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>arr</var>.shift()</code></pre> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Das vom Array entfernte Element; {{jsxref("undefined")}} wenn das Array leer ist.</p> + +<h2 id="Description" name="Description">Beschreibung</h2> + +<p>Die Methode <code>shift</code> entfernt das Element an der nullten Stelle, verschiebt die übrigen Elemente um einen Index nach unten und gibt den Wert des entfernten Elementes zurück. Ist die {{jsxref("Array.length", "length")}} Eigenschaft gleich 0, wird {{jsxref("undefined")}} zurückgegeben.</p> + +<p><code>shift</code> ist absichtlich generisch; diese Methode kann auf Array ähnlichen Objekten mit {{jsxref("Function.call", "call", "", 1)}} oder {{jsxref("Function.apply", "applied", "", 1)}} genutzt werden. <span id="result_box" lang="de"><span>Objekte, die keine </span></span><code>length</code> E<span lang="de"><span>igenschaft enthalten, die die letzte in einer Reihe von aufeinanderfolgenden, nullbasierten numerischen Eigenschaften widerspiegelt, verhalten sich möglicherweise nicht in einer sinnvollen Weise</span></span>.</p> + +<h2 id="Examples" name="Examples">Beispiele</h2> + +<h3 id="Example:_Removing_an_element_from_an_array" name="Example:_Removing_an_element_from_an_array">Ein Element eines Arrays entfernen</h3> + +<p>Das folgende Skript zeigt das Array <code>myFish</code> bevor und nachdem das erste Element dieses Arrays entfernt wurde. Anschließend wird das entfernte Element angezeigt:</p> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'surgeon']; + +console.log('myFish before: ' + myFish); +// myFish before: ['angel', 'clown', 'mandarin', 'surgeon'] + +var shifted = myFish.shift(); + +console.log('myFish after: ' + myFish); +// myFish after: ['clown', 'mandarin', 'surgeon'] + +console.log('Removed this element: ' + shifted); +// Removed this element: angel</pre> + +<h3 id="Einsatz_von_shift()_in_einer_while-Schleife">Einsatz von <code>shift()</code> in einer <code>while</code>-Schleife</h3> + +<p>Die shift() Methode wird oft in der Bedingung in einer <code>while</code> Schleife verwendet. Im folgenden Beispiel wird in jeder Iteration das nächste Element vom Array entfernt, bis das Array leer ist.</p> + +<pre class="brush: js">var names = ["Andrew", "Edward", "Paul", "Chris" ,"John"]; + +while( (i = names.shift()) !== undefined ) { + console.log(i); +} +// Andrew, Edward, Paul, Chris, John +</pre> + +<h2 id="Specifications" name="Specifications">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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.shift")}}</p> +</div> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/slice/index.html b/files/de/web/javascript/reference/global_objects/array/slice/index.html new file mode 100644 index 0000000000..75ad6c4a25 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/slice/index.html @@ -0,0 +1,244 @@ +--- +title: Array.prototype.slice() +slug: Web/JavaScript/Reference/Global_Objects/Array/slice +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice +--- +<div>{{JSRef}}</div> + +<p>Die <strong><code>slice()</code></strong> Methode schreibt eine flache Kopie von einem Teil des Arrays in ein neues Array-Objekt von <code>begin</code> bis <code>end</code> (<code>end</code> nicht enthalten). Das originale Array wird nicht verändert.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-slice.html")}}</div> + +<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo 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="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>arr</var>.slice([<var>begin</var>[, <var>end</var>]])</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>begin</code>{{optional_inline}}</dt> + <dd>Null-basierter Index, an welcher die Extraktion beginnt.</dd> + <dd>Bei einem negativen Index kennzeichnet <code>begin</code> einen Versatz vom Ende der Sequenz. <code>slice(-2)</code> extrahiert die letzten zwei Elemente der Sequenz.</dd> + <dd>Wenn <code>begin</code> undefiniert ist, beginnt <code>slice</code> bei Index <code>0</code>.</dd> + <dd>Wenn <code>begin</code> größer als die Länge der Sequenz ist, wird ein leeres Array zurückgegeben.</dd> + <dt><code>end</code> {{optional_inline}}</dt> + <dd>Null-basierter Index bevor die Extraktion endet. <code>slice</code> extrahiert bis zu, aber nicht inklusive <code>end</code>.</dd> + <dd><code>slice(1,4)</code> extrahiert vom zweiten bis zum vierten Element (Elemente sind indexiert als 1, 2 und 3).</dd> + <dd>Bei einem negativen Index kennzeichnet <code>end</code> einen Versatz vom Ende der Sequenz. <code>slice(2, -1)</code> extrahiert vom dritten bis zum vorletzten Element der Sequenz.</dd> + <dd>Wenn auf <code>end</code> weggelassen wird, extrahiert <code>slice</code> bis zum Ende der Sequenz (<code>arr.length</code>).</dd> + <dd>Wenn <code>end</code> größer als die Länge der Sequenz ist, extrahiert <code>slice</code> bis zum Ende der Sequenz (<code>arr.length</code>)</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein neues Array, welches die extrahierten Elemente enthält.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p><code>slice</code> verändert das originale Array nicht. Es gibt eine Schattenkopie der Elemente des Arrays zurück. Elemente des original Arrays werden folgendermaßen in das zurückgegeben Array kopiert:</p> + +<ul> + <li>Für Objektreferenzen (nicht das aktuelle Objekt) kopiert <code>slice</code> die Objektreferenz in das neue Array. Beide, das originale und das neue Array, referenzieren das selbe Objekt. Wenn sich ein referenziertes Objekt ändert, ist die Änderungen beim neue und beim originalen Array zu sehen.</li> + <li>Für die Typen string, number und boolean (nicht {{jsxref("String")}}, {{jsxref("Number")}} und {{jsxref("Boolean")}} Objekte) kopiert <code>slice</code> den Wert in das neue Array. Änderungen an string, number oder boolean in einem Array haben keine Auswirkung auf das andere Array.</li> +</ul> + +<p>Wenn ein neues Element zu einem Array hinzugefügt wird, hat es keine Auswirkung auf das andere Array.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="Gibt_einen_Teil_eines_existierenden_Arrays_zurück.">Gibt einen Teil eines existierenden Arrays zurück.</h3> + +<pre class="brush: js">var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']; +var citrus = fruits.slice(1, 3); + +// fruits enthält ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] +// citrus enthält ['Orange','Lemon'] +</pre> + +<h3 id="Einsatz_von_slice">Einsatz von <code>slice</code></h3> + +<p>Im folgenden Beispiel erzeugt <code>slice</code> ein neues Array, <code>newCar</code>, von <code>myCar</code>.<br> + Beide haben eine Referenz zu dem Objekt <code>myHonda</code>. Wenn sich die Farbe von <code>myHonda</code> zu lila ändert, dann ist die Änderung in beiden Arrays sichtbar.</p> + +<pre class="brush: js">// Using slice, create newCar from myCar. +var myHonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } }; +var myCar = [myHonda, 2, 'cherry condition', 'purchased 1997']; +var newCar = myCar.slice(0, 2); + +// Display the values of myCar, newCar, and the color of myHonda +// referenced from both arrays. +console.log('myCar = ' + myCar.toSource()); +console.log('newCar = ' + newCar.toSource()); +console.log('myCar[0].color = ' + myCar[0].color); +console.log('newCar[0].color = ' + newCar[0].color); + +// Change the color of myHonda. +myHonda.color = 'purple'; +console.log('The new color of my Honda is ' + myHonda.color); + +// Display the color of myHonda referenced from both arrays. +console.log('myCar[0].color = ' + myCar[0].color); +console.log('newCar[0].color = ' + newCar[0].color); +</pre> + +<p>Dieses Skript schreibt:</p> + +<pre class="brush: js">myCar = [{color:'red', wheels:4, engine:{cylinders:4, size:2.2}}, 2, + 'cherry condition', 'purchased 1997'] +newCar = [{color:'red', wheels:4, engine:{cylinders:4, size:2.2}}, 2] +myCar[0].color = red +newCar[0].color = red +The new color of my Honda is purple +myCar[0].color = purple +newCar[0].color = purple +</pre> + +<h2 id="Array-ähnliche_Objekte">Array-ähnliche Objekte</h2> + +<p>Die <code>slice</code> Methode kann auch verwendete werden, um Array-ähnliche Objekte bzw. Collections in Arrays zu konvertieren. Man muss nur die Methode an das Objekt binden.<br> + Die {{jsxref("Functions/arguments", "arguments")}} Variable innerhalb einer Funktion ist ein Beispiel für ein Array-ähnliches Objekte.</p> + +<pre class="brush: js">function list() { + return Array.prototype.slice.call(arguments); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] +</pre> + +<p>Das Binden von Methoden funktioniert mit der <code>.call</code> Funktion von {{jsxref("Function.prototype")}} und der Aufruf kann reduziert werden zu <code>[].slice.call(arguments)</code> anstatt <code>Array.prototype.slice.call</code>. Mit der {{jsxref("Function.prototype.bind", "bind")}} Funktion kann der Aufruf immer vereinfacht werden.</p> + +<pre class="brush: js">var unboundSlice = Array.prototype.slice; +var slice = Function.prototype.call.bind(unboundSlice); + +function list() { + return slice(arguments); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] +</pre> + +<h2 id="Cross-Browser-Verhalten">Cross-Browser-Verhalten</h2> + +<p>Obwohl host Objekte (wie das DOM Objekt) laut Spezifikation nicht dem Mozilla Verhalten beim Konvertieren mit <code>Array.prototype.slice</code> folgen muss und IE < 9 dies auch nicht tut, erlauben Versionen ab IE 9 dieses. “shimming” kann eine sicheres cross-browser Verhalten ermöglichen. So lange andere moderne Browser weiterhin dieses Verhalten unterstützen, sowie zur Zeit IE, Mozilla, Chrome, Safari und Opera es tun, werden Entwickler beim Lesen von (DOM unterstützendem) slice Code, basierend auf diesem Schema, von der Semantik nicht in die Irre geführt.Sie können mit Sicherheit auf die Semantik vertrauen um das de facto Standard Verhalten sicherzustellen. (Dieser shim ermöglicht es auch, dass IE mit dem zweiten Argument von slice() ein explizites {{jsxref("null")}}/{{jsxref("undefined")}}) als Wert verwendet. Bei älteren Versionen des IE war dies nicht erlaubt, jedoch funktioniert es bei allen modernen Browsern inklusive IE >= 9.)</p> + +<pre class="brush: js">/** + * Shim for "fixing" IE's lack of support (IE < 9) for applying slice + * on host objects like NamedNodeMap, NodeList, and HTMLCollection + * (technically, since host objects have been implementation-dependent, + * at least before ES6, IE hasn't needed to work this way). + * Also works on strings, fixes IE < 9 to allow an explicit undefined + * for the 2nd argument (as in Firefox), and prevents errors when + * called on other DOM objects. + */ +(function () { + 'use strict'; + var _slice = Array.prototype.slice; + + try { + // Can't be used with DOM elements in IE < 9 + _slice.call(document.documentElement); + } catch (e) { // Fails in IE < 9 + // This will work for genuine arrays, array-like objects, + // NamedNodeMap (attributes, entities, notations), + // NodeList (e.g., getElementsByTagName), HTMLCollection (e.g., childNodes), + // and will not fail on other DOM objects (as do DOM elements in IE < 9) + Array.prototype.slice = function(begin, end) { + // IE < 9 gets unhappy with an undefined end argument + end = (typeof end !== 'undefined') ? end : this.length; + + // For native Array objects, we use the native slice function + if (Object.prototype.toString.call(this) === '[object Array]'){ + return _slice.call(this, begin, end); + } + + // For array like object we handle it ourselves. + var i, cloned = [], + size, len = this.length; + + // Handle negative value for "begin" + var start = begin || 0; + start = (start >= 0) ? start : Math.max(0, len + start); + + // Handle negative value for "end" + var upTo = (typeof end == 'number') ? Math.min(end, len) : len; + if (end < 0) { + upTo = len + end; + } + + // Actual expected size of the slice + size = upTo - start; + + if (size > 0) { + cloned = new Array(size); + if (this.charAt) { + for (i = 0; i < size; i++) { + cloned[i] = this.charAt(start + i); + } + } else { + for (i = 0; i < size; i++) { + cloned[i] = this[start + i]; + } + } + } + + return cloned; + }; + } +}()); +</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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.10', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.slice")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array.prototype.splice()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/some/index.html b/files/de/web/javascript/reference/global_objects/array/some/index.html new file mode 100644 index 0000000000..0fe959b0d7 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/some/index.html @@ -0,0 +1,209 @@ +--- +title: Array.prototype.some() +slug: Web/JavaScript/Reference/Global_Objects/Array/some +tags: + - Array + - ECMAScript5 + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/some +--- +<div>{{JSRef}}</div> + +<p>Die Methode <code><strong>some()</strong></code> überprüft ob mindestens ein Element des Arrays den als Funktion übergebenen Kriterien entspricht.</p> + +<div class="note"> +<p><strong>Hinweis:</strong> Diese Methode gibt <code>false</code> für jede Bedingung auf einem leeren Array zurück.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/array-some.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>arr</var>.some(<var>callback</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Funktion die jedes Element überprüft, nimmt drei Argumente entgegen: + <dl> + <dt><code>currentValue</code></dt> + <dd>Das aktuell zu verarbeitende Element des Arrays.</dd> + <dt><code>index</code>{{Optional_inline}}</dt> + <dd>Der Index des aktuell zu verarbeitenden Elementes im Array.</dd> + <dt><code>array</code>{{Optional_inline}}</dt> + <dd>Die Arrayinstanz auf welcher die <code>some()</code> Methode aufgerufen wurde.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{Optional_inline}}</dt> + <dd>Wert der über das <code>this</code> Schüsselwort innerhalb von <code>callback</code> verfügbar ist.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p><code><strong>true</strong></code> wenn die callback Methode ein positives ({{Glossary("truthy")}}) Ergebnis für eines der Elemente im array ermittelt hat; Andernfalls, <code><strong>false</strong></code>.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p><code>some()</code> führt die <code>callback</code> Funktion einmal für jedes Element innerhalb des Arrays aus, bis ein Element gefunden wird, bei dem <code>callback</code> einen <em>truthy</em> Wert (<em>e</em>in Wert der durch die Konvertierung zu boolean true ergibt) zurückgibt. Wird ein solches Element gefunden, gibt <code>some()</code> sofort <code>true</code> zurück. <code>callback</code> wird nur für Elemente des Arrays ausgeführt, die einen zugewiesenen Wert haben; Für undefinierte oder gelöschte Elemente des Arrays wird <code>callback</code> nicht ausgeführt.</p> + +<p><code>callback</code> wird mit drei Argumenten aufgerufen: Dem Wert des Elementes, dem Index des Elementes und dem zugrundeliegenden <code>Array</code>.</p> + +<p>WIrd ein <code>thisArg</code> Parameter an die <code>some()</code> Methode übergeben, wird dieser als <code>this</code> bei der <code>callback</code> Funtion benutzt. Andernfalls wird der Wert {{jsxref("undefined")}} als <code>this</code> benutzt. Der tatsächliche Wert von <code>this</code> wird entsprechend der <a href="/de/docs/Web/JavaScript/Reference/Operators/this">generellen Regeln zur Belegung des this Schlüsselwortes innerhalb von Funktionen </a>gesetzt.</p> + +<p><code>some()</code> verändert nicht das Array auf dem die Methode aufgerufen wurde.</p> + +<p>Die von <code>some()</code> zu verarbeitenden Elemente werden vor dem ersten Aufruf von <code>callback</code> ermittelt. Elemente, die nach dem Aufruf von <code>some()</code> zum Array hinzugefügt werden, werden nicht mit <code>callback</code> aufgerufen. <span id="result_box" lang="de"><span>Wird ein noch nicht besuchtes Element des Arrays durch </span></span><code>callback</code><span lang="de"><span> geändert, wird sein Wert, der an </span></span><code>callback</code><span lang="de"><span> </span></span><span lang="de"><span> übermittelt wird, der Wert zu dem Zeitpunkt, zu dem <code>some()</code> den Index besucht, sein.</span></span> Wird ein Element aus dem Array gelöscht, wird es nicht betrachtet.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Werte_eines_Arrays_überprüfen">Werte eines Arrays überprüfen</h3> + +<p>Die folgenden Beispiele prüfen ob es ein Element größer als 10 im Array gibt.</p> + +<pre class="brush: js">function isBiggerThan10(element, index, array) { + return element > 10; +} + +[2, 5, 8, 1, 4].some(isBiggerThan10); // false +[12, 5, 8, 1, 4].some(isBiggerThan10); // true +</pre> + +<h3 id="Werte_eines_Arrays_mit_arrow_functions_überprüfen">Werte eines Arrays mit arrow functions überprüfen</h3> + +<p><a href="/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow Funktionen</a> ermöglichen eine kürzere Schreibweise für die gleiche Logik.</p> + +<pre class="brush: js">[2, 5, 8, 1, 4].some(x => x > 10); // false +[12, 5, 8, 1, 4].some(x => x > 10); // true +</pre> + +<h3 id="Prüfen_ob_ein_Element_in_einem_Array_existiert">Prüfen ob ein Element in einem Array existiert</h3> + +<p>Um die Methode <code>includes()</code> nachzuahmen, gibt die folgende Funktion <code>true</code> zurück, wenn das Element im Array existiert:</p> + +<pre class="brush: js">var fruits = ['apple', 'banana', 'mango', 'guava']; + +function checkAvailability(arr, val) { + return arr.some(function(arrVal) { + return val === arrVal; + }); +} + +checkAvailability(fruits, 'kela'); // false +checkAvailability(fruits, 'banana'); // true</pre> + +<h3 id="Prüfen_ob_ein_Element_in_einem_Array_existiert_mit_einer_arrow_function">Prüfen ob ein Element in einem Array existiert mit einer arrow function</h3> + +<pre class="brush: js">var fruits = ['apple', 'banana', 'mango', 'guava']; + +function checkAvailability(arr, val) { + return arr.some(arrVal => val === arrVal); +} + +checkAvailability(fruits, 'kela'); // false +checkAvailability(fruits, 'banana'); // true</pre> + +<h3 id="Jeden_Wert_in_einen_boolschen_Wert_konvertieren">Jeden Wert in einen boolschen Wert konvertieren</h3> + +<pre class="brush: js">var TRUTHY_VALUES = [true, 'true', 1]; + +function getBoolean(a) { + 'use strict'; + + var value = a; + + if (typeof value === 'string') { + value = value.toLowerCase().trim(); + } + + return TRUTHY_VALUES.some(function(t) { + return t === value; + }); +} + +getBoolean(false); // false +getBoolean('false'); // false +getBoolean(1); // true +getBoolean('true'); // true</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>some()</code> wurde im Rahmen des ECMA-262 Standards in der 5. Edition hinzugefügt. Daher kann es sein, dass es nicht in allen Implementierungen des Standards enthalten ist. Diese Problem kann behoben werden, indem folgenden Quelltext vor Ihren Skripten eingefügt wird, wodurch Sie die <code>some()</code> Methode in Ihrem Programmcode verwenden können. Die nachfolgende Implementierung ist eine exakte Abdeckung der ECMA-262 Spezifikation in der 5. Edition, basierend auf der Annahme dass {{jsxref("Object")}} und {{jsxref("TypeError")}} Originalwerte aufweisen und dass <code>fun.call</code> den Originalwert von {{jsxref("Function.prototype.call()")}} liefert.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.17 +// Reference: http://es5.github.io/#x15.4.4.17 +if (!Array.prototype.some) { + Array.prototype.some = function(fun/*, thisArg*/) { + 'use strict'; + + if (this == null) { + throw new TypeError('Array.prototype.some called on null or undefined'); + } + + if (typeof fun !== 'function') { + throw new TypeError(); + } + + var t = Object(this); + var len = t.length >>> 0; + + var thisArg = arguments.length >= 2 ? arguments[1] : void 0; + for (var i = 0; i < len; i++) { + if (i in t && fun.call(thisArg, t[i], i, t)) { + return true; + } + } + + return false; + }; +} +</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('ES5.1', '#sec-15.4.4.17', 'Array.prototype.some')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.some', 'Array.prototype.some')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.some', 'Array.prototype.some')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.some")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("TypedArray.prototype.some()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/sort/index.html b/files/de/web/javascript/reference/global_objects/array/sort/index.html new file mode 100644 index 0000000000..a59d8ff2c6 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/sort/index.html @@ -0,0 +1,264 @@ +--- +title: Array.prototype.sort() +slug: Web/JavaScript/Reference/Global_Objects/Array/sort +tags: + - Array + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort +--- +<div>{{JSRef}}</div> + +<p>Die <code><strong>sort()</strong></code> Methode sortiert die Elemente eines Arrays {{interwiki("wikipedia","in-place")}} und gibt das Array zurück. Standardmäßig werden alle Elemente in Strings umgewandelt und dann anhand ihrer UTF-16 Codepoints miteinander verglichen.</p> + +<p>Die Zeit- und Speicherkomplexität des Sortierens kann nicht garantiert werden, weil sie implementierungsabhängig ist.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-sort.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>arr</var>.sort([<var>compareFunction</var>]) +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>compareFunction</code> {{optional_inline}}</dt> + <dd>Gibt eine Funktion an, die die Sortierreihenfolge definiert. Wenn nicht angegeben, wird das Array nach dem <a href="/de/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode">Unicode</a>-Codepoint jedes Zeichens entsprechend der Stringumwandlung jedes Elements sortiert. + <dl> + <dt><code>firstEl</code></dt> + <dd>Das erste Element zum Vergleich.</dd> + <dt><code>secondEl</code></dt> + <dd>Das zweite Element zum Vergleich.</dd> + </dl> + </dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Das sortierte Array. Beachten Sie, dass das Array {{interwiki("wikipedia","in-place")}} sortiert und keine Kopie angelegt wird.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Wenn <code>compareFunction</code> nicht angegeben wird, werden alle Arrayelemente, die nicht <code>undefined</code> sind, sortiert indem sie in Strings konvertiert werden und in UTF-16-Code-Unit-Reihenfolge verglichen werden. Zum Beispiel steht "banana" vor "cherry". Bei einer numerischen Sortierung kommt 9 vor 80, aber weil Zahlen in Strings konvertiert werden, kommt "80" in Unicode vor "9". Alle Elemente die <code>undefined</code> sind werden ans Ende des Arrays sortiert.</p> + +<div class="blockIndicator note"> +<p>Hinweis: In UTF-16 werden Unicode-Zeichen über <code>\uFFFF</code> als zwei Ersatzcodeeinheiten im Bereich <code>\uD800</code> - <code>\ uDFFF</code> codiert. Der Wert jeder Codeeinheit wird für den Vergleich gesondert berücksichtigt. Daher wird das durch das Ersatzpaar <code>\uD655</code> <code>\uDE55</code> gebildete Zeichen vor dem Zeichen <code>\uFF3A</code> sortiert.</p> +</div> + +<p>Wenn <code>compareFunction</code> angegeben wird, werden alle Arrayelemente, die nicht <code>undefined</code> sind, nach dem Rückgabewert der Vergleichsfunktion sortiert (alle Elemente die <code>undefined</code> sind werden ans Ende des Arrays sortiert, ohne Aufruf von <code>compareFunction</code>). Wenn <code>a</code> und <code>b</code> zwei zu vergleichende Elemente sind, gilt Folgendes:</p> + +<ul> + <li>Ist <code>compareFunction(a, b)</code> kleiner als 0, sortiere <code>a</code> auf einen niedrigeren Index als <code>b</code>, d. h. <code>a</code> kommt zuerst.</li> + <li>Ist <code>compareFunction(a, b)</code> gleich 0, bleibt die Reihenfolge von <code>a</code> und <code>b</code> in Bezug zueinander unverändert, werden aber im Vergleich zu den restlichen Elementen des Arrays einsortiert. Hinweis: Der ECMAscript Standard garantiert dieses Verhalten nicht. Demzufolge berücksichtigen dies nicht alle Browser (z. B. Mozilla Versionen von 2003 und älter).</li> + <li>Ist <code>compareFunction(a, b)</code> größer als 0, sortiere <code>b</code> auf einen niedrigeren Index als <code>a</code>, d. h. <code>b</code> kommt zuerst.</li> + <li><code>compareFunction(a, b)</code> muss immer denselben Wert zurückgeben, wenn dasselbe Paar an Argumenten <code>a</code> und <code>b</code> übergeben wird. Werden inkonsistente Ergebnisse zurückgegeben, ist die Sortierreihenfolge undefiniert.</li> +</ul> + +<p>Die Vergleichsfunktion hat die Form:</p> + +<pre class="brush: js">function compare(a, b) { + if (a ist kleiner als b anhand von Sortierkriterien) { + return -1; + } + if (a ist größer als b anhand der Sortierkriterien) { + return 1; + } + // a muss gleich b sein + return 0; +} +</pre> + +<p>Um Nummern anstatt Strings zu vergleichen, kann die Vergleichsfunktion einfach <code>b</code> von <code>a</code> subtrahieren. Die folgende Funktion sortiert ein Array aufsteigend (sofern kein <code>Infinity</code> und <code>NaN</code> enthalten):</p> + +<pre class="brush: js">function compareNumbers(a, b) { + return a - b; +} +</pre> + +<p>Die <code>sort</code> Methode kann bequem mit {{jsxref("Operators/function", "Funktionsausdrücken", "", 1)}} benutzt werden:</p> + +<pre class="brush: js">var numbers = [4, 2, 5, 1, 3]; +numbers.sort(function(a, b) { + return a - b; +}); +console.log(numbers); + +// [1, 2, 3, 4, 5] +</pre> + +<p>ES2015 bietet {{jsxref("Functions/Arrow_functions", "Pfeilfunktionen", "", 1)}} mit noch kürzerer Syntax.</p> + +<pre class="brush: js">let numbers = [4, 2, 5, 1, 3]; +numbers.sort((a, b) => a - b); +console.log(numbers); + +// [1, 2, 3, 4, 5]</pre> + +<p>Objekte können anhand der Werte eines ihrer Eigenschaften sortiert werden.</p> + +<pre class="brush: js">var items = [ + { name: 'Edward', value: 21 }, + { name: 'Sharpe', value: 37 }, + { name: 'And', value: 45 }, + { name: 'The', value: -12 }, + { name: 'Magnetic', value: 13 }, + { name: 'Zeros', value: 37 } +]; + +// Sortieren nach Wert +items.sort(function (a, b) { + return a.value - b.value; +}); + +// Sortieren nach Wert +items.sort(function(a, b) { + var nameA = a.name.toUpperCase(); // Groß-/Kleinschreibung ignorieren + var nameB = b.name.toUpperCase(); // Groß-/Kleinschreibung ignorieren + if (nameA < nameB) { + return -1; + } + if (nameA > nameB) { + return 1; + } + + // Namen müssen gleich sein + return 0; +});</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Erstellen_Anzeigen_und_Sortieren_eines_Arrays">Erstellen, Anzeigen und Sortieren eines Arrays</h3> + +<p>Im folgenden Beispiel werden vier Arrays erstellt, das ursprüngliche Array angezeigt, danach die sortierten Arrays. Die numerischen Arrays werden erst ohne, dann mit Vergleichsfunktion sortiert.</p> + +<pre class="brush: js">var stringArray = ['Blue', 'Humpback', 'Beluga']; +var numericStringArray = ['80', '9', '700']; +var numberArray = [40, 1, 5, 200]; +var mixedNumericArray = ['80', '9', '700', 40, 1, 5, 200]; + +function compareNumbers(a, b) { + return a - b; +} + +console.log('stringArray:', stringArray.join()); +console.log('Sorted:', stringArray.sort()); + +console.log('numberArray:', numberArray.join()); +console.log('Sorted without a compare function:', numberArray.sort()); +console.log('Sorted with compareNumbers:', numberArray.sort(compareNumbers)); + +console.log('numericStringArray:', numericStringArray.join()); +console.log('Sorted without a compare function:', numericStringArray.sort()); +console.log('Sorted with compareNumbers:', numericStringArray.sort(compareNumbers)); + +console.log('mixedNumericArray:', mixedNumericArray.join()); +console.log('Sorted without a compare function:', mixedNumericArray.sort()); +console.log('Sorted with compareNumbers:', mixedNumericArray.sort(compareNumbers));</pre> + +<p>Dieses Beispiel erzeugt die folgende Ausgabe. Wie die Ausgabe zeigt, werden Zahlen bei Verwendung einer Vergleichsfunktion korrekt sortiert, ob es sich um Zahlen oder numerische Strings handelt.</p> + +<pre>stringArray: Blue,Humpback,Beluga +Sorted: Beluga,Blue,Humpback + +numberArray: 40,1,5,200 +Sorted without a compare function: 1,200,40,5 +Sorted with compareNumbers: 1,5,40,200 + +numericStringArray: 80,9,700 +Sorted without a compare function: 700,80,9 +Sorted with compareNumbers: 9,80,700 + +mixedNumericArray: 80,9,700,40,1,5,200 +Sorted without a compare function: 1,200,40,5,700,80,9 +Sorted with compareNumbers: 1,5,9,40,80,200,700</pre> + +<h3 id="Sortierung_von_nicht-ASCII_Zeichen">Sortierung von nicht-ASCII Zeichen</h3> + +<p>Zum Sortieren von Strings mit Nicht-ASCII-Zeichen, d. h. Zeichenfolgen mit Akzentzeichen (e, é, è, a, ä, etc.), Zeichenfolgen aus anderen Sprachen als Englisch: Verwenden Sie {{jsxref("String.localeCompare")}}. Diese Funktion kann diese Zeichen vergleichen, damit sie in der richtigen Reihenfolge angezeigt werden.</p> + +<pre class="brush: js">var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu']; +items.sort(function (a, b) { + return a.localeCompare(b); +}); + +// items is ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé']</pre> + +<h3 id="Sortieren_mit_map()">Sortieren mit <code>map()</code></h3> + +<p>Die <code>compareFunction</code> kann mehrmals pro Element innerhalb des Arrays aufgerufen werden. Abhängig von der Beschaffenheit von <code>compareFunction</code> kann dies zu einem hohen Overhead führen. Je mehr Arbeit eine <code>compareFunction</code> erledigt und je mehr Elemente zu sortieren sind, desto sinnvoller ist es die Verwendung von {{jsxref("Array.prototype.map()", "map()")}} zum Sortieren in Betracht zu ziehen. Die Idee ist, das Array einmal zu durchlaufen, um die tatsächlichen Werte für das Sortieren in ein temporäres Array zu extrahieren, das temporäre Array zu sortieren und dann das temporäre Array zu durchlaufen, um die richtige Reihenfolge zu erreichen.</p> + +<pre class="brush: js">// Das zu sortierende Array +var list = ['Delta', 'alpha', 'CHARLIE', 'bravo']; + +// Temporäres Array enthält Objekte mit Position und Sortierwert +var mapped = list.map(function(el, i) { + return { index: i, value: el.toLowerCase() }; +}) + +// Sortieren des gemappten Arrays mit den reduzierten Werten +mapped.sort(function(a, b) { + if (a.value > b.value) { + return 1; + } + if (a.value < b.value) { + return -1; + } + return 0; +}); + +// Behälter für die sich ergebende Reihenfolge +var result = mapped.map(function(el){ + return list[el.index]; +});</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-15.4.4.11', 'Array.prototype.sort')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.sort")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array.prototype.reverse()")}}</li> + <li>{{jsxref("String.prototype.localeCompare()")}}</li> + <li><a href="https://v8.dev/blog/array-sort">Informationen zur Stabilität des von der V8-Engine verwendeten Algorithmus</a> (Englisch)</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/splice/index.html b/files/de/web/javascript/reference/global_objects/array/splice/index.html new file mode 100644 index 0000000000..f77aab6bb1 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/splice/index.html @@ -0,0 +1,162 @@ +--- +title: Array.prototype.splice() +slug: Web/JavaScript/Reference/Global_Objects/Array/splice +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice +--- +<div>{{JSRef}}</div> + +<p>Die <code><strong>splice()</strong></code> Methode ändert den Inhalt eines Arrays durch das Entfernen vorhandener Elemente und/oder Hinzufügen neuer Elemente.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-splice.html")}}</div> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>array</var>.splice(<var>start[</var>, <var>deleteCount[</var>, <var>item1[</var>, <var>item2[</var>, <em>...]]]]</em>) +</pre> + +<h3 id="Parameters" name="Parameters">Parameter</h3> + +<dl> + <dt><code>start</code></dt> + <dd>Index ab welchem das Array geändert werden soll. Falls <code>start</code> größer als die Länge des Arrays ist, wird <code>start</code> auf die Länge des Arrays gesetzt.</dd> + <dd>Falls <code>start</code> negativ ist, beginnt die Änderung entsprechend viele Stellen rückwärts vom Ende des Arrays (d.h. hat <code>start</code> den Wert -n ist dies gleichbedeutend mit <code>array.length - n</code>) und wird auf 0 gesetzt wenn der absolute Wert von <code>start</code> größer als die Länge des Arrays ist.</dd> + <dt><code>deleteCount</code> {{optional_inline}}</dt> + <dd>Gibt die Anzahl der zu entfernenden alten Array Elemente an.</dd> + <dd>Wenn <code>deleteCount</code> weggelassen wird oder wenn der Wert größer oder gleich <code>array.length - start</code> ist (d. h. wenn der Wert größer oder gleich der Anzahl der von <code>start</code> aus verbleibenden Elemente ist), wird das ganze Array ab dem Index <code>start</code> gelöscht.</dd> + <dd>Wenn <code>deleteCount</code> 0 oder negativ ist, werden keine Elemente entfernt. In diesem Fall sollte man mindestens ein neues Element als weiteren Parameter übergeben, da das Array sonst nicht geändert wird.</dd> + <dt><code>item1, item2, ...</code> {{optional_inline}}</dt> + <dd>Die Elemente, die dem Array ab dem Index <code>start</code> hinzugefügt werden sollen. Falls keine Elemente angegeben werden, entfernt <code>splice</code> lediglich Elemente des Arrays.</dd> +</dl> + +<h3 id="Returns" name="Returns">Rückgabewert</h3> + +<p>Ein Array, welches die entfernten Elemente enthält. Wenn nur ein Element entfernt wurde, wird ein Array mit nur einem Element zurückgegeben. Wenn kein Element entfernt wurde, wird ein leeres Array zurückgegeben.</p> + +<h2 id="Description" name="Description">Beschreibung</h2> + +<p>Wenn die Anzahl der neu hinzugefügten Elemente ungleich der Anzahl der entfernten Elemente ist, wird die Länge des Arrays geändert. Bei gleicher Anzahl werden vorhandene Elemente sozusagen ersetzt.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Example_Using_splice" name="Example:_Using_splice">Entfernen von 0 (null) Elementen bei Index 2 und Einfügen von "drum"</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(2, 0, 'drum'); + +// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"] +// removed is [], no elements removed</pre> + +<h3 id="Entfernen_von_o_(null)_Elementen_bei_Index_2_und_Einfügen_von_drum_und_guitar">Entfernen von o (null) Elementen bei Index 2 und Einfügen von "drum" und "guitar"</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(2, 0, 'drum', 'guitar'); + +// myFish is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"] +// removed is [], no elements removed</pre> + +<h3 id="Entfernen_von_1_Element_bei_Index_3">Entfernen von 1 Element bei Index 3</h3> + + + +<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon']; +var removed = myFish.splice(3, 1); + +// removed is ["mandarin"] +// myFish is ["angel", "clown", "drum", "sturgeon"]</pre> + + + +<h3 id="Entfernen_von_1_Element_bei_Index_2_und_Einfügen_von_trumpet">Entfernen von 1 Element bei Index 2 und Einfügen von "trumpet"</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'sturgeon']; +var removed = myFish.splice(2, 1, 'trumpet'); + +// myFish is ["angel", "clown", "trumpet", "sturgeon"] +// removed is ["drum"] +</pre> + +<h3 id="Entfernen_von_2_Elementen_bei_Index_0_und_Einfügen_von_parrot_anemone_und_blue">Entfernen von 2 Elementen bei Index 0 und Einfügen von "parrot", "anemone" und "blue"</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'trumpet', 'sturgeon']; +var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue'); + +// myFish is ["parrot", "anemone", "blue", "trumpet", "sturgeon"] +// removed is ["angel", "clown"]</pre> + +<h3 id="Entfernen_von_2_Elementen_vom_Index_2">Entfernen von 2 Elementen vom Index 2</h3> + +<pre class="brush: js">var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon']; +var removed = myFish.splice(myFish.length - 3, 2); + +// myFish is ["parrot", "anemone", "sturgeon"] +// removed is ["blue", "trumpet"]</pre> + +<h3 id="Entfernen_von_einem_Element_bei_Index_-2">Entfernen von einem Element bei Index -2</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(-2, 1); + +// myFish is ["angel", "clown", "sturgeon"] +// removed is ["mandarin"]</pre> + +<h3 id="Entfernen_von_allen_Elementen_nach_Index_2_(inklusiv)">Entfernen von allen Elementen nach Index 2 (inklusiv)</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(2); + +// myFish is ["angel", "clown"] +// removed is ["mandarin", "sturgeon"]</pre> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommenter</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.splice")}}</p> +</div> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()", "push()")}} / {{jsxref("Array.prototype.pop()", "pop()")}} — hinzufügen/entfernen von Elementen vom Ende des Arrays</li> + <li>{{jsxref("Array.prototype.unshift()", "unshift()")}} / {{jsxref("Array.prototype.shift()", "shift()")}} — hinzufügen/entfernen von Elementen vom Beginn eines Arrays</li> + <li>{{jsxref("Array.prototype.concat()", "concat()")}} — gibt ein neues Array bestehend aus dem aktuellen Array kombiniert mit anderen Arrays und oder Werten</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/tolocalestring/index.html b/files/de/web/javascript/reference/global_objects/array/tolocalestring/index.html new file mode 100644 index 0000000000..ef5c1883b5 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/tolocalestring/index.html @@ -0,0 +1,183 @@ +--- +title: Array.prototype.toLocaleString() +slug: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString +tags: + - Array + - Internationalization + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString +--- +<div>{{JSRef}}</div> + +<p>Die Methode <code><strong>toLocaleString()</strong></code> gibt als Rückgabewert einen String zurück, welcher die Elemente des Arrays darstellt. Die Array-Elemente werden mittels ihrer <code>toLocaleString</code> Methode in Strings umgewandelt und durch einen sprachspezifischen String (wie zum Beispiel ein Kommazeichen “,”) separiert.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-tolocalestring.html")}}</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>arr</var>.toLocaleString([locales [, options]]); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>locales</code> {{optional_inline}}</dt> + <dd>Ein String mit einem Language-Tag nach BCP 47 oder ein Array solcher Strings. Für die allgemeine Art und Interpretation des <code>locales</code> Parameters, siehe Seite {{jsxref("Intl")}}.</dd> + <dt><code>options</code> {{optional_inline}}</dt> + <dd>Ein Objekt mit konfigurierbaren Eigenschaften, für Numbers siehe {{jsxref("Number.prototype.toLocaleString()")}}, und für Datumsangaben siehe {{jsxref("Date.prototype.toLocaleString()")}}.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein einzelner String der die Elemente des Arrays darstellt.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Verwendung_von_locales_und_options">Verwendung von <code>locales</code> und <code>options</code></h3> + +<p>Die Elemente des Arrays werden mittels der <code>toLocaleString</code> Methode in einen String umgewandelt.</p> + +<ul> + <li><code>Object</code>: {{jsxref("Object.prototype.toLocaleString()")}}</li> + <li><code>Number</code>: {{jsxref("Number.prototype.toLocaleString()")}}</li> + <li><code>Date</code>: {{jsxref("Date.prototype.toLocaleString()")}}</li> +</ul> + +<p>Jedem Strings und Numbers Element im Array <code>prices</code> die Währung zuordnen:</p> + +<pre class="brush: js">var prices = ['￥7', 500, 8123, 12]; +prices.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }); + +// "￥7,￥500,￥8,123,￥12" +</pre> + +<p>Für weitere Beispiele, siehe auch {{jsxref("Global_Objects/Intl","Intl")}}, {{jsxref("Global_Objects/NumberFormat","NumberFormat")}} und {{jsxref("Global_Objects/DateTimeFormat","DateTimeFormat")}}.</p> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">// https://tc39.github.io/ecma402/#sup-array.prototype.tolocalestring +if (!Array.prototype.toLocaleString) { + Object.defineProperty(Array.prototype, 'toLocaleString', { + value: function(locales, options) { + // 1. Let O be ? ToObject(this value). + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var a = Object(this); + + // 2. Let len be ? ToLength(? Get(A, "length")). + var len = a.length >>> 0; + + // 3. Let separator be the String value for the + // list-separator String appropriate for the + // host environment's current locale (this is + // derived in an implementation-defined way). + // NOTE: In this case, we will use a comma + var separator = ','; + + // 4. If len is zero, return the empty String. + if (len === 0) { + return ''; + } + + // 5. Let firstElement be ? Get(A, "0"). + var firstElement = a[0]; + // 6. If firstElement is undefined or null, then + // a.Let R be the empty String. + // 7. Else, + // a. Let R be ? + // ToString(? + // Invoke( + // firstElement, + // "toLocaleString", + // « locales, options » + // ) + // ) + var r = firstElement == null ? + '' : firstElement.toLocaleString(locales, options); + + // 8. Let k be 1. + var k = 1; + + // 9. Repeat, while k < len + while (k < len) { + // a. Let S be a String value produced by + // concatenating R and separator. + var s = r + separator; + + // b. Let nextElement be ? Get(A, ToString(k)). + var nextElement = a[k]; + + // c. If nextElement is undefined or null, then + // i. Let R be the empty String. + // d. Else, + // i. Let R be ? + // ToString(? + // Invoke( + // nextElement, + // "toLocaleString", + // « locales, options » + // ) + // ) + r = nextElement == null ? + '' : nextElement.toLocaleString(locales, options); + + // e. Let R be a String value produced by + // concatenating S and R. + r = s + r; + + // f. Increase k by 1. + k++; + } + + // 10. Return R. + return r; + } + }); +} +</pre> + +<p>Für die Unterstützung von veralteten JavaScript Engines, die <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code> nicht kennen, sollte kein Polyfill für <code>Array.prototype</code> Methoden eingesetzt werden, da sie auf diese Weise nicht mehr nicht-durchzählbar gemacht werden können.</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-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Initiale Definition war in ECMAScript 3.</td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sup-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td> + <td>{{Spec2('ES Int Draft')}}</td> + <td>Diese Definition ersetzt die Definition aus ECMA-262.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.toLocaleString")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array.prototype.toString()")}}</li> + <li>{{jsxref("Global_Objects/Intl","Intl")}}</li> + <li>{{jsxref("Object.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Number.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Date.prototype.toLocaleString()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/tosource/index.html b/files/de/web/javascript/reference/global_objects/array/tosource/index.html new file mode 100644 index 0000000000..0e7dd02745 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/tosource/index.html @@ -0,0 +1,69 @@ +--- +title: Array.prototype.toSource() +slug: Web/JavaScript/Reference/Global_Objects/Array/toSource +tags: + - Array + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toSource +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>Die <code><strong>toSource()</strong></code> Methode gibt einen String zurück, welcher den Quelltext des Arrays repräsentiert.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>arr</var>.toSource()</pre> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein String, der den Quelltext des Array repräsentiert.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Die <code>toSource</code> Methode gibt folgende Werte zurück:</p> + +<ul> + <li>Für das eingebaute {{jsxref("Array")}} Objekt gibt <code>toSource</code> den folgenden String zurück, um anzudeuten, dass der Quelltext nicht verfügbar ist: + + <pre class="brush: js">function Array() { + [native code] +} +</pre> + </li> + <li>Für Instanzen von {{jsxref("Array")}} gibt <code>toSource</code> einen String zurück, welcher den Quelltext des Arrays repräsentiert.</li> +</ul> + +<p>Diese Methode wird für gewöhnlich von JavaScript intern aufgerufen und nicht explizit in einem QUelltext. Man kann <code>toSource</code> beim Debuggen aufrufen, um den Inhalt eines Arrays abzufragen.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Untersuchen_des_Quelltextes_eines_Arrays">Untersuchen des Quelltextes eines Arrays</h3> + +<p><span class="short_text" id="result_box" lang="de"><span>Um den Quellcode eines Arrays zu untersuchen:</span></span></p> + +<pre class="brush: js">var alpha = new Array('a', 'b', 'c'); + +alpha.toSource(); +//returns ['a', 'b', 'c'] +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>In keiner Spezifikation enthalten. Implementiert in JavaScript 1.3.</p> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.toSource")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> + <li>{{jsxref("Array.prototype.toString()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/tostring/index.html b/files/de/web/javascript/reference/global_objects/array/tostring/index.html new file mode 100644 index 0000000000..0d8d1da3e6 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/tostring/index.html @@ -0,0 +1,80 @@ +--- +title: Array.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Array/toString +tags: + - Array + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString +--- +<div>{{JSRef}}</div> + +<p>Die <code><strong>toString()</strong></code> Methode gibt einen String zurück, der das Array und seine Elemente repräsentiert.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-tostring.html")}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>arr</var>.toString()</pre> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein String, der die Elemente des Arrays repräsentiert.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Das {{jsxref("Array")}} Objekt überschreibt die <code>toString</code> Methode von {{jsxref("Object")}}. Für Arrayobjekte fügt die <code>toString</code> Methode das Array zu einem String zusammen, der jedes Element des Arrayelemente durch Kommata getrennt enthält.</p> + +<p>JavaScript ruft die <code>toString</code> Methode automatisch auf wenn ein Array als Text repräsentiert wird oder wenn ein Array in einer Stringkonkatenation verwendet wird.</p> + +<h3 id="ECMAScript_5_Semantik">ECMAScript 5 Semantik</h3> + +<p>Beginnend mt JavaScript 1.8.5 (Firefox 4), und mit der Semantik des ECMAScript der 5. Edition, ist die <code>toString()</code> Methode generisch und kann mit jeglichen Objekten verwendet werden. {{jsxref("Object.prototype.toString()")}} wird aufgerufen und der resultierende Wert wird zurückgegeben.</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')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.2', 'Array.prototype.toString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.toString")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array.prototype.join()")}}</li> + <li>{{jsxref("Object.prototype.toSource()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/unobserve/index.html b/files/de/web/javascript/reference/global_objects/array/unobserve/index.html new file mode 100644 index 0000000000..fd31177c3a --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/unobserve/index.html @@ -0,0 +1,88 @@ +--- +title: Array.unobserve() +slug: Web/JavaScript/Reference/Global_Objects/Array/unobserve +tags: + - Array + - JavaScript + - Method + - Obsolete +translation_of: Archive/Web/JavaScript/Array.unobserve +--- +<div>{{JSRef}} {{obsolete_header}}</div> + +<p>Die Array<strong>.unobserve()</strong> Methode wird eingesetzt um Observers die mit {{jsxref("Array.observe()")}} eingestellt wurden zu entfernen, jedoch ist dieses veraltet und wurde schon von Browsern entfernt. Man kann einen allgemeineres {{jsxref("Proxy")}} Objekt benutzen.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">Array.unobserve(<var>arr</var>, <var>callback</var>)</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>arr</code></dt> + <dd>Das Array, welches nicht mehr Überwacht werden soll.</dd> + <dt><code>callback</code></dt> + <dd>Die Referenz zu dem Observer, die mit der Überwachung von Änderungen auf dem Array <strong>arr</strong> aufhören soll.</dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p><code>Array.unobserve()</code> sollt nach {{jsxref("Array.observe()")}} aufgerufen werden, um einen Observer von einem Array zu entfernen.</p> + +<p><strong>callback</strong> sollte eine Referenz auf eine Funktion sein und nicht einen anonyme Funktion sein, weil diese Referenz genutzt wird um den Observer zu entfernen. Es ist nicht zulässig <strong>Array.unobserve()</strong> mit einer anonymen Funktion aufzurufen, weil dadurch kein Observer entfernt wird.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Observer_von_Array_entfernen">Observer von Array entfernen</h3> + +<pre class="brush: js">var arr = [1, 2, 3]; + +var observer = function(changes) { + console.log(changes); +} + +Array.observe(arr, observer); + +arr.push(4); +// [{type: "splice", object: <arr>, index: 3, removed:[], addedCount: 1}] + +Array.unobserve(arr, observer); + +arr.pop(); +// The callback wasn't called</pre> + +<h3 id="Einsatz_einer_anonymen_Funktion">Einsatz einer anonymen Funktion</h3> + +<pre class="brush: js">var persons = ['Khalid', 'Ahmed', 'Mohammed']; + +Array.observe(persons, function (changes) { + console.log(changes); +}); + +persons.shift(); +// [{type: "splice", object: <arr>, index: 0, removed: [ "Khalid" ], addedCount: 0 }] + +Array.unobserve(persons, function (changes) { + console.log(changes); +}); + +persons.push('Abdullah'); +// [{type: "splice", object: <arr>, index: 2, removed: [], addedCount: 1 }] +// The callback will always be called +</pre> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.unobserve")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array.observe()")}} {{obsolete_inline}}</li> + <li>{{jsxref("Object.observe()")}} {{obsolete_inline}}</li> + <li>{{jsxref("Object.unobserve()")}} {{obsolete_inline}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/unshift/index.html b/files/de/web/javascript/reference/global_objects/array/unshift/index.html new file mode 100644 index 0000000000..2960b03cbb --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/unshift/index.html @@ -0,0 +1,99 @@ +--- +title: Array.prototype.unshift() +slug: Web/JavaScript/Reference/Global_Objects/Array/unshift +tags: + - Array + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift +--- +<div>{{JSRef}}</div> + +<p>Die <code><strong>unshift()</strong></code> Methode fügt ein oder mehrere Elemente am Anfang eines Array hinzu und gibt die neue Länge des Arrays zurück.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-unshift.html")}}</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>arr</var>.unshift(<var>element1</var>[, ...[, <var>elementN</var>]])</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Die Elemente die am Anfang des Arrays hinzugefügt werden sollen.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Die neue {{jsxref("Array.length", "length")}} Eigenschaft des Arrays auf dem die Methode aufgerufen wurde.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Die <code>unshift</code> Methode fügt die gegeben Elemente am Anfang eines Arrays ähnlichen Objektes hinzu.</p> + +<p><code>unshift</code> ist extra generisch gehalten. Diese Methode kann mit {{jsxref("Function.call", "call", "", 1)}} oder {{jsxref("Function.apply", "apply", "", 1)}} auf einem Array ähnlichen Objekt angewendet werden. Objekte, die nicht über die Eigenschaft <code>length</code> verfügen, welche nicht das letzte in einer Reihe aufeinander folgenden, null-basierenden nummerische Werten repräsentieren, können sinnlose Ergebnisse liefern.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: js">var arr = [1, 2]; + +arr.unshift(0); // result of call is 3, the new array length +// arr is [0, 1, 2] + +arr.unshift(-2, -1); // = 5 +// arr is [-2, -1, 0, 1, 2] + +arr.unshift([-3]); +// arr is [[-3], -2, -1, 0, 1, 2] +</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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.unshift")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/array/values/index.html b/files/de/web/javascript/reference/global_objects/array/values/index.html new file mode 100644 index 0000000000..3736af04f8 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/array/values/index.html @@ -0,0 +1,86 @@ +--- +title: Array.prototype.values() +slug: Web/JavaScript/Reference/Global_Objects/Array/values +tags: + - Array + - ECMAScript 2015 + - Iterator + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/values +--- +<div>{{JSRef}}</div> + +<p>Die <strong><code>values()</code></strong> Methode gibt ein neues <strong><code>Iterator</code></strong> Objekt des Arrays zurück, welches die Werte für jeden Eintrag im Array enthält.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-values.html")}}</p> + +<pre class="brush: js">var a = ['w', 'y', 'k', 'o', 'p']; +var iterator = a.values(); + +console.log(iterator.next().value); // w +console.log(iterator.next().value); // y +console.log(iterator.next().value); // k +console.log(iterator.next().value); // o +console.log(iterator.next().value); // p</pre> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>arr</var>.values()</pre> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein neues {{jsxref("Iterator")}} Objekt von dem Array.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Benutzung_der_for...of_loop">Benutzung der <code><a href="/de/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code> loop</h3> + +<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p']; +var iterator = arr.values(); + +for (let letter of iterator) { + console.log(letter); +} +</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-array.prototype.values', 'Array.prototype.values')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.values")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> +</ul> |