Kaip „Curry“ funkcijas „JavaScript“.

„Curried“ funkcijos gali padėti padaryti „JavaScript“ kodą skaitomesnį ir išraiškingesnį. „Currying“ technika yra ideali, kai norite suskaidyti sudėtingą logiką į mažesnes, savarankiškas, lengviau valdomas kodo dalis.

Sužinokite viską apie „JavaScript“ svarbias funkcijas, kaip naudoti funkcijų curry techniką kuriant iš dalies pritaikytos funkcijos, taip pat realaus naudojimo atvejai, kai naudojamos ir iš dalies taikomos funkcijos funkcijas.

Kas yra Currying?

Currying pavadintas matematiko Haskello B. Curry, o sąvoka kilusi iš Lambda skaičiavimo. Kariavimas paima funkciją, kuri gauna daugiau nei vieną parametrą, ir suskaido ją į vienkartinių (vieno parametro) funkcijų seriją. Kitaip tariant, patobulinta funkcija vienu metu užima tik vieną parametrą.

Pagrindinis kariavimo pavyzdys

Žemiau pateikiamas „curried“ funkcijos pavyzdys:

functionbuildSandwich(ingredient1) {
return(ingredient2) => {
return(ingredient3) => {
return`${ingredient1},${ingredient2},${ingredient3}`
 }
 }
}

The buildSandwich() funkcija grąžina kitą funkciją – anoniminę funkciją, kuri gauna ingredientas 2 argumentas. Tada ši anoniminė funkcija grąžina kitą anoniminę funkciją, kuri gauna ingredientas 3. Galiausiai, ši paskutinė funkcija grąžina šabloną pažodžiui, tai yra būdas formatuoti eilutes JavaScript.

Tai, ką sukūrėte, yra įdėta funkcija, kurioje kiekviena funkcija iškviečia po ja esančią funkciją, kol pasieksime pabaigą. Dabar, kai paskambinsi buildSandwich() ir perduokite jam vieną parametrą, jis grąžins funkcijos dalį, kurios argumentus dar nepateiksite:

console.log(buildSandwich("Bacon"))

Iš išvesties matote, kad buildSandwich grąžina funkciją:

Norėdami užbaigti funkcijos iškvietimą, turėsite pateikti visus tris argumentus:

buildSandwich("Bacon")("Lettuce")("Tomato")

Šis kodas „Becon“ perduoda pirmajai funkcijai, „salotos“ – antrajai, o „Pomidoras“ – paskutinei funkcijai. Kitaip tariant, buildSandwich() funkcija iš tikrųjų suskirstyta į tris funkcijas, kurių kiekviena gauna tik vieną parametrą.

Nors visiškai tinka kariuoti naudojant tradicines funkcijas, visi lizdai gali būti gana negražūs, kuo giliau. Norėdami tai padaryti, galite naudoti rodyklių funkcijas ir jų švaresnę sintaksę:

const buildMeal = ingred1 =>ingred2 =>ingred3 =>
`${ingred1}, ${ingred2}. ${ingred3}`;

Ši atnaujinta versija yra glaustesnė, tai yra naudojimo pranašumas rodyklės funkcijos ir įprastos funkcijos. Funkciją galite iškviesti taip pat, kaip darėte ankstesnę:

buildMeal("Bacon")("Lettuce")("Tomato")

Iš dalies taikomos kario funkcijos

Iš dalies taikomos funkcijos yra įprastas kariavimo panaudojimas. Šis metodas reiškia, kad vienu metu pateikiami tik reikalingi argumentai (o ne pateikiami visi argumentai). Kai iškviečiate funkciją perduodami visus reikiamus parametrus, sakote, kad tą funkciją „pritaikėte“.

Pažiūrėkime į pavyzdį:

const multiply = (x, y) => x * y;

Žemiau pateikiama dauginimosi versija:

const curriedMultiply = x =>y => x * y;

The curriedMultiply() funkcija gauna x pirmosios funkcijos argumentas ir y antrajai funkcijai, tada ji padaugina abi reikšmes.

Norėdami sukurti pirmą iš dalies pritaikytą funkciją, skambinkite curriedMultiple() su pirmuoju parametru ir grąžintą funkciją priskirkite kintamajam:

const timesTen = curriedMultiply(10)

Šiuo metu kodas „iš dalies pritaikytas“. curriedMultiply() funkcija. Taigi skambinkite bet kuriuo metu, kai norite timesTen (), tereikia jam perduoti vieną skaičių ir skaičius bus automatiškai padaugintas iš 10 (kuris saugomas taikomoje funkcijoje):

console.log(timesTen(8)) // 80

Tai leidžia sukurti vieną sudėtingą funkciją, iš jos sukuriant kelias pasirinktines funkcijas, kurių kiekviena turi savo funkcijas.

Pažvelkite į pavyzdį, artimesnį tikram žiniatinklio kūrimo naudojimui. Žemiau turite a updateElemText() funkcija, kuri paima elementą id per pirmąjį skambutį, turinį antrojo skambučio metu, o tada atnaujina elementą pagal id ir turinys, kurį pateikėte:

const updateElemText = id = content
 => document.querySelector(`#${id}`).textContent = content
// Lock the element's id into the function:
const updateHeaderText = updateElemText('header')
// Update the header text
updateHeaderText("Hello World!")

Funkcijų sudėtis su Curried funkcijomis

Kitas įprastas kario panaudojimas yra funkcinė sudėtis. Tai leidžia iškviesti mažas funkcijas tam tikra tvarka ir sujungti jas į vieną sudėtingesnę funkciją.

Pavyzdžiui, hipotetinėje el. prekybos svetainėje yra trys funkcijos, kurias galbūt norėsite paleisti vieną po kitos (tikslia tvarka):

const addCustomer = fn =>(...args) => {
console.log("Saving customer info")
return fn(...args)
}
const processOrder = fn =>(...args) => {
console.log(`processing order #${args[0]}`)
return fn(...args);
}
let completeOrder = (...args) => {
console.log(`Order #${[...args].toString()} completed.`);
}

Atkreipkite dėmesį, kad šis kodas naudoja leisti raktinis žodis, skirtas apibrėžti užbaigtiUžsakymas() funkcija. Tai leidžia iš naujo priskirti reikšmę kintamajam ir yra jo dalis kaip „JavaScript“ veikia apimties nustatymas.

Tada turite iškviesti funkcijas atvirkštine tvarka (iš vidaus į išorę), nes pirmiausia norite pridėti klientus:

completeOrder = (processOrder(completeOrder));
completeOrder = (addCustomer(completeOrder));
completeOrder("1000")

Tai suteiks jums tokią išvestį:

Jei anksčiau minėtas funkcijas rašysite įprastu būdu, kodas atrodys maždaug taip:

functionaddCustomer(...args) {
returnfunctionprocessOrder(...args) {
returnfunctioncompleteOrder(...args) {
// end
 }
 }
}

Kai skambinate addCustomer() funkciją ir pateikite argumentus, pradedate nuo vidaus ir siekiate funkcijos viršaus.

Konvertuokite įprastą funkciją į Curri funkciją naudodami Curry funkciją

Jei planuojate daug naudoti „curried“ funkcijas, galite supaprastinti procesą naudodami pagalbinę funkciją.

Ši funkcija konvertuos bet kurią įprastą funkciją į patobulintą funkciją. Jis naudoja rekursiją, kad galėtų apdoroti bet kokį argumentų skaičių.

const curry = (fn) => {
return curried = (...args) => {
if (fn.length !== args.length) {
return curried.bind(null, ...args)
 }
return fn(...args);
 }
}

Ši funkcija priims bet kurią standartinę rašytinę funkciją, kuri gauna daugiau nei vieną parametrą, ir pateiks tos funkcijos patobulintą versiją. Norėdami pamatyti, kaip tai veikia, naudokite šią pavyzdinę funkciją, kuri paima tris parametrus ir juos sudeda:

const total = (x, y, z) => x + y + z

Norėdami konvertuoti šią funkciją, skambinkite karis () funkcija ir praeiti viso kaip argumentas:

const curriedTotal = curry(total)

Dabar norėdami iškviesti funkciją, tereikia pateikti visus argumentus:

console.log(curriedTotal(10)(20)(30)) // 60

Daugiau apie „JavaScript“ funkcijas

„JavaScript“ funkcijos yra labai lanksčios, o „currying“ funkcijos yra tik maža to dalis. Yra daug kitų funkcijų, tokių kaip rodyklės funkcijos, konstruktoriaus funkcijos ir anoniminės funkcijos. Susipažinimas su šiomis funkcijomis ir jų komponentais yra labai svarbus norint įvaldyti JavaScript.