Javascript Array-Methoden

Nicht alles, was aussieht wie ein Array, ist ein Array

Aufgepasst! Es gibt Objekte in Javascript, die aussehen wie Arrays, aber keine Arrays sind. Sie haben i.d.R. einen Index für den Zugriff auf die Elemente und auch eine Eigenschaft length, aber keine der Array-Methoden. DOM Node lists und Javascript Strings sind Beispiele für Objekte, die keine Arrays sind, sondern nur so tun.

Array Methoden

Methoden machen Arrays so praktisch für das Speichern von logisch zusammengehörenden Werten – vom Einfügen neuer Elemente in das Array bis hin zum Sortieren des Arrays.

Array-Methoden sind entweder destruktiv (verändern das Array) oder nicht destruktiv (ändern das Array nicht).

push (): Fügt ein Element am Ende des Arrays ein und gibt die neue Größe des Arrays zurück.
Destruktiv
pop (): Entfernt das letzte Element aus dem Array und gibt es zurück.
Destruktiv
unshift (): Fügt ein Element am Anfang des Arrays ein und gibt die neue Größe des Arrays zurück.
Destruktiv
shift (): Entfernt das erste Element des Arrays und gibt es zurück.
Destruktiv
slice (): Kopiert die Array-Elemente von einem Startindex bis zu einem Endindex in ein neues Array.
Nicht destruktiv
splice (): Entfernt Elemente aus dem Array, ersetzt sie durch neue Elemente und gibt die ersetzen Elemente zurück.
Destruktiv
sort (): Wandelt die Werte in Strings um, so dass Zahlen nicht numerisch sortiert werden.
Destruktiv
reverse (): Kehrt die Reihenfolge der Elemente um und gibt einen Verweis auf das geänderte Original zurück.
Destruktiv
concat (): Erzeugt ein neues Array aus dem Original, gefolgt von allen Elementen eines oder mehrerer weiterer Arrays.
Nicht destruktiv
join (): Erzeugt einen String aus allen Elementen des Array und setzt dabei ein Trennzeichen (z.B. ",") zwischen die Werte.
Nicht destruktiv
indexOf (): Durchsucht das Array von einem Startindex an nach einem Wert und gibt die erste Fundstelle oder -1 (nicht gefunden) zurück.
Nicht destruktiv
includes (): Durchsucht das Array von einem Startindex an nach einem Wert und gibt true zurück, wenn der Wert gefunden wurde, oder false sonst.
Nicht destruktiv
lastIndexOf (): Durchsucht das Array von einem Startindex an rückwärts (nach vorn). Gibt die erste Fundstelle oder -1 (nicht gefunden) zurück.
Nicht destruktiv
copyWithin (): Kopiert Elemente des Arrays auf eine andere Position des Arrays und überschreibt dabei die vorhandenen Elemente. copyWithin fügt dem Array also keine neuen Elemente hinzu.
destruktiv
fill (): Füllt das Array mit Werten und überschreibt dabei vorhandene Elemente
destruktiv
find (): Gibt den Wert des ersten Elements zurück, das einen Test besteht und undefined, wenn keines der Elemente dem Test entspricht
nicht destruktiv
findIndex (): Gibt des Index des ersten Elements zurück, das einen Test besteht
nicht destruktiv
keys (): Gibt einen Array-Iterator zurück, der die Schlüssel – keys – des Original-Arrays enthält

Statische Array-Methoden

Array.from (): Erzeugt ein Array aus einem Object
Array.isArray (): Prüft, ob ein Objekt ein Array ist

Statisch heißen diese Array-Methoden, weil sie das Array nicht ändern und auf dem Array-Objekt direkt aufgerufen werden.

Iterationen – Arrays durchlaufen

forEach (): Iteriert über (durchläuft) die Elemente eines Arrays
Nicht destruktiv
überspringt Löcher im Array
for … of: for of durchläuft alle iterierbaren Objekte (Arrays, Maps, Sets, sogar nodeLists und HTML-Collections)
entries (): gibt einen Array-Iterator mit key/value-Paaren zurück.
every (): Gibt true zurück, wenn der Iterator (die Callback-Funktion) für alle Elemente true zurückgibt. Wenn das Callback false zurückgibt, endet die Iteration.
Nicht destruktiv,
überspringt Löcher im Array
some (): Gibt true zurück, wenn der Iterator bzw. die Callback-Funktion für mindestens ein Element true zurückgibt.
Nicht destruktiv
map ()
: wendet eine Callback-Funktion auf jedes Element des Arrays an und gibt ein neues Array zurück.
Erhält Löcher im Array.
filter ()
: Filtert die Elemente des Arrays anhand einer bereitgestellten Funktion, ändert das Array nicht, sondern gibt ein neues Array zurück (ab IE9).
Eliminiert Löcher im Array.
reduce (): reduziert das Array anhand einer bereitgestellten Funktion auf einen einzigen Rückgabewert und gibt das Ergebnis zurück (ab IE9). Sinnvoll z.B., wenn die Werte des Arrays aufsummiert werden sollen.
reduceRight(): wie array.reduce (), aber arbeitet sich von rechts nach links bzw. in absteigender Folge statt in aufsteigender Folge durch das Array.
findLast() und findLastIndex(): Neue Methoden aus ES 2023. die eine Suche vom Ende anstelle des Anfangs aus starten.
nicht destruktiv

Mit Methoden wie filter (), map (), every und some () habe wir jede Menge praktischer Funktionen für die gesammelten Elemente des DOM – von der Bildern einer Slideshow über Menüstrukturen bis zu Produktlisten. Auch wenn getElementsByClassName und getElementsByName eine HTMLCollection zurück geben, elem.childNodes und querySelectorAll eine NodeList, und HTMLCollections und NodeLists keine Arrays sind: for of iteriert über all iterierbaren Objekte (nicht IE11).

Erst Array.from () kann ein Objekt, das iteriert werden kann, in ein Array umwandeln.

Element aus Array löschen

Javascript bietet keine direkte Methode, um ein einzelnes Element aus einem Array zu löschen. Da hilft man sich mit den Methoden slice und concat oder splice().

const vdw = new Array(
    	'Hans',    // 0
    	'Emil',    // 1       0,2
    	'Georg',   // 2   ◀────┘
    	'Karl',    // 3   ◀────┐
    	'Hugo',    // 4       2+1
    	);

const foo = vdw.slice(0,2).concat( vdw.slice(2+1) );
console.log (foo)


["Hans", "Emil", "Karl", "Hugo"] (4)

array.valueOf()

Arrays in Javascript erben die Methode valueOf vom Objekt Object. valueOf gibt einen primitiven Wert für das angegebene Array zurück. Überschreibt die Methode Object.valueOf().
Syntax: Array.valueOf()

constructor: die Funktion, die den Prototypen des Objekts erzeugt hat.
Syntax: object.constructor
index (nur lesen): erzeugt durch einen Treffer mit einem regulären Ausdruck; enthält den Index des Treffers beginnend bei 0.
Syntax: object.index
input (nur lesen): erzeugt durch einen Treffer mit einem regulären Ausdruck; enthält die originale Zeichenkette, gegen die der Treffer erzielt wurde.
Syntax: object.input
length (unsigned 32 bit integer): Anzahl der Elemente des Arrays. Kann unabhängig von der Anzahl der Elemente im Array geändert werden.
Syntax: object.length
prototype: wird benutzt, um dem Array weitere Eigenschaften hinzuzufügen.
Syntax: object.prototype

array.toSource()

Javascript toSource gibt ein Array-Literal zurück, das ein angegebenes Array darstellt, und kann benutzt werden, um ein neues Array zu erzeugen. Überschreibt die Methode Object.toSource()

Neu in ES 2023

const arr = [28, 117, 339, 2, 771, 17, 2, 1119];

arr.findLast(function (value, index) {
	if (value < 20) console.log('%d: %s', index, value);
});


6: 2 
5: 17 
3: 2