JavaScript Arrays – JS Array Funktionen erklärt (Cheatsheet)

JavaScript Arrays sind listenähnlichen Strukturen, können Daten speichern und bei nahezu jedem Programm notwendig. Die wichtigsten JavaScript Array Funktionen erkläre ich dir hier.

Neben den ganzen Array Standardfunktionen, wie z.B. push() und pop() existieren auch viele nützliche Funktionen, die dir viel Zeit ersparen können. Gerade mit der Einführung von ES6 und den Arrow Functions sind noch weitere nützliche Funktionen dazu gekommen.

Grundlagen: Was sind 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.

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

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

1. Array.map() – Funktionen auf Elemente mappen

Bei dieser Funktion wird eine gewünschte Operation auf jedem Element im Array ausgeführt – das nennt man auch mapping. 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 im Array filtern

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.

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 auslagern, wie das folgende Beispiel zeigt.

Verdiene Geld mit deiner Website oder Blog

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() – Schleife über alle Array Elemente

Diese JavaScript Array 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

4. Array.indexOf() – Index eines Elements finden

Die Funktion liefert uns den Index – also die Position – 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.

Dokumentation

6. Array.sort() – Werte sortieren

Diese Funktion kann unser JavaScript 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

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 ganze 7 Zeilen Code.

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

Zusammenfassung

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
Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

bold italic underline strikeThrough
insertOrderedList insertUnorderedList outdent indent
removeFormat
createLink unlink
code

Das könnte dich auch interessieren