
A JavaScript find() függvény megpróbálja nekünk megtalálni egy tömb egyik elemét, valamilyen feltétel alapján.
Nagyon hasonlít a filter() függvényhez azzal a különbséggel, hogy itt nem egy tömböt kapunk eredményként, hanem azt az elemet a tömbből, ami a kereső feltételnek elsőként eleget tesz. Fontos, hogy elsőként! Ugyanis lehet, hogy több elem is megfelelne a feltételnek, a find() azonban a legelső ilyen elemet adja vissza.
Ebből az is következik, hogy ha a find() megtalálja az elemet, akkor nem fog tovább menni a maradék tömb elemeken.
Így működik a find (példával)
Kiindulásként adott egy rendezetlen tömb, ami számokat tartalmaz:
const tomb = [10, 2, 8, 100, 56, 6, 1];
Azt az elemet keresem, ami egyenlő 100-zal.
Létrehozok az eredménynek egy új változót. Ez a változó tárolja majd find() eredményét. Most a let kulcsszót használom, mert még a későbbiekben szeretném felhasználni az eredmeny változót. Ha const-ot használtam volna, akkor ez nem lenne lehetséges, mert a const olyan adatot definiál, ami csak egyszer kap értéket.
let eredmeny =
Ezután meghívom a tömbnek a find függvényét, aminek paraméterként megadtam egy nyílfüggvényt. A nyíl függvény első paramétere mindig az aktuális tömbelem.
let eredmeny = tomb.find(aktualisElem =>
A nyíl másik oldalán van a függvény törzse, ami egy feltétel, amiben meg fogom vizsgálni, hogy az aktuális elem egyenlő-e százzal. Ha igen, akkor visszaadja a find() ezt az elemet és be is fejezi a melót. Ellenkező esetben megy tovább, amíg nem talál elemet, ami a feltételt igazzá nem teszi, vagy pedig addig, ameddig a tömb végére nem ér.
Ha true a feltétel eredménye, akkor a find visszaadja az elemet. Ez be is kerül az eredmeny változóba. Ha false a feltétel eredménye, akkor pedig megy tovább.
Így néz ki a feltétel:
let eredmeny = tomb.find(aktualisElem => aktualisElem === 100);
Konzolba kiíratva az eredményt 100-at fogunk kapni:
console.log(eredmeny);
A find() megáll az első találatnál
Hogy bizonyítsam, hogy a find() megáll, amint megtalálja az első találatot, egy kicsit átalakítom a feltételt és olyan elemet keresek, ami nagyobb 10-nél.
A tömbben két ilyen elem is van. Az egyik a 100, a másik az 56.
Hogyan néz ki az új feltétel?
eredmeny = tomb.find(aktualisElem => aktualisElem > 10);
console.log(eredmeny); // konzolban várt eredmény: 100
A konzolban megint csak 100-at látunk. Tehát tényleg megállt a find() az első találatnál.
A find() használata objektum tömb esetén
A find() nem csak „sima” tömbök esetén használható, hanem akkor is, amikor objektumok tömbjéről van szó.
Adott egy tömb, ami személy objektumokat tartalmaz:
const szemelyek = [
{id: 2, nev: 'Ödön'},
{id: 6, nev: 'Jenő'},
{id: 1, nev: 'Béczy'}
];
Ha szeretném megkeresni az 1-es id-val rendelkező személyt, akkor azt így tudom a find() segítségével:
const keresettSzemely = szemelyek.find(szemely => szemely.id === 1);
console.log(keresettSzemely); // konzolban várt eredmény: {id: 1, nev: 'Béczy'}
További paraméterek
A find()-on belül alkalmazott nyíl függvény paraméterei a következők.
- Az első paraméter kötelezően megadandó. Ez az aktuálisan feldolgozandó tömb elem.
- A második paraméter megadása nem kötelező. Ez az aktuális elem indexét jelenti. Fontos, hogy ez nem a megtalált elem indexét jelenti. Ha a talált elem indexére van szükség, akkor a findIndex() függvény a barátunk.
- A harmadik paraméter, ami szintén opcionális, az maga az eredeti tömb.
Magának a find() függvénynek a második, nem kötelező paramétere, pedig egy referencia (this) arra az objektumra, amit az első paraméterben megadott callback függvényen belül használunk.
Működő példa
Készítettem egy példát online is. Ide kattintva lehet kipróbálni. (Mivel a repl.it egy angol nyelvű weboldal, az ottani példában angolul neveztem el a változókat.)