Metody tablic: map, filter, reduce, find
Proszę przekształcać, filtrować i agregować tablice za pomocą metod wyższego rzędu zamiast ręcznych pętli. Proszę łączyć je w wyraziste potoki przetwarzania danych.
Metody tablic: map, filter, reduce, find to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Dlaczego metody tablicowe?
Imperatywne pętle for działają, ale ukrywają intencję kodu. Metody wyższego rzędu tablic deklarują, co chcesz osiągnąć, zamiast opisywać, jak iterować. Tworzą czystszy, łatwiejszy do testowania i komponowania kod, który czyta się niemal jak tekst.
Array.map() — przekształcanie każdego elementu
map() zwraca nową tablicę, w której każdy element został przekształcony przez callback. Oryginalna tablica nie jest modyfikowana. Używaj tej metody, gdy chcesz przekształcić jedną tablicę w inną.
const names = ['alice', 'bob', 'carol'];
const upper = names.map(name => name.toUpperCase());
// ['ALICE', 'BOB', 'CAROL']
const prices = [10, 20, 30];
const withTax = prices.map(p => p * 1.2);
// [12, 24, 36]Array.filter() — wybieranie pasujących elementów
filter() zwraca nową tablicę zawierającą tylko te elementy, dla których callback zwraca wartość truthy. Callback jest funkcją predykatową.
const users = [
{ name: 'Alice', age: 22 },
{ name: 'Bob', age: 17 },
{ name: 'Carol', age: 30 },
];
const adults = users.filter(u => u.age >= 18);
// [{ name: 'Alice', age: 22 }, { name: 'Carol', age: 30 }]Array.reduce() — akumulowanie wartości
reduce(callback, initialValue) akumuluje wszystkie elementy w jednej wartości. Callback otrzymuje akumulator i bieżący element. Wartość początkowa jest wartością początkową akumulatora.
const prices = [10, 20, 30, 40];
const total = prices.reduce((sum, price) => sum + price, 0);
// 100
const tallied = ['a', 'b', 'a', 'c', 'b', 'a'].reduce((acc, letter) => {
acc[letter] = (acc[letter] || 0) + 1;
return acc;
}, {});
// { a: 3, b: 2, c: 1 }Array.find() — pierwsze dopasowanie
find() zwraca pierwszy element pasujący do predykatu albo undefined, jeśli nie znaleziono żadnego. Używaj tej metody, aby wyszukać element na podstawie identyfikatora lub wartości właściwości.
const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const bob = users.find(u => u.id === 2);
// { id: 2, name: 'Bob' }
const missing = users.find(u => u.id === 99);
// undefinedArray.findIndex()
findIndex() działa podobnie jak find(), ale zwraca indeks pasującego elementu albo -1, jeśli go nie znaleziono. Jest przydatna do ustalenia, gdzie zaktualizować element w tablicy.
const idx = users.findIndex(u => u.id === 2);
// 1Array.some() i Array.every()
some() zwraca true, jeśli co najmniej jeden element przejdzie test. every() zwraca true tylko wtedy, gdy wszystkie elementy przejdą test. Obie metody kończą działanie po uzyskaniu pierwszego rozstrzygającego wyniku.
const hasAdult = users.some(u => u.age >= 18); // true if any adult
const allAdults = users.every(u => u.age >= 18); // true only if all adultsArray.flatMap() — mapowanie i spłaszczanie
flatMap() mapuje każdy element, a następnie spłaszcza wynik o jeden poziom. Jest równoważna wywołaniu .map(...).flat(), ale działa wydajniej.
const sentences = ['Hello world', 'Foo bar'];
const words = sentences.flatMap(s => s.split(' '));
// ['Hello', 'world', 'Foo', 'bar']Łączenie metod tablicowych
Metody zwracają nowe tablice, dlatego można je łączyć w łańcuchy. Łańcuchy należy czytać od lewej do prawej: najpierw filtrowanie, następnie przekształcanie, a na końcu agregowanie.
const result = products
.filter(p => p.inStock)
.map(p => ({ ...p, price: p.price * 0.9 })) // 10% discount
.sort((a, b) => a.price - b.price)
.slice(0, 5); // top 5 cheapest in-stock productsArray.at() i Array.includes()
at(-1) pobiera ostatni element. includes(value) sprawdza, czy dana wartość istnieje. Jest to znacznie czytelniejsze niż arr[arr.length - 1] i arr.indexOf(v) !== -1.
const arr = [1, 2, 3, 4, 5];
arr.at(-1); // 5
arr.at(-2); // 4
arr.includes(3); // true
arr.includes(99); // falseNiemutowalność: nie modyfikuj danych
map, filter i reduce zwracają nowe tablice. push, pop i splice modyfikują oryginalną tablicę. W stanie React zawsze twórz nowe tablice (za pomocą spread lub map), zamiast bezpośrednio modyfikować stan.
// Bad in React:
state.items.push(newItem); // mutates original
// Good:
const newItems = [...state.items, newItem]; // new arraySzybkie sprawdzenie
Która metoda tablicowa zwraca nową tablicę elementów, dla których callback zwraca true?
Podsumowanie: metody tablicowe
map() przekształca każdy element. filter() wybiera pasujące elementy. reduce() akumuluje elementy w jedną wartość. find() zwraca pierwsze dopasowanie. some()/every() sprawdzają spełnienie warunku przez elementy. Łańcuchy tych metod zastępują zagnieżdżone pętle czytelnymi, deklaratywnymi potokami przetwarzania danych.
Często zadawane pytania
Czy lekcja „Metody tablic: map, filter, reduce, find” jest bezpłatna?
Tak — pełny tekst „Metody tablic: map, filter, reduce, find” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Metody tablic: map, filter, reduce, find”?
Proszę przekształcać, filtrować i agregować tablice za pomocą metod wyższego rzędu zamiast ręcznych pętli. Proszę łączyć je w wyraziste potoki przetwarzania danych. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Metody tablic: map, filter, reduce, find”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Metody tablic: map, filter, reduce, find
- Destrukturyzacja obiektów i spread
- Literały szablonowe i optional chaining
- Moduły: import i export