Array.prototype.slice()

Die slice() Methode schreibt eine flache Kopie eines Teil-Arrays in ein neues Array Objekt.

Syntax

arr.slice([begin[, end]])

Parameter

begin

Null-basierter Index, an welcher die Extraktion beginnt.

Bei einem negativen Index kennzeichnet begin einen offest vom Ende der Sequenz. slice(-2) extrahiert die letzten zwei Elemente der Sequenz.

Wenn begin undefined ist, beginnt slice bei Index 0.

end

Null-basierter Index, an welchem die Extraktion endet. slice extrahiert bis zu, aber nicht inklusive end.

slice(1,4) extrahiert vom zweiten Element bis zum vierten Element (Elemente sind indexiert als 1,2 und 3).

Bei einen negativen Index kennzeichnet end einen offset vom Ende der Sequenz. slice(2, -1) extrahiert das dritte Element bis zum zweit letzten Element der Sequenz.

Wenn auf end verzichtet wird, dann extrahiert silce bis zum Ende der Sequenz (arr.length).

Rückgabewert

Ein neues Array, welches die extrahierten Elemente enthält.

Beschreibung

slice verändert das Array nicht. Es gibt eine flache Kopie der Elemente des Array Arrays zurück.
Elemente des original Arrays werden in das zurückgegeben Array kopiert, wie folgendermaßen:

• Für Objektreferenzen (nicht das aktuelle Objekt) kopiert slice die Objektreferenz in das neue Array.
  Beide, das Original und das neue Array, haben eine Referenz auf dasselbe Objekt. Wenn sich ein referenziertes
  Objekt ändert, werden die Änderungen sichtbar für das neue, sowie das originale Array.
• Für Zeichenketten und nummerische Datentypen (nicht String und Number Objekte) kopiert slice die Zeichenketten und nummerische Datentypen in das neue Array.
  Änderungen an Zeichenketten oder nummerischen Datentypen in einem Array haben keine Auswirkung auf das andere Array.

 Wenn ein neues Element zu einem Array hinzugefügt wird, hat es keine Auswirkung auf das andere Array.

Beispiel

Gibt einen Teil eines existierenden Arrays zurück.

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']

Gebrauch von slice

Im folgenden Beispiel produziert slice ein neues Array, newCar aus myCar.
Beide haben eine Referenz zu dem Objekt myHonda. Wenn sich die Farbe von myHonda zu lila ändert, dann 
reflektiert die Änderung auf beide Objekte.

// 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);

Dieses Skript schreibt:

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

Array-ähnliche Objekte

Die slice Methode kann auch verwendete werden, um Array-ähnliche Objekte / collections in Arrays zu konvertieren.
Man muss nur die Methode an das Objekt binden. 
Die arguments innerhalb einer Funktion sind ein Beispiel für 'Array-ähnliche' Objekte.

function list() {
  return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

Das Binden von Methoden funktioniert mit der .call Funktion von Function.prototype und 
der Aufruf kann reduziert werden mit [].slice.call(arguments), anstatt Array.prototype.slice.call. 
Ohnehin, kann der Aufruf vereinfacht werden mit bind.

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]

Cross-Browser Verhalten

Obwohl host Objekte (wie das DOM Objekt) nicht erforderlich sind, um dem Mozilla Verhalten per Spezifikation bei Konvertierung mit Array.prototype.slice zu folgen 
und IE < 9 dies auch nicht tut, erlauben Versionen des IE beginnend mit Version 9 dieses “shimming”. Es kann 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 null/undefined) als Wert verwendet.
Bei älteren Versionen des IE war dies nicht erlaubt, jedoch funktioniert es bei allen modernen Browsern inklusive IE >= 9.)

/**
 * 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;
    };
  }
}());

Spezifikationen

Browserkompabilität

Siehe auch

• Function.prototype.call()
• Function.prototype.bind()