Iterowanie po tablicach w JavaScript
1. Wprowadzenie
Iterowanie po tablicach to proces przeglądania wszystkich elementów tablicy w celu wykonania na nich określonych operacji.
JavaScript oferuje wiele sposobów iteracji – od klasycznych pętli po nowoczesne metody funkcyjne (higher-order functions), które są bardziej czytelne i ekspresywne.
W tej lekcji skupimy się na metodach tablicowych, które są kluczowe w nowoczesnym JavaScript i często stosowane w frameworkach takich jak React, Vue czy Angular.
2. Metody iteracji po tablicach
Klasyczne pętle:
forfor...of
Metody funkcyjne (higher-order functions):
forEach()map()filter()find()/findIndex()some()/every()reduce()/reduceRight()
3. Klasyczne pętle – przypomnienie
Pętla for:
Pętla for...of:
Zalety pętli for...of:
* Prostsza składnia
* Nie wymaga indeksowania
* Czytelniejsza niż for
4. Metoda forEach() – wykonanie funkcji dla każdego elementu
forEach() to najczęściej używana metoda do iteracji po tablicy.
Wykonuje funkcję dla każdego elementu tablicy.
Składnia:
Parametry funkcji:
| Parametr | Opis | Obowiązkowy |
|---|---|---|
element |
Bieżący element tablicy | ✅ Tak |
index |
Indeks bieżącego elementu | ❌ Nie |
array |
Tablica, na której iterujemy | ❌ Nie |
Przykład podstawowy:
Przykład z indeksem:
Uwaga: forEach() nie zwraca wartości i nie można przerwać pętli instrukcją break.
5. Metoda map() – transformacja elementów
map() tworzy nową tablicę z wynikami funkcji zastosowanej do każdego elementu.
Składnia:
Przykład – podwojenie liczb:
Przykład – ekstrakcja właściwości:
Kiedy używać map():
* Gdy chcesz przekształcić każdy element tablicy
* Gdy potrzebujesz nowej tablicy z wynikami
* Gdy liczba elementów ma pozostać taka sama
6. Metoda filter() – filtrowanie elementów
filter() zwraca nową tablicę zawierającą tylko elementy, które spełniają warunek.
Składnia:
Przykład – liczby parzyste:
Przykład – filtrowanie obiektów:
Kiedy używać filter():
* Gdy chcesz wybrać elementy spełniające warunek
* Gdy potrzebujesz podzbioru tablicy
* Gdy chcesz usunąć niechciane elementy
7. Metoda find() i findIndex()
find() – zwraca pierwszy element spełniający warunek
Jeśli żaden element nie spełnia warunku, zwraca undefined.
findIndex() – zwraca indeks pierwszego elementu
Jeśli żaden element nie spełnia warunku, zwraca -1.
Przykład z obiektami:
8. Metoda some() i every()
some() – sprawdza, czy przynajmniej jeden element spełnia warunek
Zwraca true, jeśli co najmniej jeden element spełnia warunek.
every() – sprawdza, czy wszystkie elementy spełniają warunek
Zwraca true, jeśli wszystkie elementy spełniają warunek.
Porównanie:
| Metoda | Zwraca true, gdy... |
|---|---|
some() |
Przynajmniej jeden element spełnia |
every() |
Wszystkie elementy spełniają |
9. Metoda reduce() – redukcja tablicy do pojedynczej wartości
reduce() to najbardziej uniwersalna metoda tablicowa.
Redukuje tablicę do jednej wartości poprzez zastosowanie funkcji do każdego elementu.
Składnia:
Parametry:
| Parametr | Opis |
|---|---|
accumulator |
Akumulowana wartość (wynik pośredni) |
currentValue |
Bieżący element tablicy |
initialValue |
Wartość początkowa akumulatora (opcjonalna) |
Przykład – suma elementów:
Jak to działa:
| Iteracja | acc |
num |
Wynik |
|---|---|---|---|
| 1 | 0 | 1 | 1 |
| 2 | 1 | 2 | 3 |
| 3 | 3 | 3 | 6 |
| 4 | 6 | 4 | 10 |
| 5 | 10 | 5 | 15 |
Przykład – znajdowanie maksymalnej wartości:
Przykład – liczenie wystąpień:
Przykład – spłaszczanie tablicy:
Kiedy używać reduce():
* Sumowanie, mnożenie wartości
* Znajdowanie minimum/maksimum
* Przekształcanie tablicy w obiekt
* Spłaszczanie zagnieżdżonych struktur
10. Metoda reduceRight() – redukcja od końca
Działa jak reduce(), ale od końca tablicy.
11. Łączenie metod (method chaining)
Metody tablicowe można łączyć w łańcuchy, co pozwala na eleganckie i czytelne transformacje.
Przykład – filtrowanie i mapowanie:
Przykład – kompleksowa transformacja:
12. Porównanie metod iteracji
| Metoda | Zwraca | Zastosowanie | Modyfikuje oryginał |
|---|---|---|---|
forEach() |
undefined |
Wykonanie akcji dla każdego elementu | ❌ Nie |
map() |
Nowa tablica | Transformacja elementów | ❌ Nie |
filter() |
Nowa tablica | Filtrowanie elementów | ❌ Nie |
find() |
Element lub undefined |
Znalezienie pierwszego elementu | ❌ Nie |
findIndex() |
Indeks lub -1 |
Znalezienie indeksu elementu | ❌ Nie |
some() |
true / false |
Sprawdzenie warunku (przynajmniej jeden) | ❌ Nie |
every() |
true / false |
Sprawdzenie warunku (wszystkie) | ❌ Nie |
reduce() |
Pojedyncza wartość | Redukcja do jednej wartości | ❌ Nie |
13. Kiedy używać której metody?
| Cel | Metoda |
|---|---|
| Wykonać operację na każdym elemencie | forEach() |
| Przekształcić elementy | map() |
| Wybrać elementy spełniające warunek | filter() |
| Znaleźć pierwszy element | find() |
| Sprawdzić, czy jakiś element spełnia | some() |
| Sprawdzić, czy wszystkie spełniają | every() |
| Obliczyć sumę, max, min | reduce() |
| Łączyć operacje | Łańcuchowanie metod |
14. Dobre praktyki
- Preferuj metody funkcyjne zamiast pętli
for– kod jest bardziej czytelny - Używaj
map()do transformacji, nieforEach() - Łącz metody dla złożonych operacji
- Unikaj mutacji – metody funkcyjne tworzą nowe tablice, nie modyfikują oryginalnych
- Nadawaj czytelne nazwy parametrom funkcji (np.
userzamiastu) - Pamiętaj o wydajności – łańcuchowanie metod tworzy wiele pośrednich tablic
15. Przykłady praktyczne
Obliczenie średniej:
Grupowanie według kategorii:
Usunięcie duplikatów:
16. Podsumowanie
- JavaScript oferuje bogate API do iteracji po tablicach
- Metody funkcyjne (
map,filter,reduce) są czytelniejsze i bardziej ekspresywne niż tradycyjne pętle - Łańcuchowanie metod pozwala na eleganckie transformacje danych
- Żadna z tych metod nie modyfikuje oryginalnej tablicy – tworzą nowe
- Znajomość tych metod jest kluczowa w nowoczesnym JavaScript i frameworkach (React, Vue, Angular)
Podsumowanie praktyczne:
Opanuj metody map(), filter(), reduce() – to fundament funkcyjnego programowania w JavaScript. Używaj ich zamiast pętli dla czystszego i bardziej deklaratywnego kodu.