JavaScript Academy · Lekcja

Tworzenie pipe i compose

Proszę zaimplementować kompozycję od lewej do prawej i od prawej do lewej.

Tworzenie pipe i compose to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 4 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.

Od dwóch funkcji do wielu

Dwuargumentowa funkcja compose ma ograniczone zastosowanie. Rzeczywiste potoki łączą wiele etapów. W tej lekcji zbudują Państwo uniwersalne funkcje compose i pipe, używając reduce oraz reduceRight.

pipe: od lewej do prawej

pipe odzwierciedla kolejność wykonywania: pierwsza funkcja jest uruchamiana jako pierwsza. pipe(a, b, c)(x) jest równe c(b(a(x))). Większość osób uznaje to za bardziej naturalne niż compose.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const inc = n => n + 1;
const double = n => n * 2;

console.log(pipe(inc, double)(5));

Jak reduce napędza pipe

reduce rozpoczyna od wartości wejściowej jako akumulatora i kolejno stosuje każdą funkcję, przekazując każdy wynik do następnej. Wartość początkowa x inicjuje łańcuch.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const steps = pipe(
  n => n + 1,
  n => n * 3,
  n => n - 2
);

console.log(steps(4));

compose z użyciem reduceRight

compose jest odwróconą wersją pipe. Użycie reduceRight przechodzi przez listę funkcji od końca, dlatego funkcja najbardziej na prawo jest wykonywana jako pierwsza, zgodnie z zapisem f(g(x)).

const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);

const inc = n => n + 1;
const double = n => n * 2;

console.log(compose(inc, double)(5));

pipe i compose są swoimi lustrzanymi odbiciami

Ta sama lista funkcji daje różne wyniki w pipe i compose, ponieważ odwraca się kierunek wykonywania. Należy wybrać rozwiązanie zależnie od tego, jak chcą Państwo czytać poszczególne kroki.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);

const inc = n => n + 1;
const square = n => n * n;

console.log(pipe(inc, square)(3));
console.log(compose(inc, square)(3));

compose jako odwrócone pipe

Funkcję compose można zdefiniować za pomocą pipe, odwracając listę funkcji. Pokazuje to, jak blisko spokrewnione są te funkcje.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const compose = (...fns) => pipe(...fns.reverse());

const inc = n => n + 1;
const double = n => n * 2;

console.log(compose(inc, double)(5));

Rzeczywisty potok przetwarzania tekstu

Zbudujmy generator slugów z małych funkcji operujących na łańcuchach znaków, używając pipe. Każdy etap wykonuje jedno zadanie i można go łatwo testować niezależnie.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const slugify = pipe(
  s => s.trim(),
  s => s.toLowerCase(),
  s => s.replace(/\s+/g, '-')
);

console.log(slugify('  Hello World Example  '));

Kompozycja operacji na tablicach

Potoki działają z dowolnym typem danych, w tym z tablicami. Połączmy filtrowanie i mapowanie w jedną nazwaną transformację.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const process = pipe(
  arr => arr.filter(n => n % 2 === 0),
  arr => arr.map(n => n * 10)
);

console.log(process([1, 2, 3, 4, 5, 6]));

Przypadek brzegowy funkcji tożsamościowej

Wywołanie pipe() bez funkcji zwraca dane wejściowe bez zmian, ponieważ reduce zwraca po prostu wartość początkową. Tożsamościowe zachowanie sprawia, że wywołanie funkcji pomocniczych z zerową liczbą kroków jest bezpieczne.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const identity = pipe();
console.log(identity(42));
console.log(identity('unchanged'));

Łączenie z kurryfikacją

Funkcje skurryfikowane i częściowo zastosowane można bezpośrednio włączać do potoków. Każda z nich staje się przejrzystym krokiem jednoargumentowym.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const add = a => b => a + b;
const times = a => b => a * b;

const calc = pipe(add(3), times(2), add(-1));
console.log(calc(5));

Wybór między pipe a compose

Używaj pipe, gdy chcesz czytać kroki od góry do dołu, w kolejności ich wykonywania. Używaj compose, gdy chcesz zachować zgodność z matematycznym zapisem f(g(x)). Obie funkcje są jednowierszowymi opakowaniami wokół reduce i obie są powszechne w bibliotekach funkcyjnych.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const normalize = pipe(
  s => s.trim(),
  s => s.replace(/[^a-z0-9]+/gi, ' '),
  s => s.toUpperCase()
);

console.log(normalize('  a-b_c!d  '));

Szybkie sprawdzenie

Która metoda tablicowa sprawia, że compose wykonuje funkcje od prawej do lewej?

Podsumowanie: pipe i compose

Zbudowali Państwo ogólne funkcje pomocnicze do kompozycji:

pipe używa reduce do wykonywania funkcji od lewej do prawej.
compose używa reduceRight do wykonywania funkcji od prawej do lewej.
compose można zdefiniować jako pipe z odwróconą listą.
Puste potoki działają jak funkcja tożsamościowa, a skurryfikowane kroki można łatwo włączać do potoku.

Często zadawane pytania

Czy lekcja „Tworzenie pipe i compose” jest bezpłatna?

Tak — pełny tekst „Tworzenie pipe i compose” 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 „Tworzenie pipe i compose”?

Proszę zaimplementować kompozycję od lewej do prawej i od prawej do lewej. Ć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 4 z 4.

Ile czasu zajmuje lekcja „Tworzenie pipe i compose”?

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