JavaScript Array Operationen

Was ist ein Javascript Array?

Ein Array ist in Javascript ein globales Objekt, welches das Erstellen von listenähnlichen Objekten erlaubt.
Hierbei ist zu beachten, dass ein Js Array immer mit dem Index „0“ anfängt.

Wie erstelle ich ein Javascript Array?

Ein Array lässt sich mittels [ ] erstellen.

//javascript create array
let list = [];

Für die folgenden Beispiele gehen wir von einem Js Array aus Objekten mit folgender Struktur aus.

//javascript array of objects
let list = [
    { name: "max", age: 22, hobby: "sports" },
    ...
]

Add – via .push

Das Hinzufügen eines neuen Eintrags zu einem Js Array lässt sich mittels .push realisieren.

//javascript add to array
let item = { name: "thomas" };
list.push(item);

All – via .every

.every ermöglicht das Abfragen, ob alle Elemente des Arrays einer Bedingung entsprechen.

list.every(item => item.name == "max");
//sollte false liefern, falls zuvor "thomas" via .push hinzugefügt wurde

Any – via .some

.some ermöglicht das Abfragen, ob mindestens ein Element des Arrays eine Bedingung entspricht.

list.some(item => item.name == "max");
//sollte true liefern

Contains – via .map und indexOf

Mittels Kombination aus .map und .indexOf lässt sich prüfen, ob ein Element entsprechend einer Bedingung vorhanden ist.
Ist der Index >= 0, so ist das Element vorhanden.

list.map(item => item.name).indexOf("max") >= 0;

Eleganter mittels ES6 Funktion .findIndex

list.findIndex(item => item.name == "max") >= 0;

Oder mittels ES7 Funktion .includes

list.map(item => item.name).includes("max"); 

Distinct – via .map und ES6 „Set“

Mittels .map lässt sich ein Key-Array erstellen, welches durch „Set“ auf eindeutige Keys minimiert wird.

let hobbies = list.map(item => item.hobby);
let hobbiesDistinct = Array.from(new Set(hobbies));

First – via .find

.find (ES6) ermöglicht das Heraussuchen eines bestimmten Eintrages anhand einer Bedingung.

let max = list.find(item => item.name == "max");

Insert – via .splice

.splice ermöglicht das Hinzufügen/Entfernen einer Teilmenge zwischen vorhanden Elementen.
Der erste Parameter gibt den Start-Index an.
Der zweite Parameter gibt an wie viele Stellen entfernt werden sollen – hier 0 (da eine Teilmenge dazwischen eingefügt werden soll)

list.splice(1,0, { name: 'Foo' });

Max – via .map und Math.max

Math.max ermittelt aus einem Array einer flachen Struktur den maximalen Wert.
Hier mit .map und ES6 Spread Syntax gelöst.

let ages = list.map(item => item.age);
let maxAge = Math.max(...ages); 

OrderBy – via .sort

Ein Js Array lässt sich mittels .sort Funktion und anschließendem Callback realisieren.
Folgend ist nur ein simpler Sort abgebildet. Für komplexere Sortier-Funktionen eignet sich ein RegEx via RegExp an.

//javascript sort array of objects

//ascending
list.sort((a, b) => a.name < b.name ? -1 : 1); 

//descending anhand von z.b. "age"
list.sort((a, b) => a.age > b.age ? 1 : -1); 

Remove – via .indexOf und .splice

Das Entfernen eines Element in einem Js Array lässt sich über folgende Hilfsfunktionen realisieren.
.indexOf gibt die Stelle (index) eines ersten Elementes an, welches der Bedingung entspricht.
.splice entfernt ein Element aus einem Array an einer bestimmten Stelle.
Bei Abfragen bestimmter Properties von Objekten bietet sich das Iterieren mittels .map an.
(alternativ zu .map lässt sich dies auch mittels javascript array foreach umsetzen)

//javascript remove from array
let indexToRemove = list.map(i => i.name).indexOf("max");
list.splice(indexToRemove, 1)

Select – via .map

.map ermöglicht das Iterieren von Listenobjekten und Zurückgeben neuer Array-Strukturen.

list.map(item => item.name);

Skip und Take – via .slice

.slice ermöglicht über 2 Parameter das Überspringen und Entnehmen einer bestimmten Teilmenge an Einträgen aus einem Array.
1. Parameter entspricht dem „.skip“
2. Parameter entspricht dem „.take“

list.slice(0, 2); //1. param = skip, 2. param = take

Sum – via .reduce

.reduce ermöglicht das Zurückgeben eines summierten Wertes.
Wichtig ist hier, dass der 2. Parameter mit 0 initialisiert wird, da sonst sum vom Typ des Listenelements ist, statt vom Typ number.
1. Parameter entspricht der Summe vom Typ number
2. Parameter entspricht dem des zu iterierenden Elementes

//hier Rückgabe summierter Wert anhand von "age" der Elemente
list.reduce((sum, current) => sum + current.age, 0);

Where – via .filter

.filter ermöglicht das Filtern eines Arrays anhand einer Bedingung.

list.filter(item => item.name == "max");