Costruire pipe e compose
Implementi la composizione da sinistra a destra e da destra a sinistra.
Costruire pipe e compose è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.
Da due funzioni a molte
Un compose con due argomenti è limitante. Le pipeline reali concatenano molti passaggi. In questa lezione costruirà compose e pipe generici usando reduce e reduceRight.
pipe: da sinistra a destra
pipe segue l'ordine di esecuzione: la prima funzione viene eseguita per prima. pipe(a, b, c)(x) equivale a c(b(a(x))). Per la maggior parte delle persone è più naturale di 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));Come reduce guida pipe
reduce inizia con il valore di input come accumulatore e applica ogni funzione a turno, passando ciascun risultato alla funzione successiva. Il valore iniziale x avvia la catena.
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 con reduceRight
compose è pipe in ordine inverso. L'uso di reduceRight percorre l'elenco delle funzioni dalla fine, quindi la funzione più a destra viene eseguita per prima, in accordo con 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 e compose sono speculari
Lo stesso elenco di funzioni produce risultati diversi con pipe e compose, perché cambia la direzione. Scelga in base al modo in cui desidera leggere i passaggi.
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 come pipe invertito
È possibile definire compose in termini di pipe invertendo l'elenco delle funzioni. Questo mostra quanto siano strettamente correlati.
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));Una vera pipeline di testo
Costruisca un generatore di slug a partire da piccole funzioni per le stringhe usando pipe. Ogni passaggio svolge un solo compito ed è facile da verificare separatamente.
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 '));Composizione di operazioni sugli array
Le pipeline funzionano con qualsiasi tipo di dato, inclusi gli array. Combini il filtraggio e la trasformazione in un'unica trasformazione dotata di un nome.
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]));Il caso limite dell'identità
Chiamando pipe() senza funzioni, l'input viene restituito invariato, perché reduce restituisce semplicemente il valore iniziale. Questo comportamento identità rende sicuri gli helper anche quando vengono chiamati con zero passaggi.
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const identity = pipe();
console.log(identity(42));
console.log(identity('unchanged'));Combinazione con il currying
Le funzioni sottoposte a currying e applicazione parziale si inseriscono direttamente nelle pipeline. Ciascuna diventa un passaggio ordinato a un solo argomento.
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));Scegliere pipe o compose
Usi pipe quando desidera leggere i passaggi dall'alto verso il basso, nell'ordine di esecuzione. Usi compose quando desidera seguire la notazione matematica f(g(x)). Entrambi sono wrapper reduce di una sola riga ed entrambi sono presenti praticamente in tutte le librerie funzionali.
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 '));Verifica rapida
Quale metodo degli array fa eseguire le funzioni da destra verso sinistra a compose?
Riepilogo: pipe e compose
Ha costruito helper generici per la composizione:
- pipe usa
reduceper l'esecuzione da sinistra verso destra. - compose usa
reduceRightper l'esecuzione da destra verso sinistra. composepuò essere definito comepipecon un elenco invertito.- Le pipeline vuote si comportano come l'identità e i passaggi sottoposti a currying si inseriscono senza difficoltà.
Impara JavaScript con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 59
- Lezioni
- 200
Domande Frequenti
La lezione «Costruire pipe e compose» è gratuita?
Sì — il testo completo di «Costruire pipe e compose» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.
Cosa imparerò in «Costruire pipe e compose»?
Implementi la composizione da sinistra a destra e da destra a sinistra. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare JavaScript Academy?
Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Costruire pipe e compose»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?
Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Applicazione parziale
- Funzioni currying
- Composizione di funzioni
- Costruire pipe e compose