Array shift / unshift

shift () und unshift () funktionieren äquivalent zu push und pop, wobei shift() ein Element am Anfang des Arrays entfernt (pop() hingegen am Ende), unshift() ein oder mehrere Elemente an den Anfang des Arrays setzt (push hingegen an das Ende des Arrays).

array.shift ()

array.shift () entfernt das erste Element des Arrays und läßt die folgenden Elemente um einen Index nach vorn rutschen. shift hat keine Parameter – kann also nur das erste Element entfernen.

shift unshift: vorn einfügen, vorn entfernen
shift/unshift vs array push/pop

Die übrigen Elemente des Arrays werden nach links verschoben und shift und die Länge des Arrays um 1 heruntergesetzt.

const arr = ["🌹", "🍆", "🍋", "🍑", "🌽"];
let rose = arr.shift();

Das erste Element geht an den Rückgabewert und fällt dabei aus dem Array heraus. Wenn das erste Element des Arrays selbst ein Array ist, gibt shift () das komplette Array zurück.

const colors = [["Zitronengelb", "Scharlachrot", "Himmelblau"], "Grau", "Grün", "Blau"];
const elem = colors.shift();
console.log (`colors ${colors}`);
console.log (`elem ${elem}`);
console.log (`length ${colors.length}`);

var elem = colors.shift() weist den Wert des ersten Elements der Variablen elem zu und entfernt es aus dem Array colors.

[Log]  colors   Grau, Grün, Blau 
[Log]  elem     Zitronengelb, Scharlachrot, Himmelblau 
[Log]  length   3 

var elem = colors.shift(); weist den Wert des ersten Elements der Variablen elem zu und entfernt das erste Element aus dem Array colors.

array.unshift ()

unshift () funktioniert wie array.push(), aber beginnt am Anfang des Arrays. array.unshift () fügt ein oder mehrere Elemente am Anfang des Arrays ein.

Übergibt der Aufruf unshift() mehrere Argumente, werden die Element von links nach rechts auf die ersten Positionen des Arrays gesetzt.

const cars = ["Opel", "Ford", "Fiat"];
const newcars = cars.unshift("Renault", "Peugeot");
console.log (`cars  ${cars}`);
console.log (`length ${cars.length}`);
[Log]  cars Renault, Peugeot, Opel, Ford, Fiat 
[Log]  cars.length 5 

Shift: Neues Element in JSON einsetzen

JSON Arrays of Objects sind Datenstrukturen für den Austausch zwischen Client und Server. Da sie oft nicht nur vom Script gelesen, sondern auch manipuliert werden, fallen immer wieder Array-Operationen wie das Einfügen von Elementen an.

const json = [
{"title": "Nachrichten aus einem unbekannten Universum", "author": "Schätzing, Frank"},
{"title": "Der Schwarm", "author": "Schätzing, Frank"},
{"title": "1920s", "author": "Yapp, Nick"}
];
const titanic = {
	"title": "Raumschiff Titanic",
	"author": "Adams, Douglas"
}

const design = {
	"title": "Structural Package Designs", 
	"author": "Pathak, Haresh"
}

// Zwei neue Objekte an den Anfang des Arrays setzen
const newBooks = json.unshift (titanic, design);
console.log ("Anzahl", newBooks);  // 5
console.log ("Liste", json) ;      // {Object, Object, Object, …}

shift / unshift vs pop / push

push bzw. pop sind sind schnelle Methoden, shift bzw. unshift sind langsamer. Kann man sich gut vorstellen: Wenn Elemente am Ende des Arrays hinzugefügt oder gelöscht werden, bleiben die Originalelemente des Arrays davon unberührt. Bei shift und unshift werden Elemente am Anfang des Arrays entfernt oder hinzugefügt. Die Indizes der folgenden Elemente müssen geändert werden.

Array-Elemente löschen und einfügen

Es gibt keine direkte Methode wie delete oder remove, um Elemente eines Arrays gezielt an einer speziellen Stelle einzufügen oder zu löschen. Um ein Element irgendwo zwischen Anfang und Ende zu entfernen, bietet Javascript den Umweg über das komplizierte array.slice(). Und dann gibt es auch noch das relativ moderne array.filter(), das ein neues Array ohne die unerwünschten Elemente anhand einer Callback-Funktion erzeugt.

const demoArr = ["Hund", "Katze", "Maus", "Kuh", "Hund", "Esel", "Katze", "Kolibri"];
const removeArr = ["Katze", "Kuh", "Kolibri"];
const result = demoArr.filter (function(item) {
	return removeArr.indexOf(item) == -1;
});
    
console.log(result); // ["Hund", "Maus", "Hund", "Esel"]
Suchen auf mediaevent.de