JS/TS Array – Teil 2

In diesem Artikel beschäftigen wir uns diesmal um die am häufig genutzten (meiner Meinung nach) Funktionen, die ein Array in JavaScript/TypeScript anbietet.

.filter()

Eine häufige Operation in einem Array ist es darin gesammelte Elemente zu filtern. Die Methode .filter() erzeugt ein neues Array mit allen Elementen, die dem Suchkriterium entsprechen. Sofern kein Element dem Kriterium entspricht, erhält man ein leeres Array. Anbei ein paar einfache Beispiele:

const arr = ['1', 2, undefined, -3, 'foo', null]
const filtered = arr.filter(element => element && element > 0)
// filtered: ['1', 2]

Da in dem Array arr null und undefined enthalten sind, muss man zuvor prüfen, ob der Wert überhaupt initialisiert wurde.

Das Gleiche funktioniert auch, sofern in einem Array Objekte gespeichert sind:

const arr = [
        { a: 'foo', b: 'bar' },
        { a: 'foobar', b: 'baz' },
    ]
const filtered = arr.filter((element) => element.a === 'foobar')
// filtered: [{ a: 'foobar', b: 'baz' }]

.find()

Eine weitere nützliche Funktion von Arrays ist die Methode .find().

Die Methode .find() gibt das erste gefundene Element zurück, welches das Suchkriterium entspricht. Sofern kein Element dem Kriterium zusagt, erhält man den Wert undefined. Das ist auch der feine aber wichtige Unterschied zwischen der zuvor vorgestellten Methode .filter(). Auch dazu ein paar Beispiele:

const arr = ['1', 2, undefined, -3, 'foo', null, 2]
const found = arr.find(element => element === 2)
// found: 2

Man erkennt, dass in dem Array zwei mal der Wert 2 hinterlegt ist. Es wird das Element von den beiden zurückgegeben.

Und nun ein Beispiel, in dem die Elemente dem Suchkriterium nicht entsprechen:

const arr = ['1', 2, undefined, -3, 'foo', null, 2]
const notFound = arr.find(element => element === 5)
// notFound: undefined

.shift()

Die Methode .shift() entfernt das erste Element aus dem Array und gibt diesen Wert zurück. Somit modifiziert es das ursprüngliche Array. Sofern das Array zuvor leer war, erhält man den Wert undefined.

Ebenfalls auch ein Beispiel:

const arr = ['1', 2, undefined, -3, 'foo', null, 2]
const first = arr.shift(arr)
// arr: [2, undefined, -3, 'foo', null, 2]
// first: '1'

.pop()

Das Gegenteil von .shift() ist die Methode .pop(). Sie gibt das letzte Element zurück und entfernt aus dem ursprünglichen Array. Ebenfalls wie bei der Methode zuvor wird der Wert undefined zurückgegeben, falls kein Element im Array vorhanden ist.

const arr = ['1', 2, undefined, -3, 'foo', null, 2]
const last = arr.pop(arr)
// arr: ['1', 2, undefined, -3, 'foo', null]
// last: 2

.push()

Um ein Array nach der Initialisierung zu erweitern bietet sich die Methode .push() an. Man hat die Möglichkeit mehrere Elemente der Funktion .push() zu übergeben. Interessant ist, dass das Array mit dem Schlüsselwort const initialisiert wurde, im Nachhinein aber verändert wird. Ich widme mich diesem Thema in einem eigenen Beitrag.

const arr = ['1', 2, undefined, -3, 'foo', null, 2]
arr.push('bar', 'baz')
// arr: ['1', 2, undefined, -3, 'foo', null, 'bar', 'baz']

.join()

Kommen wir nun schlussendlich zu der letzten Array-Funktion, welche ich täglich als Software-Entwickler nutze. Die Funktion .join() wandelt alle Elemente eines Arrays zu einem String um und verbindet diese mit dem Trennzeichen.

const arr = ['1', 2, undefined, -3, 'foo', null, 2]
const joined = arr.join(' + ')
// joined: '1 + 2 + + -3 + foo + + 2'