Javascript array.find () – Array-Element anhand einer Bedingung finden

array.find() – das erste Element finden

array.find() ist eine eingebaute Funktion und gibt den Wert des ersten Elements zurück, das die angegebenen Bedingungen erfüllt, oder undefined, falls kein Element gefunden wurde.

Seit ES5 kann JavaScript mit indexOf und lastIndexOf Elemente in Arrays aufspüren. Diese Methoden geben allerdings nur den Index des ersten passenden Elements zurück. array.find() hingegen gibt Zugriff auf das gefundene Element.

const numbers = [1, 5, 18, 7, 4];

// callback-Funktion, 
// sucht das erste durch 3 teilbare Element
function bar (e, idx, arr) {
	// console.log (idx);
	// console.log (arr);
	return e % 3 == 0;
}

const f = numbers.find(bar);
console.log ("f", f) // f – 18

oder kurz per Arrow-Funktion

const f = numbers.find (e => e % 3 == 0) ;

Findet das erste Element, das durch 3 teilbar ist und gibt es in numbers zurück.

e

Aktuelles Element, das von der Funktion bearbeitet wird

idx – optional

Index des aktuellen Elements

arr - optional

Das Array, in dem gesucht wird

thisArg - optional

weist die Funktion an, dieses Argument als this in der Callback-Funktion zu nutzen.

Mit array.find() in JSON-Array of Objects

Mit array.find () ein Element in einem JSON-Array of Objects finden

const haustiere = [ 
	{ "name" : "Marsalla",   "spezies" : "🐈", "age": 8},
	{ "name" : "Theokrates", "spezies" : "🐕", "age": 4 },
	{ "name" : "Wallis",     "spezies" : "🐎", "age": 18 },
	{ "name" : "Nemo",       "spezies" : "🐑", "age": 12 }
];

const foo = haustiere.find(elem => elem.age > 8);
console.log ("foo", foo)

zeigt den ersten Treffer:

{ "name" : "Wallis", "spezies" : "🐎", "age": 18 }

Helferfunktion: array.copyWithin () – Element kopieren

copyWithin () kopiert Elemente des Arrays auf eine andere Position im Array und überschreibt dabei die vorhandenen Elemente. copyWithin fügt dem Array also keine neuen Elemente hinzu, ist aber destruktiv: Das Array wird geändert.

//               0      1     2     3     4
const fruits = ["🍋", "🌶", "🍎", "🍒", "🍐"];
fruits.copyWithin(2, 0);
                  |  |
             ziel +  +-- start

kopiert die Elemente von Startplatz 0 des Arrays auf die Zielposition ab Platz 2.

//                0      1     2     3     4     5
const animals = ["🐈", "🐋", "🐖", "🐙", "🐟", "🐿"];
animals.copyWithin(2, 0, 2);
                   |  |  |
          ziel  ---+  |  +--- ende
                      +
                    start

Mit drei Parametern:

array.fill () – Array mit vordefinierten Werten füllen

array.fill () füllt das Array mit Werten und überschreibt dabei vorhandene Elemente – ist also destruktiv. Die Methode wird in erster Linie verwendet, um das Array mit vordefinierten Werten zu initialisieren.

Das folgende Beispiel erzeugt ein Array mit 10 Elementen und setzt die Elemente auf allen Indizes direkt auf 0.

const starter = new Array(10).fill(0);

Das erzeugt ein Array mit 10 Elementen und setzt die Elemente auf allen Indizes direkt auf 0.

Im folgenden Beispiel füllt der erste Aufruf von fill das Array auf allen Stellen mit den angegebenen Wert. Der zweite Aufruf von fill setzt einen anderen Wert auf die Plätze von (inklusiv) 2 bis (exklusiv) 4.

const cloth = ["👗", "👚", "👠", "👢"];
cloth.fill("👠");
cloth.fill("👗", 2, 4);