Array-Methoden

Arrays bieten in JavaScript zahlreichhe Methoden für unterschiedliche Situationen. In einer früheren Lektion wurden bereits die Methoden push zum Hinzufügen eines Elements in ein Array und forEach zum Durchlaufen eines Arrays erwähnt.

Hier werden weitere praktische Beispiel-Methoden gezeigt.

Elemente entfernen mit splice

splice ist eine mächtige Methode, um den Inhalt eines Arrays zu verändern. Ein Beispiel, das zeigt, wie ein bestimmtes Element entfernt wird:

const colors = ["orange", "blue", "red", "green"];
// entferne ein Element ab Index zwei (red)
colors.splice(2,1);
console.log(colors); 
// --> ["orange", "blue", "green"];

Hier bezeichnet das erste Argument (2) den Start-Index und das zweite Argument (1) die Anzahl der ab dem Start-Index zu entfernenden Elemente.

splice bietet noch viel mehr Möglichkeiten, wie hier in MDN nachzulesen.

Teile eines Arrays mit slice kopieren

Mit slice lassen sich Teile eines Arrays kopieren. Hierbei wird das Array selbst nicht verändert. Zum Beispiel können wir alle Elemente ab einem bestimmten Index bis zum Ende des Arrays als neues Array kopieren:

const colors = ["orange", "blue", "red", "green"];
// kopiere alle Elemente ab dem zweiten Index ("red")
const colors2 = colors.slice(2);
 
// colors2 ist ein neues Array:
console.log(colors2); 
// --> ["red", "green"];
 
// colors wurde nicht verändert!
console.log(colors); 
// --> ["orange", "blue", "red", "green"];

Auch slice ist eine flexible Methode, siehe dazu die Beschreibung in MDN.

find

Mit find können Arrays durchsucht werden. find erhält dazu eine Testfunktion, die solange auf jedes Element des Arrays angewendet wird, bis die Testfunktion für ein Element true als Rückgabewert liefert. Dazu ein Beispiel:

const colors = ["orange", "gray", "red", "green"];
const color = colors.find(item => item.startsWith('g'));
console.log(color); // --> gray

Hier wird eine Testfunktion als Pfeilfunktion an find übergeben. find hat true als Rückgabewert, wenn ein Element (also ein Farbname) mit dem Buchstaben g beginnt. Hier wird also "gray" als Ergebnis von find herauskommen.

Es gibt weitere Funktionen, die ebenfalls mit einer Testfunktion ausführt.

filter

Bei find wird lediglich das erste Element geliefert, für das die Testfunktion den Wert true ergibt. Mit filter lassen sich hingegen alle Elemente „filtern“, die eine bestimmte Bedingung erfüllen:

const colors = ["orange", "gray", "red", "green"];
const gColors = colors.filter(item => item.startsWith('g'));
console.log(gColors); // --> [ "gray", "green" ]

filter liefert also ein neues Array, das alle Elemente enthält, für die die Testfunktion true ergibt. Das Ausgangsarray wird dabei nicht verändert.

map

Manchmal ist es erforderlich, alle Elemente eines Arrays umzuformen. Dies ist mit map möglich:

const colors = ["orange", "gray", "red", "green"];
const uColors = colors.map(item => item.toUpperCase());
console.log(uColors); 
// --> [ "ORANGE", "GRAY", "RED", "GREEN" ]

Hierbei wird keine Testfunktion an map übergeben, sondern eine „Umwandlungsfunktion“, die auf jedes Element im Array angewendet wird. Heraus kommt ein neues Array mit den umgewandelten Werten und das ursprüngliche Array bleibt erhalten.

Es gibt einige weitere Array-Methoden, die in bestimmten Situationen nützlich sein können (sort,reverse,concat,join, u.v.a.m) — siehe dazu die folgenden Weblinks.