JavaScript – Array Operationen

Tutorial JavaScript

von Ardian Shala, 13.04.2017 - update: 26.07.2017
Gängige Linq JS Listen Operationen mittels Vanilla Javascript Array Operationen umsetzen und so ein Third Party Package einsparen.
Achtung: Manche Operationen sind nur in ES6 verfügbar!
Vorraussetzung:
  • Verständnis Array Operationen - link

Vanilla Javascript Array Operationen

Unter Vanilla Javascript Array Operationen verstehen sich pure Array Operationen ohne Third Party Packages wie linq, linq2015 etc.

Beliebiges Array

Für die folgenden Beispiele gehen wir von einem normalen Array mit folgender Struktur aus:

let list = [
    { name: "max", age: 22, hobby: "sports" },
    ...
]

All – via .every

„.every“ ermöglicht das Abfragen, ob alle Elemente des Arrays eine Bedingung entsprechen.

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

Any – via .some

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

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

Contains – via .map und indexOf

Mittels Kombination aus „.map“ und „.indexOf“ lässt sich prüfen, ob ein Element entsprechend einer Bedingung vorhanden ist.

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

Eleganter mittels ES6 Funktion „.findIndex“

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

Distinct – via .map und ES6 „Set“

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

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

First – via .find

„.find“ ermöglicht das Heraussuchen eines bestimmten Eintrages.

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

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.

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

OrderBy – via .sort

//hier ascending
list.sort((a, b) => { return a.name < b.name ? -1 : 1; }); 
//hier descending anhand von z.b. "age"
list.sort((a, b) => { return a.age > b.age ? 1 : -1; }); 

Remove – via .indexOf und .splice

„.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 ein „.map“ an.

let indexToRemove = list.map(i => i.name).indexOf("max");
list.splice(indexToRemove, 1)

Select – via .map

„.map“ ermöglicht das 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 Menge 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

Mittels „.reduce“ lassen sich Werte summiert zurückgeben.

//hier Rückgabe summierter Wert anhand von "age" der Elemente
list.map(i => i.age).reduce((total, current) => {
    return total + current
});

Where – via .filter

„.filter“ ermöglicht das Filtern eines Arrays.

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

Autor: Ardian Shala

Ersteller der Webseite MuchaDev. Frontend Entwickler mit Angular, Ionic und Backend Entwickler mit C#.