JavaScript Academy · Lekcja

Deklaratywna transformacja danych

Proszę przekształcać dane za pomocą map, filter i reduce.

Deklaratywna transformacja danych to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 2 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 JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Deklaratywność a imperatywność

Kod imperatywny mówi JAK (pętle, liczniki, modyfikowanie danych). Kod deklaratywny mówi CO. Metody tablic, takie jak map, filter i reduce, pozwalają opisywać transformacje bez ręcznego tworzenia pętli.

const nums = [1, 2, 3, 4];
const doubled = nums.map((n) => n * 2);
console.log(doubled); // [2, 4, 6, 8]

map: przekształcanie każdego elementu

map zwraca nową tablicę o tej samej długości, w której każdy element został przekształcony przez podaną funkcję. Oryginalna tablica pozostaje niezmieniona.

const names = ["ada", "bob"];
const upper = names.map((n) => n.toUpperCase());
console.log(upper); // ["ADA", "BOB"]
console.log(names); // unchanged

filter: wybieranie niektórych elementów

filter zwraca nową tablicę zawierającą tylko te elementy, dla których predykat zwraca wartość truthy.

const nums = [1, 2, 3, 4, 5, 6];
const evens = nums.filter((n) => n % 2 === 0);
console.log(evens); // [2, 4, 6]

reduce: składanie do jednej wartości

reduce redukuje tablicę do jednej wartości, akumulując kolejne elementy. Należy przekazać funkcję redukującą i wartość początkową.

const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, n) => acc + n, 0);
console.log(sum); // 10

Łączenie operacji

Ponieważ każda z tych metod zwraca nową tablicę, można łączyć je w czytelny potok, który odczytuje się od góry do dołu.

const nums = [1, 2, 3, 4, 5, 6];
const result = nums
  .filter((n) => n % 2 === 0)
  .map((n) => n * 10);
console.log(result); // [20, 40, 60]

Praktyczny potok transformacji

Połącz filter, map i reduce, aby w jednym wyrażeniu znaleźć odpowiedź na pytanie dotyczące zbioru danych.

const orders = [
  { item: "pen", price: 3, paid: true },
  { item: "ink", price: 8, paid: false },
  { item: "pad", price: 5, paid: true }
];
const paidTotal = orders
  .filter((o) => o.paid)
  .map((o) => o.price)
  .reduce((a, p) => a + p, 0);
console.log(paidTotal); // 8

Przekształcanie do nowych struktur

map może zmieniać strukturę obiektów, a nie tylko liczb. Należy przekształcić każdy rekord tak, aby zawierał interesujące Państwa pola.

const users = [{ id: 1, name: "Ada", age: 36 }];
const summary = users.map((u) => ({ id: u.id, label: u.name }));
console.log(summary); // [{ id: 1, label: "Ada" }]

reduce może zbudować wszystko

reduce służy nie tylko do sumowania. Może budować obiekty, grupować dane, a nawet odtwarzać działanie map i filter.

const words = ["a", "bb", "a", "ccc"];
const counts = words.reduce((acc, w) => {
  acc[w] = (acc[w] || 0) + 1;
  return acc;
}, {});
console.log(counts); // { a: 2, bb: 1, ccc: 1 }

Kolejność ma znaczenie

Filtrowanie przed mapowaniem pozwala uniknąć przekształcania elementów, które zostaną później odrzucone. Dla zachowania czytelności i wydajności warto umieszczać niedrogie filtry na początku łańcucha.

const data = [1, 2, 3, 4, 5];
const out = data
  .filter((n) => n > 2)   // shrink first
  .map((n) => n * n);     // then transform
console.log(out); // [9, 16, 25]

Brak modyfikacji w całym potoku

Metody te nigdy nie zmieniają tablicy źródłowej. Dzięki temu potoki są bezpieczne i przewidywalne oraz doskonale pasują do stylu funkcyjnego.

const src = [3, 1, 2];
const sorted = [...src].sort((a, b) => a - b);
console.log(sorted); // [1, 2, 3]
console.log(src);    // [3, 1, 2] untouched

flatMap dla zagnieżdżonych wyników

Gdy funkcja użyta w map zwraca tablice, flatMap mapuje i spłaszcza jeden poziom w jednym kroku.

const pairs = [1, 2, 3].flatMap((n) => [n, n * 10]);
console.log(pairs); // [1, 10, 2, 20, 3, 30]

Szybkie sprawdzenie

Deklaratywne transformacje.

Podsumowanie

Deklaratywna transformacja opisuje CO, a nie JAK. map przekształca, filter wybiera, a reduce składa elementy do jednej wartości; można łączyć je w czytelne potoki. Żadna z tych metod nie modyfikuje źródła, wczesne filtrowanie zwiększa wydajność, a reduce może budować dowolną strukturę. Należy użyć flatMap, gdy map zwraca tablice.

Często zadawane pytania

Czy lekcja „Deklaratywna transformacja danych” jest bezpłatna?

Tak — pełny tekst „Deklaratywna transformacja danych” 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 4 lekcji w sumie.

Co nauczysz się w „Deklaratywna transformacja danych”?

Proszę przekształcać dane za pomocą map, filter i reduce. Ć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 2 z 4.

Ile czasu zajmuje lekcja „Deklaratywna transformacja danych”?

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

← Powrót do JavaScript Academy