5 nützliche JavaScript Array Funktionen

5 nützliche JavaScript Array Funktionen

JavaScript bietet schon immer viele tolle Array Funktionen. Gerade mit der Einführung von ES6 und den Arrow Functions sind noch weitere nützliche Funktionen dazu gekommen. Deshalb hier 5 nützliche JavaScript Array Funktionen!

Warum nur fünf Funktionen!? Ganz einfach: diese Funktionen habe ich in letzter Zeit häufig benutzt und finde ich persönlich am nützlichsten. (Abgesehen von Standardfunktionen wie z.B. push()).

Array.map()

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.

Verwendung

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

var 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:

var 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"]

Doku

Array.filter()

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.

Verwendung

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 implemtentieren.

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

var 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:

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

var filtered = fruits.filter(getO);

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

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

Doku

Array.forEach()

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.

Verwendung

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

var 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 im Funktionskopf an.

var 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"

Doku

Array.indexOf()

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. Existiert es nicht, gibt die Funktion -1 zurück.

Verwendung

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.

var 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!');
}

Doku

Array.find()

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.

Verwendung

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

var 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.

Doku

Wenn Du noch mehr interessante Beiträge zu JavaScript lesen möchtest, kannst Du hier herausfinden, wie Du die JavaScript Console richtig benutzt. Oder schau Dich auf der Übersichtsseite um: hier.

NEW 🚀

Schreib einen Kommentar

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