diff options
Diffstat (limited to 'files/de/web/javascript/reference/global_objects/array/slice')
| -rw-r--r-- | files/de/web/javascript/reference/global_objects/array/slice/index.html | 244 |
1 files changed, 244 insertions, 0 deletions
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> |