Unterschied zwischen Array.slice und Array.splice
Array.slice verändert das Original-Array nicht, sondern liefert einen Ausschnitt des Originals zurück. Die Methode splice hingegen entfernt Daten oder fügt neue Elemente in das Array und verändert das Original.
array.slice()
slice eignet sich zum Kopieren eines vollständigen Arrays, um Teile eines Arrays in ein neues Array zu kopieren und um Array-ähnliche Objekte in ein Array umzuwandeln.
Javascript slice(start[, end]) kopiert einen Bereich eines Arrays in ein anderes Array. start ist die Anfangsposition und end die Position nach dem ausgeschnittenen Bereich. Wenn eine der beiden Zahlen negativ ist, wird vom Ende des Arrays aus gezählt.
Das Original-Array bleibt erhalten – die Methode array.slice() ist nicht destruktiv.
slice ohne Parameter
Ohne Parameter kopiert slice das komplette Array. Damit liegen zwei Arrays mit gleichen Elementen vor.
0 1 2 3 4 5 6
const vehicle = ["🚂", "🚐", "🚋", "🚒", "🚜", "🚗", "🚚"];
const clone = vehicle.slice ();
console.log ("clone", clone); // ["🚂", "🚐", "🚋", "🚒", "🚜", "🚗", "🚚"]
slice mit einem Parameter
Mit nur einem Parameter idx kopiert slice die Elemente vom Index idx bis zum Ende des Arrays.
const auszug = vehicle.slice (3);
console.log ("auszug", auszug); // ["🚒", "🚜", "🚗", "🚚"]
slice mit zwei Parametern
Mit zwei Parametern (from, to) kopiert slice die Elemente von einschließlich from bis to, aber ohne to selber aufzunehmen.
const auszug2 = vehicle.slice (2, 5);
console.log ("auszug2", auszug2); // ["🚋", "🚒", "🚜"]
slice mit negativem Index
Am Ende kann slice mit einem negativen Index aufgerufen werden. Dann zählt slice vom Ende des Arrays an.
const backwards = vehicle.slice (-3);
console.log ("backwards", backwards); // ["🚜", "🚗", "🚚"]
slice (-1) liefert also das letzte Element des Arrays.
- arr.slice()
- kopiert das vollständige Array.
- arr.slice(4)
- schneidet das Element mit dem Index 4 aus. Wenn im Aufruf nur der Startindex angegeben ist, setzt slice() die Länge des Arrays als zweites Argument.
- arr.slice(0,3)
- schneidet die Elemente vom Index 0 bis zum Index vor 3 aus. Das Resultat ist ein Javascript Array der Länge 3: Der letzte Index ist ein leerer Platz oder Loch (sparse Arrays).
- arr.slice(0, -2);
- schneidet die Elemente vom Index 0 bis zum Index -2 + 5 = 3 aus. Wenn also einer der Indexwerte negativ ist, wird die Länge des Arrays addiert.
Ein leeres Element im Array? array.filter() mit einer Callback-Funktion aufrufen, die alle Werte auf "null"/"undefined" prüft.
Array-Elemente einsetzen, löschen oder ersetzen: array.splice()
splice () fügt Elemente an einer beliebigen Position des Arrays ein oder ersetzt sie oder löscht eine Anzahl von Elementen ab einer beliebigen Position.
Javascript array.splice(start, c [, e]) fügt c Elemente, die als Parameter e1, e2, … ec aufgeführt sind, in das Array ab Position start ein und überschreibt dabei vorhandene Elemente.
// start
// 0 1 2 3 4 5
let colors = ["rot", "grün", "blau", "gelb", "oliv", "grau"];
let out = colors.splice(0, 3, "lila", "braun", "ocker");
console.log ("out " + out);
console.log ("colors " + colors);
Die Anweisung colors.splice(0, 3, "lila", "braun", "ocker"); schneidet ab Position 0 drei Elemente aus colors und setzt drei neue Elemente lila, braun und ocker hinzu. Also enthält das Array colors am Ende der Anweisung lila, braun, ocker, gelb, oliv, grau.
Die Methode verändert das Array. Alles was aus dem Array herausgeschnitten wurde, kann einer Variablen übergeben werden.
[Log] out rot,grün,blau [Log] colors lila,braun,ocker,gelb,oliv,grau
Werden die optionalen Parameter e nicht benutzt, löscht splice(start, delcount) delcount Elemente ab Position start. Die folgenden Elemente werden neu durchnummeriert – mit splice(start, delcount) entstehen keine Lücken oder Löcher im Array.
colors.splice(1, 3); schneidet ab Position 1 drei Elemente aus colors aus, so dass "lila", "olive" und "grau" bleiben.
// 0 1 2 3 4 5
// | | | | | |
// "lila","braun","ocker","gelb","oliv","grau"
[Log] colors lila,olive,grau
array insert
Mit dem dritten Argument fügt array.splice() ein neues Element in ein Array ein.
// Das Original-Array let myarray = ["EINS", "ZWEI", "VIER"]; // splice(position, numberOfItemsToRemove, item) myarray.splice(2, 0, "DREI"); console.log (myarray);
[LOG] myarray EINS,ZWEI,DREI,VIER
Die Methode array.insert() zum Array-Prototype hinzufügen:
Array.prototype.insert = function (index, item) {
this.splice(index, 0, item);
};