JavaScript Arrays – Die nützlichsten Funktionen für Entwickler

JavaScript Arrays – Die nützlichsten Funktionen für Entwickler Thumbnail
Veröffentlicht am 9. Juli 2019Zuletzt aktualisiert am 2. Juni 2020

JavaScript Arrays bieten schon immer viele tolle Funktionen. Gerade mit der Einführung von ES6 und den Arrow Functions sind noch weitere nützliche Funktionen dazu gekommen. Dazu habe ich hier eine Liste mit nützlichen JavaScript Array Funktionen zusammengestellt und zeige Dir mit Beispielen, was sie drauf haben.

Anzeige

JavaScript Arrays sind schon eine tolle Sache. Neben den vielfältigen Möglichkeiten haben Sie noch einen entscheidenden Vorteil im Gegensatz zu Arrays in anderen Programmiersprachen: Sie haben viel nützlichere Funktionen.

Neben den ganzen Array Standardfunktionen, wie z.B. push() und pop() existieren auch viele nützliche Funktionen, die es mit wenig Code ermöglichen, das gewünschte Ziel zu erreichen. Glaubst Du nicht? Na, dann warte ab!

Zu allen Funktionen habe ich entsprechende Beispiele hinzugefügt.

Was sind überhaupt JavaScript Arrays?

JavaScript Arrays sind zu verstehen, wie Arrays in den meisten anderen bekannten Programmiersprachen. Sie ermöglichen es einem, mehrere Werte in einer einzigen Variable zu speichern, dort abzufragen, zu löschen oder zu verändern.

In kaum einem Programm sind Arrays wegzudenken und auch bei der Programmierung von JavaScript sind Arrays ein wichtiger Bestandteil.

Egal, ob Du in Vanilla JS, Vue.js, React.js oder Node.js programmierst, JavaScript Arrays begegnen Dir überall.

Anzeige

Neben den Standardfunktionen, wie hinzufügen oder löschen einzelner Elemente in einem Array bietet JavaScript viele nützliche Funktionen, um Operationen an und mit Arrays auszuführen.

Wenn Du mehr zu den Grundlagen wissen willst, kannst Du Dir diesen Artikel anschauen. Wir gehen aber direkt zu den coolen und nützlichen Funktionen über.

1. Array.map() – Aufgaben OHNE Schleife durchführen

Bei dieser Funktion wird eine gewünschte Operation auf jedes Element im Array ausgeführt. Dabei erhalten wir ein neues Array mit den veränderten Einträgen zurück. Dadurch sparen wir uns das Programmieren einer Schleife und können unsere Funktion im besten Fall als Einzeiler implementieren.

Zur Anschaulichkeit haben wir ein Element mit Früchten, welches wir verändern wollen.

let fruits = [
    'banana',
    'apple',
    'avocado',
    'cherry',
    'grapefruit',
    'melon'
];

const fruitsLongerSix = fruits.map(fruit => 'Fruit: ' + fruit);

console.log(fruitsLongerSix); // Output: ["Fruit: banana", "Fruit: apple", "Fruit: avocado", "Fruit: cherry", "Fruit: grapefruit", "Fruit: melon"]

Wenn unsere Anweisung komplizierter wird, können wir den Callback auch in einer eigenen Funktion auslagern. Das würde so aussehen:

let fruits = [
    'banana',
    'apple',
    'avocado',
    'cherry',
    'grapefruit',
    'melon'
];

const fruitsLongerSix = fruits.map(addPrefix);

function addPrefix(entry) {
    return 'Fruit: ' + entry;
}

console.log(fruitsLongerSix); // Output: ["Fruit: banana", "Fruit: apple", "Fruit: avocado", "Fruit: cherry", "Fruit: grapefruit", "Fruit: melon"]

Dokumentation

2. Array.filter() – Elemente OHNE Schleife aussortieren

Diese Funktion erstellt ein neues Array mit allen Elementen die den implementierten Test bestehen. Das bedeutet, wir können unser Array filtern, ganz nach unseren Vorstellungen. Das ist eine einfache und saubere Methode um Listeneinträge zu filtern.

Anzeige

Wir haben hier wieder unser Array mit Früchten und benötigen nur Einträge mit einem „o“ im Namen. Durch eine einzige Zeile können wir diese Funktion implementieren.

let fruits = [
    'banana',
    'apple',
    'avocado',
    'cherry',
    'grapefruit',
    'melon'
];

let filtered = fruits.filter(fruit => fruit.indexOf('o') > -1);

console.log(filtered); // Output: ["avocado", "melon"]

Wenn die Filterung etwas komplexer wird, können wir wieder den Callback der filter()-Funktion auch in eine extra Funktion auslager, wie im folgenden Beispiel:

let fruits = [
    'banana',
    'apple',
    'avocado',
    'cherry',
    'grapefruit',
    'melon'
];

let filtered = fruits.filter(getO);

function getO(entry) {
    return entry.indexOf('o') > -1;
}

console.log(filtered); // Output: ["avocado", "melon"]

Dokumentation

3. Array.forEach() – Wir brauchen keine for-Schleife mehr

Diese Funktion kann unsere for-Schleife ersetzen. Durch weniger Code können wir über jedes Element eines Arrays iterieren. Im Prinzip funktioniert sie wie die map()-Funktion, bis auf den Unterschied, dass hier kein neues Array erstellt wird.

So sieht ein normaler Schleifendurchlauf aus. Deutlich einfacher und übersichtlicher als eine for-Schleife, nicht wahr?

let fruits = [
    'banana',
    'apple',
    'avocado',
    'cherry',
    'grapefruit',
    'melon'
];

fruits.forEach((fruit) => {
    console.log(fruit);
});

// Output:
// banana
// apple
// avocado
// cherry
// grapefruit
// melon

Manchmal benötigen wir noch einen zusätzlichen Index, oder wie ich ihn auch gerne nenne „Counter“. Auch das lässt sich mit dieser Funktion realisieren. Dazu geben wir eine zusätzliche Variabale index im Funktionskopf an.

let fruits = [
    'banana',
    'apple',
    'avocado',
    'cherry',
    'grapefruit',
    'melon'
];

fruits.forEach((fruit, index) => {
    console.log(index, fruit);
});

// Output:
// 0 "banana"
// 1 "apple"
// 2 "avocado"
// 3 "cherry"
// 4 "grapefruit"
// 5 "melon"

Dokumentation

Anzeige

4. Array.indexOf() – Wo ist mein Element?

Die Funktion liefert uns den Index – also die Stelle – eines Elements in einem Array zurück. Damit können wir also auch prüfen, ob sich ein bestimmtes Element im Array befindet.

Wenn wir uns das Ergebnis der Funktion ausgeben lassen, bekommen wir den jeweiligen Index zurück. Ist ein Element nicht vorhanden, bekommen wir -1 zurück.

let fruits = [
    'banana',
    'apple',
    'avocado',
    'cherry',
    'grapefruit',
    'melon'
];

console.log(fruits.indexOf('banana')); // Output: 0 (it's the first index)

console.log(fruits.indexOf('cherry')); // Output: 3

onsole.log(fruits.indexOf('toast')); // Output: -1

Weiterhin können wir mit dieser Abfrage prüfen, ob sich ein bestimmtes Element in dem Array befindet:

if (fruits.indexOf('avocado') > -1) {
    console.log('We have an avocado!');
}

Dokumentation

5. Array.find() – Elemente im Array suchen

Mit dieser Funktion können wir auch prüfen, ob sich ein bestimmtes Element im Array befindet. Es gibt uns immer das erste Vorkommen im Array zurück, auf die unsere Bedingung zutrifft.

Unsere Anweisung lautet: „Gebe mir ein Element mit „o“ im Namen zurück“. Dabei bekommen wir das erste Ergebnis in unserer result Variable.

let fruits = [
    'banana',
    'apple',
    'avocado',
    'cherry',
    'grapefruit',
    'melon'
];

const result = fruits.find((fruit) => {
    return fruit.indexOf('o') > -1;
});

console.log(result); // Output: avocado

Auch hier gilt, dass wir komplexere Anweisungen in eine extra Callback-Funktion auslagern können.

Anzeige

Dokumentation

6. Array.sort() – Werte sortieren leicht gemacht

Diese Funktion kann unser Array sortieren. Wir brauchen also keinen eigenen Sortier-Algorithmus programmieren.

Dazu wandelt diese Funktion die Elemente des Arrays in Strings um und vergleicht Sie anhand ihrer UTF-16 Codepoints. Daher werden Strings, die mit Zahlen beginnen auch immer vor allen String Elementen stehen.

let fruits = [
    'banana',
    'apple',
    'avocado',
    'cherry',
    'grapefruit',
    'melon'
];

let sortedFruits = fruits.sort();
console.log(sortedFruits);	// Output: ["apple", "avocado", "banana", "cherry", "grapefruit", "melon"]

Zusätzlich kann auch hier ein Callback angegeben werden, wo man eine eigene Compare-Function angibt, nach der die Elemente sortiert werden sollen.

So lassen sich beispielsweise die Elemente ganz einfach in absteigender (Descending), statt in aufsteigender (Ascending) sortieren. Der Rückgabewert des Callbacks muss stets 1 oder -1 sein.

let fruits = [
    'banana',
    'apple',
    'avocado',
    'cherry',
    'grapefruit',
    'melon'
];

let sortedFruitsDESC = fruits.sort(sortDESC);

function sortDESC(a, b) {
	return a < b ? 1 : -1;
}

console.log(sortedFruitsDESC);	// Output: ["melon", "grapefruit", "cherry", "banana", "avocado", "apple"]

Das gleiche funktioniert natürlich auch für andere Datentypen, wie Zahlen oder auch Objekte. Das kann dann so aussehen.

let fruits = [
    {name: 'banana', amount: '2'},
    {name: 'apple', amount: '22'},
    {name: 'avocado', amount: '404'},
    {name: 'cherry', amount: '83'},
    {name: 'grapefruit', amount: '26'},
    {name: 'melon', amount: '42'}
];

let sortedFruitsByAmount = fruits.sort(sortDESC);

function sortDESC(a, b) {
	return a.amount > b.amount ? 1 : -1;
}

console.log(sortedFruitsByAmount);
// Output:
// 0: {name: "banana", amount: "2"}
// 1: {name: "apple", amount: "22"}
// 2: {name: "grapefruit", amount: "26"}
// 3: {name: "avocado", amount: "404"}
// 4: {name: "melon", amount: "42"}
// 5: {name: "cherry", amount: "83"}

Dokumentation

Anzeige

7. Array.reverse() – Alles umkehren

Diese Funktion ist ganz schnell erklärt: Die Reihenfolge der Elemente wird einfach umgekehrt.

let fruits = [
    'banana',
    'apple',
    'avocado',
    'cherry',
    'grapefruit',
    'melon'
];

let reversedFruits = fruits.reverse();
console.log(reversedFruits);	// Output: ["melon", "grapefruit", "cherry", "avocado", "apple", "banana"]

Dazu gibt es keine weiteren Parameter, trotzdem wirst Du diese Funktion früher oder später benötigen. Dadurch sparst Du Dir immerhin die folgenden Zeilen.

function reverse(array) {
	let reverse = [];
	for(let i = array.length - 1; i >= 0; i--) {
		reverse.push(array[i]);
	}
	return reverse;
}

Dokumentation

8. Array.concat() – Arrays zusammenhängen

Mit dieser Methode kannst Du zwei oder mehr Arrays hintereinander zusammenhängen. Das kann nützlich sein, wenn Du z.B. Filterfunktionen auswertest und alle Werte dann gebündelt in einem Array an den Besucher ausgibst.

let fruitsOne = [
    'banana',
    'apple',
    'avocado'
];
let fruitsTwo = [
    'cherry',
    'grapefruit',
    'melon'
];

let concatedFruits = fruitsOne.concat(fruitsTwo);

console.log(concatedFruits);	// Output: ["banana", "apple", "avocado", "cherry", "grapefruit", "melon"]

Dokumentation

Fazit

Nun, wie Du siehst gibt es sehr nützliche JavaScript Array Funktionen. Viele sind mit wenigen Zeilen Code umsetzbar und liefern super tolle Ergebnisse.

Weiter geht’s mit den besten Beispielen, um Vue.js zu lernen, oder? 😉

Ähnliche Beiträge
NEW 🚀
Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.