Kiire sissejuhatus toru () ja koostamiseks () JavaScripti

Funktsionaalne programmeerimine on olnud minu jaoks üsna silmiavav teekond. See postitus ja sarnased postitused on katse jagada oma teadmisi ja vaatenurki uute funktsionaalsete programmeerimismaade rändamisel.

Ramda on olnud minu FP-teek, kuna see muudab JavaScripti funktsionaalse programmeerimise palju lihtsamaks. Soovitan soojalt.

Toru

Mõiste pipeon lihtne - see ühendab nfunktsioone. See on vasakult paremale voolav toru, mis kutsub kõiki funktsioone viimase väljundiga.

Kirjutame funktsiooni, mis tagastab kellegi oma name.

getName = (person) => person.name; getName({ name: 'Buckethead' }); // 'Buckethead' 

Kirjutame funktsiooni, mis suurte tähtedega stringe kirjutab.

uppercase = (string) => string.toUpperCase(); uppercase('Buckethead'); // 'BUCKETHEAD' 

Nii et kui me tahame personnime saada ja suurtähtedega kirjutada, võiksime seda teha:

name = getName({ name: 'Buckethead' }); uppercase(name); // 'BUCKETHEAD' 

See on tore, kuid elimineerime selle vahemuutuja name.

uppercase(getName({ name: 'Buckethead' })); 

Parem, aga ma ei armasta seda pesitsemist. See võib muutuda liiga rahvarohkeks. Mis siis, kui soovime lisada funktsiooni, mis saab stringi 6 esimest märki?

get6Characters = (string) => string.substring(0, 6); get6Characters('Buckethead'); // 'Bucket' 

Tulemuseks:

get6Characters(uppercase(getName({ name: 'Buckethead' }))); // 'BUCKET'; 

Lähme hulluks ja lisame stringide vastupidiseks funktsiooni.

reverse = (string) => string .split('') .reverse() .join(''); reverse('Buckethead'); // 'daehtekcuB' 

Nüüd on meil:

reverse(get6Characters(uppercase(getName({ name: 'Buckethead' })))); // 'TEKCUB' 

See võib saada natuke ... palju.

Toru päästmiseks!

Selle asemel, et funktsioonides funktsioone segada või luua hunnik vaheldumisi, olgem pipekõik asjad!

pipe( getName, uppercase, get6Characters, reverse )({ name: 'Buckethead' }); // 'TEKCUB' 

Puhas kunst. See on nagu Todo nimekiri!

Astume sellest läbi.

Demo eesmärgil kasutan pipeEric Elliotti funktsionaalse programmeerimise artikli rakendust.

pipe = (...fns) => (x) => fns.reduce((v, f) => f(v), x); 

Ma armastan seda väikest ühe liinilaevaga.

Kasutades ülejäänud parameetreid, vaadake minu artiklit selle kohta, et saaksime nfunktsioone kasutada. Iga funktsioon võtab eelmise väljundi ja see kõik väheneb ? ühele väärtusele.

Ja saate seda kasutada täpselt nii, nagu me eespool tegime.

pipe( getName, uppercase, get6Characters, reverse )({ name: 'Buckethead' }); // 'TEKCUB' 

Laiendan pipeja lisan mõned silurilaused ning läheme rea kaupa.

pipe = (...functions) => (value) => { debugger; return functions.reduce((currentValue, currentFunction) => { debugger; return currentFunction(currentValue); }, value); }; 

Helistage pipemeie eeskujul ja laske imetel areneda.

Vaadake kohalikke muutujaid. functionson 4 funktsiooni massiiv ja valueon { name: 'Buckethead' }.

Kuna me kasutasime puhkeparameetreid , pipevõimaldab see kasutada suvalist arvu funktsioone. See lihtsalt loopib ja helistab kõigile.

Järgmisel siluril oleme sees reduce. Siin antakse currentValueedasi currentFunctionja tagastatakse.

Näeme, et tulemus on, 'Buckethead'sest currentFunctiontagastab .namemis tahes objekti omaduse. See tagastatakse tagasi reduce, see tähendab, et sellest saab currentValuejärgmine kord uus . Lööme järgmise siluri ja näeme.

Nüüd currentValueon see ‘Buckethead’sellepärast, et see sai eelmisel korral tagasi. currentFunctionon uppercase, nii 'BUCKETHEAD'saab ka järgmine currentValue.

Sama idee, kitkuge ‘BUCKETHEAD’esimesed 6 tähemärki ja andke need järgmisele funktsioonile.

reverse(‘.aedi emaS’)

Ja ongi valmis!

Aga komponeerimine ()?

See on lihtsalt pipeteises suunas.

Nii et kui soovite sama tulemust nagu meie pipeülaltoodud, siis teeksite vastupidist.

compose( reverse, get6Characters, uppercase, getName )({ name: 'Buckethead' }); 

Pange tähele, kuidas getNameon ahelas viimane ja reverseesimene?

Siin on kiire rakendamine compose, jällegi viisakas Magical Eric Elliott, samast artiklist.

compose = (...fns) => (x) => fns.reduceRight((v, f) => f(v), x); 

Selle funktsiooni laiendamise debuggers-ga jätan teile harjutuseks. Mängige sellega ringi, kasutage seda, hindage seda. Ja mis kõige tähtsam, nautige!