Array.prototype.slice()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die slice() Methode von Array Instanzen gibt eine flache Kopie eines Teils eines Arrays als neues Array-Objekt zurück. Dieser Teil wird von start bis end ausgewählt (end ist nicht eingeschlossen), wobei start und end den Index der Elemente in diesem Array repräsentieren. Das Original-Array wird nicht verändert.

Probieren Sie es aus

const animals = ["ant", "bison", "camel", "duck", "elephant"];

console.log(animals.slice(2));
// Expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// Expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// Expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// Expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// Expected output: Array ["camel", "duck"]

console.log(animals.slice());
// Expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

Syntax

js
slice()
slice(start)
slice(start, end)

Parameter

start Optional

Index, bei dem der Extraktionsvorgang beginnen soll, basierend auf Null. In eine Ganzzahl umgewandelt.

  • Ein negativer Index zählt vom Ende des Arrays zurück — wenn -array.length <= start < 0, wird start + array.length verwendet.
  • Wenn start < -array.length oder start weggelassen wird, wird 0 verwendet.
  • Wenn start >= array.length, wird ein leeres Array zurückgegeben.
end Optional

Index, bei dem der Extraktionsvorgang beendet werden soll, basierend auf Null. In eine Ganzzahl umgewandelt. slice() extrahiert bis, aber nicht einschließlich end.

  • Ein negativer Index zählt vom Ende des Arrays zurück — wenn -array.length <= end < 0, wird end + array.length verwendet.
  • Wenn end < -array.length, wird 0 verwendet.
  • Wenn end >= array.length oder end weggelassen wird, wird array.length verwendet, wodurch alle Elemente bis zum Ende extrahiert werden.
  • Wenn end eine Position vor oder an der Position impliziert, die start impliziert, wird ein leeres Array zurückgegeben.

Rückgabewert

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

Beschreibung

Die slice() Methode ist eine kopierende Methode. Sie verändert this nicht, sondern gibt eine flache Kopie zurück, die einige der gleichen Elemente wie das ursprüngliche Array enthält.

Die slice() Methode bewahrt leere Stellen. Wenn der geschnittene Teil dünn besetzt ist, ist das zurückgegebene Array ebenfalls dünn besetzt.

Die slice() Methode ist generisch. Sie erwartet nur, dass der this Wert eine length Eigenschaft und ganzzahlig indizierte Eigenschaften hat.

Beispiele

Einen Teil eines bestehenden Arrays zurückgeben

js
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);

// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus contains ['Orange','Lemon']

In diesem Beispiel extrahiert slice(1, 3) Elemente vom Index 1 bis, aber nicht einschließlich, Index 3, was in einem neuen Array ['Orange', 'Lemon'] resultiert.

Den end Parameter weglassen

js
const fruits = ["Apple", "Banana", "Orange", "Mango", "Pineapple"];

const tropical = fruits.slice(2);
console.log(tropical); // ['Orange', 'Mango', 'Pineapple']

In diesem Beispiel extrahiert slice(2) Elemente vom Index 2 bis zum Ende des Arrays.

Verwendung negativer Indizes

js
const fruits = ["Apple", "Banana", "Orange", "Mango", "Pineapple"];

const lastTwo = fruits.slice(-2);
console.log(lastTwo); // ['Mango', 'Pineapple']

In diesem Beispiel extrahiert slice(-2) die letzten zwei Elemente des Arrays. Bei Verwendung eines negativen Index mit der slice-Methode wird der negative Index vom Ende des Arrays, beginnend bei -1 für das letzte Element, -2 für das vorletzte Element, und so weiter, gezählt. Der negative Index -2 selbst wird eingeschlossen, da er der Startpunkt der Extraktion ist.

|     |     |     |     |     |
|  S  |  L  |  I  |  C  |  E  |
|     |     |     |     |     |
  -5    -4    -3    -2    -1

<--- read from reverse

Verwendung eines positiven Startindex und eines negativen Endindex

js
const fruits = ["Apple", "Banana", "Orange", "Mango", "Pineapple"];

// Using positive start index and negative end index
const sliceExample = fruits.slice(1, -1);
console.log(sliceExample); // ['Banana', 'Orange', 'Mango']

In diesem Beispiel beginnt slice(1, -1) die Extraktion vom Index 1 und geht bis, aber schließt das Element am Index -1 (das letzte Element) nicht ein. Dies führt zu einem neuen Array mit ['Banana', 'Orange', 'Mango']. Die slice Methode schließt immer das Element am angegebenen Endindex aus, unabhängig davon, ob dieser positiv oder negativ ist.

read from start --->

   0     1     2     3     4
|     |     |     |     |     |
|  S  |  L  |  I  |  C  |  E  |
|     |     |     |     |     |
  -5    -4    -3    -2    -1

<--- read from reverse

Verwendung von slice mit Arrays von Objekten

Im folgenden Beispiel erstellt slice ein neues Array, newCar, von myCar. Beide schließen einen Verweis auf das Objekt myHonda ein. Wenn die Farbe von myHonda auf Lila geändert wird, spiegeln beide Arrays die Änderung wider.

js
// Using slice, create newCar from myCar.
const myHonda = {
  color: "red",
  wheels: 4,
  engine: { cylinders: 4, size: 2.2 },
};
const myCar = [myHonda, 2, "cherry condition", "purchased 1997"];
const newCar = myCar.slice(0, 2);

console.log("myCar =", myCar);
console.log("newCar =", newCar);
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);

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

Aufruf von slice() auf Nicht-Array-Objekten

Die slice() Methode liest die length Eigenschaft von this. Sie liest dann die ganzzahlig indizierten Eigenschaften von start bis end und definiert sie in einem neu erstellten Array.

js
const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
  3: 33, // ignored by slice() since length is 3
};
console.log(Array.prototype.slice.call(arrayLike, 1, 3));
// [ 3, 4 ]

Verwendung von slice() zur Umwandlung von array-ähnlichen Objekten in Arrays

Die slice() Methode wird häufig mit bind() und call() verwendet, um eine Hilfsmethode zu erstellen, die ein array-ähnliches Objekt in ein Array umwandelt.

js
// slice() is called with `this` passed as the first argument
const slice = Function.prototype.call.bind(Array.prototype.slice);

function list() {
  return slice(arguments);
}

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

Verwendung von slice() auf dünn besetzten Arrays

Das von slice() zurückgegebene Array kann dünn besetzt sein, wenn die Quelle dünn besetzt ist.

js
console.log([1, 2, , 4, 5].slice(1, 4)); // [2, empty, 4]

Spezifikationen

Specification
ECMAScript® 2025 Language Specification
# sec-array.prototype.slice

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch