0Pricing
JavaScript Academy · Lekcja

map i filter — podstawy

Przekształcanie i wybieranie danych za pomocą map i filter; łączenie ich w łańcuchy oraz unikanie mutacji dla bezpieczniejszego kodu

map i filter — podstawy to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 1 z 2. 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 JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 2 lekcji w sumie.

Wprowadzenie do map i filter

Cel: Przekształcać elementy za pomocą map i wybierać elementy za pomocą filter.

  • map: przekształcanie
  • filter: wybieranie
  • Łączenie map → filter
  • Brak modyfikowania
map i filter — podstawy — ilustracja 1

Podstawy map

map stosuje funkcję do każdego elementu i zwraca nową tablicę o tej samej długości.

// map transforms each value and returns a new array
const nums = [1, 2, 3];

const doubled = nums.map(function (n) {
  return n * 2;
});

console.log("nums:", nums);
console.log("doubled:", doubled);
map i filter — podstawy — ilustracja 2

Podstawy filter

filter zwraca tylko te elementy, dla których funkcja zwrotna zwraca true (długość wyniku może się zmienić).

// filter keeps values that pass the test
const values = [1, 2, 3, 4, 5];

const evens = values.filter(function (n) {
  return n % 2 === 0;
});

console.log("values:", values);
console.log("evens:", evens);
map i filter — podstawy — ilustracja 3

Przykład łączenia

Proszę łączyć etapy: użyć map do przekształcenia, a następnie filter do wybrania elementów.

// Chain methods for clarity
const prices = [4, 7, 10];

// First add tax, then keep items over 8
const withTax = prices.map(function (p) {
  return p * 1.1;
});

const expensive = withTax.filter(function (p) {
  return p > 8;
});

console.log("withTax:", withTax);
console.log("expensive:", expensive);
map i filter — podstawy — ilustracja 4

Demonstracja bez modyfikowania

Niezmienność: map/filter zwracają nowe tablice, a oryginał pozostaje bez zmian.

// map and filter do not mutate the original array
const base = [2, 4, 6];

const plusOne = base.map(function (n) {
  return n + 1;
});

const small = base.filter(function (n) {
  return n < 5;
});

console.log("base:", base);
console.log("plusOne:", plusOne);
console.log("small:", small);
map i filter — podstawy — ilustracja 5

Wskazówki dotyczące czytelnych tablic

Wskazówki:

  • Proszę nadawać małym funkcjom zwrotnym opisowe nazwy (n, item).
  • Łańcuchy wywołań powinny być krótkie (maksymalnie 2–3 kroki).
  • Należy preferować funkcje zwrotne bez efektów ubocznych.
map i filter — podstawy — ilustracja 6

Quiz: map a filter

Szybkie sprawdzenie: przekształcanie każdego elementu.

map i filter — podstawy — ilustracja 7

Podsumowanie

Podsumowanie: Należy używać map do przekształcania wartości, filter do wybierania niektórych z nich oraz łączyć te metody bez modyfikowania oryginalnej tablicy.

map i filter — podstawy — ilustracja 8

Często zadawane pytania

Czy lekcja „map i filter — podstawy” jest bezpłatna?

Tak — pełny tekst „map i filter — podstawy” 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 JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 2 lekcji w sumie.

Co nauczysz się w „map i filter — podstawy”?

Przekształcanie i wybieranie danych za pomocą map i filter; łączenie ich w łańcuchy oraz unikanie mutacji dla bezpieczniejszego kodu Ćwiczysz JavaScript 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ąć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript 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 2.

Ile czasu zajmuje lekcja „map i filter — podstawy”?

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 JavaScript Academy?

Tak. Każda lekcja JavaScript 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

  1. map i filter — podstawy
  2. reduce, some/every, find — proste wzorce
← Powrót do JavaScript Academy