Ez a JavaScript nyelvi funkció segíthet a kód rendbetételében, és újszerű értékelést ad a funkciók működéséről.
A curried függvények segíthetnek abban, hogy JavaScript-kódja olvashatóbbá és kifejezőbbé váljon. A currying technika ideális, ha az összetett logikát kisebb, önálló, jobban kezelhető kódrészletekre szeretné bontani.
Tudjon meg mindent a JavaScript curry-függvényeiről, valamint arról, hogyan használhatja a függvény curry technikát a létrehozáshoz részben alkalmazott függvények, valamint valós használati esetek mind a curryed, mind a részben alkalmazott függvényekhez funkciókat.
Mi az a Currying?
A Currying Haskell B matematikusról kapta a nevét. Curry, és a fogalom a lambda kalkulusból származik. A curry olyan függvényt vesz fel, amely egynél több paramétert kap, és unáris (egyparaméteres) függvények sorozatára bontja. Más szóval, egy curry függvény egyszerre csak egy paramétert vesz fel.
A curry alapvető példája
Az alábbiakban egy curry függvény példája látható:
functionbuildSandwich(ingredient1) {
return(ingredient2) => {
return(ingredient3) => {
return`${ingredient1},${ingredient2},${ingredient3}`
}
}
}
A buildSandwich() függvény egy másik függvényt ad vissza – egy névtelen függvényt, amely megkapja a összetevő 2 érv. Ezután ez az anonim függvény egy másik névtelen függvényt ad vissza, amely fogad összetevő 3. Végül ez az utolsó függvény a sablon literálját adja vissza, egy módon karakterláncok formázása JavaScriptben.
Amit létrehozott, az egy beágyazott függvény, ahol minden függvény az alatta lévőt hívja meg, amíg el nem érjük a végét. Most, amikor hívsz buildSandwich() és adjon át neki egyetlen paramétert, akkor a függvény azt a részét adja vissza, amelynek argumentumait még meg kell adnia:
console.log(buildSandwich("Bacon"))
A kimenetből láthatja, hogy a buildSandwich egy függvényt ad vissza:
A függvényhívás befejezéséhez mindhárom argumentumot meg kell adnia:
buildSandwich("Bacon")("Lettuce")("Tomato")
Ez a kód átadja a "bacon"-t az első funkciónak, a "salátát" a másodiknak és a "paradicsom"-ot az utolsó függvénynek. Más szóval a buildSandwich() A függvény valójában három függvényre oszlik, és mindegyik függvény csak egy paramétert kap.
Bár tökéletesen helyénvaló curry a hagyományos funkciók használatával, minden beágyazás elég csúnya lehet, minél mélyebbre kerülsz. Ennek megkerüléséhez használhat nyílfüggvényeket, és kihasználhatja azok tisztább szintaxisát:
const buildMeal = ingred1 =>ingred2 =>ingred3 =>
`${ingred1}, ${ingred2}. ${ingred3}`;
Ez az átdolgozott változat tömörebb, a használat előnye nyílfüggvények vs reguláris függvények. A függvényt ugyanúgy hívhatja meg, mint az előzőnél:
buildMeal("Bacon")("Lettuce")("Tomato")
Részben alkalmazott Curry-függvények
A részben alkalmazott függvények a currying gyakori használata. Ez a technika azt jelenti, hogy egyszerre csak a szükséges argumentumokat kell megadni (nem pedig az összes argumentumot). Amikor meghív egy függvényt az összes szükséges paraméter átadásával, azt mondja, hogy „alkalmazta” azt a függvényt.
Nézzünk egy példát:
const multiply = (x, y) => x * y;
Az alábbiakban a multiply curry változata látható:
const curriedMultiply = x =>y => x * y;
A curriedMultiply() függvény fogadja a x argumentum az első függvényre és y a második függvénynél, akkor mindkét értéket megszorozza.
Az első részben alkalmazott függvény létrehozásához hívja meg curriedMultiple() az első paraméterrel, és rendelje hozzá a visszaadott függvényt egy változóhoz:
const timesTen = curriedMultiply(10)
Ezen a ponton a kód "részben alkalmazta" a curriedMultiply() funkció. Tehát bármikor hívhat timesTen(), csak egy számot kell átadnia, és a szám automatikusan megszorozódik 10-zel (ami az alkalmazott függvényben tárolódik):
console.log(timesTen(8)) // 80
Ez lehetővé teszi, hogy egyetlen összetett funkcióra építsen több egyedi funkció létrehozásával, amelyek mindegyike saját funkcióval rendelkezik.
Vessen egy pillantást egy olyan példára, amely közelebb áll egy valódi webfejlesztési használati esethez. Lent van egy updateElemText() függvény, amely egy elemet vesz fel id az első hívásnál a tartalmat a második hívásnál, majd frissíti az elemet a alapján id és az általad biztosított tartalom:
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!")
Funkció összetétele Curried függvényekkel
A curry másik gyakori alkalmazása a funkcióösszetétel. Ez lehetővé teszi a kis függvények meghatározott sorrendben történő meghívását, és egyetlen, összetettebb függvénybe való kombinálását.
Például egy hipotetikus e-kereskedelmi webhelyen három olyan funkció található, amelyeket érdemes egymás után futtatni (pontos sorrendben):
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.`);
}
Vegye figyelembe, hogy ez a kód a hagyja kulcsszó a meghatározásához fullOrder() funkció. Ez lehetővé teszi, hogy értéket rendeljen a változóhoz, és a változó része hogyan működik a hatókör meghatározása JavaScriptben.
Ezután fordított sorrendben kell meghívnia a függvényeket (belülről kifelé), mert először az ügyfeleket szeretné hozzáadni:
completeOrder = (processOrder(completeOrder));
completeOrder = (addCustomer(completeOrder));
completeOrder("1000")
Ez a következő kimenetet adja:
Ha a fenti függvényeket a szokásos módon írnád, a kód így fog kinézni:
functionaddCustomer(...args) {
returnfunctionprocessOrder(...args) {
returnfunctioncompleteOrder(...args) {
// end
}
}
}
Amikor felhívja a addCustomer() függvényt, és adja át az argumentumokat, akkor belülről indul ki, és kijut a függvény tetejére.
Alakítson át egy normál függvényt Curry függvényvé Curry függvény segítségével
Ha sokat kíván használni curry függvényeket, akkor a folyamatot egyszerűsítheti egy helper funkcióval.
Ez a funkció bármely normál függvényt curry függvényvé alakít. Rekurziót használ tetszőleges számú argumentum kezelésére.
const curry = (fn) => {
return curried = (...args) => {
if (fn.length !== args.length) {
return curried.bind(null, ...args)
}
return fn(...args);
}
}
Ez a függvény minden olyan szabványos írott függvényt elfogad, amely egynél több paramétert kap, és a függvény curry verzióját adja vissza. Ha látni szeretné működését, használja ezt a példafüggvényt, amely három paramétert vesz fel, és összeadja őket:
const total = (x, y, z) => x + y + z
A függvény konvertálásához hívja meg a curry() funkció és passz teljes érvként:
const curriedTotal = curry(total)
A függvény meghívásához csak át kell adnia az összes argumentumot:
console.log(curriedTotal(10)(20)(30)) // 60
További információ a JavaScript funkcióiról
A JavaScript funkciói rendkívül rugalmasak, és a currying függvények csak egy kis részét képezik ennek. Számos más típusú függvény létezik, például nyílfüggvények, konstruktor függvények és névtelen függvények. A JavaScript elsajátításához kulcsfontosságú, hogy megismerje ezeket a funkciókat és összetevőiket.
