JavaScript tömb szűrés, egyéb hasznos függvények

Modern iteráció, tömb bejárás

A for (let i = 0; i < tomb.length; i++) helyett használható modern, olvashatóbb iterációs metódusok

Metódus	Leírás	Példa
`forEach()`	Végrehajt egy függvényt a tömb minden elemén. Nincs visszatérési értéke.	`tomb.forEach(elem => console.log(elem));`
`for...of`	A legegyszerűbb módszer az elemek bejárására.	`for (const elem of tomb) { ... }`
`for...in`	FIGYELEM! A tömb indexeit adja vissza. Objektumokhoz ajánlott.	`for (const index in tomb) { ... }`

Nem-módosító (Non-Mutating) Funkcionális Metódusok

Ezek a metódusok új tömböt adnak vissza, az eredeti tömböt érintetlenül hagyva. Ez a funkcionális programozás elvének felel meg, ami tisztább és hibamentesebb kódot eredményez.

map() – transzformáció

A map() metódus minden elemre végrehajt egy művletet. Az eredményből új tömböt hoz létre

const tomb = [1, 2, 3, 4, 5];
const duplazott = tomb.map(x => x * 2);

1 2	const tomb = [1, 2, 3, 4, 5]; const duplazott = tomb.map(x => x * 2);

filter() – szűrés

A filter() metódus segítségével egy új tömböt hozhatunk létre azokkal az elemekkel, amelyek megfelelnek a megadott feltételnek. Ez egy tisztán funkcionális módszer.

const eredetiTomb = [1, 2, 3, 4, 5];
const szurtTomb = eredetiTomb.filter(elem => elem > 3);
console.log(szurtTomb); // [4, 5]

const eredetiTomb = [1, 2, 3, 4, 5];

const szurtTomb = eredetiTomb.filter(elem => elem > 3);

console.log(szurtTomb); // [4, 5]

reduce() – akkumulálás

Végrehajt egy redukáló függvényt a tömb minden elemén, és egyetlen összegzett értéket (pl. összeg, átlag) ad vissza.

const osszeg = tomb.reduce((acc, x) => acc + x, 0);

1	const osszeg = tomb.reduce((acc, x) => acc + x, 0);

Keresés és tesztelés

find()

A find() metódus az első olyan elemet adja vissza, amely megfelel a feltételnek. Ha nincs ilyen, akkor undefined az eredmény.

const eredetiTomb = [1, 2, 3, 4, 5];
const elsoElem = eredetiTomb.find(elem => elem > 3);
console.log(elsoElem); // 4

const eredetiTomb = [1, 2, 3, 4, 5];

const elsoElem = eredetiTomb.find(elem => elem > 3);

console.log(elsoElem); // 4

findIndex()

A findIndex() metódus visszaadja annak az első elemnek az indexét, amely megfelel a feltételnek. Ha nincs találat, -1-et ad vissza.

const eredetiTomb = [1, 2, 3, 4, 5];
const index = eredetiTomb.findIndex(elem => elem > 3);
console.log(index); // 3 (mivel a 4-es elem indexe 3)

const eredetiTomb = [1, 2, 3, 4, 5];

const index = eredetiTomb.findIndex(elem => elem > 3);

console.log(index); // 3 (mivel a 4-es elem indexe 3)

includes()

Ellenőrzi, hogy a tömb tartalmazza-e a megadott értéket. true/false a visszatérési érték.

some() és every()

A some() metódus igaz értéket ad vissza, ha a tömb legalább egy eleme megfelel a feltételnek.
Az every() metódus akkor ad vissza igaz értéket, ha a tömb összes eleme megfelel a feltételnek.

const eredetiTomb = [1, 2, 3, 4, 5];
const vanNagyobbHaromnal = eredetiTomb.some(elem => elem > 3);
console.log(vanNagyobbHaromnal); // true

const mindNagyobbHaromnal = eredetiTomb.every(elem => elem > 3);
console.log(mindNagyobbHaromnal); // false

const eredetiTomb = [1, 2, 3, 4, 5];

const vanNagyobbHaromnal = eredetiTomb.some(elem => elem > 3);

console.log(vanNagyobbHaromnal); // true

const mindNagyobbHaromnal = eredetiTomb.every(elem => elem > 3);

console.log(mindNagyobbHaromnal); // false

includes() + filter()

az includes() önmagában nem szűr, de gyakran használjuk más metódusokkal, például a filter()-rel együtt. Segítségével meghatározzuk, a tömb tartalmaz-e bizonyos értékeket vagy nem.

const eredetiTomb = ['alma', 'banán', 'cseresznye', 'dinnye'];
const keresettElemek = ['banán', 'dinnye'];

const szurtTomb = eredetiTomb.filter(elem => keresettElemek.includes(elem));
console.log(szurtTomb); // ['banán', 'dinnye']

const eredetiTomb = ['alma', 'banán', 'cseresznye', 'dinnye'];

const keresettElemek = ['banán', 'dinnye'];

const szurtTomb = eredetiTomb.filter(elem => keresettElemek.includes(elem));

console.log(szurtTomb); // ['banán', 'dinnye']

map() + filter()

a map() elsősorban az elemek átalakítására szolgál, de kombinálva a filter()-rel komplex szűrési feltételek létrehozására is használható. pl: számoljuk ki az eredetiTomb értékeinek kétszeresét, majd gyűjtsük ki az ötnél nagyobb számokat!

const eredetiTomb = [1, 2, 3, 4, 5];

const szurtTomb = eredetiTomb
  .map(elem => elem * 2)
  .filter(elem => elem > 5);

console.log(szurtTomb); // [6, 8, 10]

const eredetiTomb = [1, 2, 3, 4, 5];

const szurtTomb = eredetiTomb

.map(elem => elem * 2)

.filter(elem => elem > 5);

console.log(szurtTomb); // [6, 8, 10]

példa map() és filter() használatára

const szamTomb = [5, 17, 82, 100, 13, 1, 0];

// 1. map() - Minden elemen végrehajt egy transzformációt
// Hozz létre egy új tömböt, ahol minden számhoz hozzáadunk 1-et.
const noveltTomb = szamTomb.map(szam => szam + 1);
console.log(noveltTomb); // [6, 18, 83, 101, 14, 2, 1]

// 2. filter() - Szűrünk a feltétel alapján
// Hozz létre egy új tömböt, ami csak a 20-nál nagyobb számokat tartalmazza.
const nagySzamok = szamTomb.filter(szam => szam > 20);
console.log(nagySzamok); // [82, 100]

// Eredeti tömb változatlan maradt:
console.log(szamTomb); // [5, 17, 82, 100, 13, 1, 0]

const szamTomb = [5, 17, 82, 100, 13, 1, 0];

// 1. map() - Minden elemen végrehajt egy transzformációt

// Hozz létre egy új tömböt, ahol minden számhoz hozzáadunk 1-et.

const noveltTomb = szamTomb.map(szam => szam + 1);

console.log(noveltTomb); // [6, 18, 83, 101, 14, 2, 1]

// 2. filter() - Szűrünk a feltétel alapján

// Hozz létre egy új tömböt, ami csak a 20-nál nagyobb számokat tartalmazza.

const nagySzamok = szamTomb.filter(szam => szam > 20);

console.log(nagySzamok); // [82, 100]

// Eredeti tömb változatlan maradt:

console.log(szamTomb); // [5, 17, 82, 100, 13, 1, 0]

Módosító metódusok

Ezekről már volt szó: push, pop, shift, unshift. Rajtuk kívül még ide tartozik:

slice(), splice()

slice() egy tömb egy részét kivágjuk bizonyos indexek alapján. Az eredeti tömböt nem módosítja.
splice() A legerősebb módosító metódus: hozzáad, töröl vagy kicserél elemeket a tömb bármely pontján.

const eredetiTomb = [1, 2, 3, 4, 5];
const szurtTomb = eredetiTomb.slice(1, 4); // 1. indextől a 4. indexig
console.log(szurtTomb); // [2, 3, 4]

const eredetiTomb = [1, 2, 3, 4, 5];
eredetiTomb.splice(2, 2); // 2. indexnél kezdve 2 elemet töröl
console.log(eredetiTomb); // [1, 2, 5]

const eredetiTomb = [1, 2, 3, 4, 5];

const szurtTomb = eredetiTomb.slice(1, 4); // 1. indextől a 4. indexig

console.log(szurtTomb); // [2, 3, 4]

const eredetiTomb = [1, 2, 3, 4, 5];

eredetiTomb.splice(2, 2); // 2. indexnél kezdve 2 elemet töröl

console.log(eredetiTomb); // [1, 2, 5]

flatMap()

A flatMap() metódus kombinálja a map() és a flat() műveleteket, és használható összetett szűrési és átalakítási feladatokra. Először végrehajt egy leképező (map) függvényt a tömb minden elemén. Ezután lapítja (flat) az eredményt, de csak egy szint mélységig.

const eredetiTomb = [1, 2, 3, 4, 5];
const szurtTomb = eredetiTomb.flatMap(elem => elem > 3 ? [elem] : []);
console.log(szurtTomb); // [4, 5]

const eredetiTomb = [1, 2, 3, 4, 5];

const szurtTomb = eredetiTomb.flatMap(elem => elem > 3 ? [elem] : []);

console.log(szurtTomb); // [4, 5]

Tegyük fel, hogy van egy szövegünk, és szeretnénk egyetlen ‘lapos’ tömböt kapni az összes szóból:

const mondatok = [
  "A JavaScript egy programozási nyelv.",
  "A map metódus transzformál."
];

// Map() használatával (tömbök tömbje jön létre):
const szavakNested = mondatok.map(mondat => mondat.split(" "));
console.log(szavakNested); 
// Eredmény: [["A", "JavaScript", "egy", "programozási", "nyelv."], ["A", "map", "metódus", "transzformál."]]

// flatMap() használatával (egyetlen lapos tömb):
const szavakFlat = mondatok.flatMap(mondat => mondat.split(" "));
console.log(szavakFlat); 
// Eredmény: ["A", "JavaScript", "egy", "programozási", "nyelv.", "A", "map", "metódus", "transzformál."]

const mondatok = [

"A JavaScript egy programozási nyelv.",

"A map metódus transzformál."

];

// Map() használatával (tömbök tömbje jön létre):

const szavakNested = mondatok.map(mondat => mondat.split(" "));

console.log(szavakNested);

// Eredmény: [["A", "JavaScript", "egy", "programozási", "nyelv."], ["A", "map", "metódus", "transzformál."]]

// flatMap() használatával (egyetlen lapos tömb):

const szavakFlat = mondatok.flatMap(mondat => mondat.split(" "));

console.log(szavakFlat);

// Eredmény: ["A", "JavaScript", "egy", "programozási", "nyelv.", "A", "map", "metódus", "transzformál."]

forEach(), for() és manuális szűrés

A forEach() és for() metódussal manuálisan is létrehozhatunk egy új tömböt, ahol minden elemet egy feltétel alapján vizsgálunk meg, és csak a megfelelő elemeket adjuk hozzá.
A for() hosszadalmasabb, szükséges a számláló (i) manuális kezelése és a tömb hosszának ellenőrzése. Teljes vezérlést biztosít. Lehetővé teszi a ciklus megszakítását (break) vagy egy iteráció kihagyását (continue) feltétel alapján. Gyors.

A forEach() egy beépített tömbmetódus, amely egy callback függvényt hajt végre a tömb minden elemén. Nem szakítható meg (nincs break vagy continue). A teljes tömbön végigfut.

const eredetiTomb = [1, 2, 3, 4, 5];
let szurtTomb = [];
eredetiTomb.forEach(elem => {
  if (elem > 3) szurtTomb.push(elem);
});
console.log(szurtTomb); // [4, 5]

const eredetiTomb = [1, 2, 3, 4, 5];

let szurtTomb = [];

eredetiTomb.forEach(elem => {

if (elem > 3) szurtTomb.push(elem);

});

console.log(szurtTomb); // [4, 5]

const eredetiTomb = [1, 2, 3, 4, 5];
let szurtTomb = [];
for (let i = 0; i < eredetiTomb.length; i++) {
  if (eredetiTomb[i] > 3) {
    szurtTomb.push(eredetiTomb[i]);
  }
}
console.log(szurtTomb); // [4, 5]

const eredetiTomb = [1, 2, 3, 4, 5];

let szurtTomb = [];

for (let i = 0; i < eredetiTomb.length; i++) {

if (eredetiTomb[i] > 3) {

szurtTomb.push(eredetiTomb[i]);

}

console.log(szurtTomb); // [4, 5]

JavaScript tömb szűrés, egyéb hasznos függvények

Modern iteráció, tömb bejárás

Nem-módosító (Non-Mutating) Funkcionális Metódusok

Keresés és tesztelés

Módosító metódusok

Friss bejegyzések

WS2022 – WDS

Playwright teszt