Javascript array.find ()

Array Element suchen und finden

array.find () gibt den Wert des ersten Elements zurück, das einen Test besteht und undefined, wenn keines der Elemente dem Test entspricht.

Mit ES6 sind eine Reihe von neuen Array-Methoden in den immergrünen Browsern gelandet. Neben array.find und array.findIndex ist array.entries () eingezogen und liefert ein Iterator-Objekt.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

ES5: find array.find()

Seit ES5 können wir 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 das erste Element zurück, das den Anforderungen eines Tests entspricht.

Findet das erste Element, das durch 3 teilbar ist

let numbers = [1, 5, 18, 7, 4];
console.log(numbers.find(e => e % 3 == 0));

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

const haustiere = [ 
	{ "name" : "Marsalla",   "spezies" : "Katze", "age": 8},
	{ "name" : "Theokrates", "spezies" : "Foxterrier", "age": 4 },
	{ "name" : "Wallis",     "spezies" : "Friesländer", "age": 18 }
];

console.log(haustiere.find(elem => elem.age > 8));

Helferfunktion: array.copyWithin ()

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

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

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

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

Mit drei Parametern:

array.fill ()

array.fill füllt das Array mit Werten und überschreibt dabei vorhandene Elemente – ist also destruktiv.

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