Valószínűleg látta, hogy a nyílfüggvények néhányféleképpen vannak megírva.
//example 1 const addTwo = (num) => {return num + 2;}; //example 2 const addTwo = (num) => num + 2; //example 3 const addTwo = num => num + 2; //example 4 const addTwo = a => { const newValue = a + 2; return newValue; }; Néhányuk zárójeleket tartalmaz a paraméterek körül, míg mások nem. Néhány göndör zárójelet és areturnkulcsszó, mások nem. Az egyik több vonalat is átível, míg a többiek egyetlen vonalból állnak.
Érdekes, hogy amikor a fenti nyílfüggvényeket ugyanazzal az érveléssel hívjuk meg, ugyanazt az eredményt kapjuk.
console.log(addTwo(2)); //Result: 4 Honnan tudja, hogy melyik nyíl függvény szintaxist használja? Ezt fedezi fel ez a cikk: hogyan lehet deklarálni egy nyílfüggvényt.
Nagy különbség
A nyílfüggvények egy másik - tömörebb - módja a funkciókifejezések írásának. Azonban nincs saját kötésük a thiskulcsszóhoz.
//Function expression const addNumbers = function(number1, number2) { return number1 + number2; }; //Arrow function expression const addNumbers = (number1, number2) => number1 + number2; Amikor ugyanazokkal az argumentumokkal hívjuk meg ezeket a függvényeket, ugyanazt az eredményt kapjuk.
console.log(addNumbers(1, 2)); //Result: 3 Fontos szintaktikai különbséget kell megjegyezni: a nyílfüggvények a nyíl =>helyett a nyilat használják function. A nyílfüggvények írásakor más különbségekkel is tisztában kell lenni, és ezt fogjuk megvizsgálni a következő lépésben.
Zárójelek
Egyes nyílfüggvények zárójeleket tartalmaznak a paraméterek körül, mások pedig nem.
//Example with parentheses const addNums = (num1, num2) => num1 + num2; //Example without parentheses const addTwo = num => num + 2; Mint kiderült, a nyílfüggvény paramétereinek száma határozza meg, hogy zárójeleket kell-e tartalmaznunk.
A nulla paraméterű nyílfüggvény zárójeleket igényel.
const hello = () => "hello"; console.log(hello()); //Result: "hello" Egy nyíl funkció egy paraméter nem nem kell zárójelek. Más szavakkal, a zárójel nem kötelező.
const addTwo = num => num + 2; Tehát zárójeleket adhatunk a fenti példához, és a nyíl funkció továbbra is működik.
const addTwo = (num) => num + 2; console.log(addTwo(2)); //Result: 4 A több paraméterű nyílfüggvény zárójeleket igényel.
const addNums = (num1, num2) => num1 + num2; console.log(addNums(1, 2)); //Result: 3 Arrow funkciókat is támogatja többi paramétert és bomlasztó . Mindkét funkció zárójeleket igényel.
Ez egy példa egy nyílfüggvényre egy pihenési paraméterrel .
const nums = (first, ...rest) => rest; console.log(nums(1, 2, 3, 4)); //Result: [ 2, 3, 4 ] És itt van az egyik, hogy használ destrukturáló .
const location = { country: "Greece", city: "Athens" }; const travel = ({city}) => city; console.log(travel(location)); //Result: "Athens" Összefoglalva: ha csak egy paraméter van - és Ön nem használ többi paramétert vagy semlegesíti a szerkezetét -, akkor a zárójelek nem kötelezőek. Ellenkező esetben feltétlenül vegye fel őket.
A funkciótest
Most, hogy a zárójeles szabályokat lefedtük, térjünk rá egy nyílfüggvény függvénytörzsére.
A nyílfüggvénytestnek lehet „tömör teste” vagy „blokkteste”. A testtípus befolyásolja a szintaxist.
Először a „tömör test” szintaxist.
const addTwo = a => a + 2; A „tömör test” szintaxisa éppen ilyen: tömör! Nem használjuk areturnkulcsszó vagy göndör zárójelben.
Ha van egy egysoros nyílfüggvénye (mint a fenti példa), akkor az érték implicit módon visszaadódik. Tehát elhagyhatja areturnkulcsszó és a göndör zárójelek.
Most nézzük meg a „block body” szintaxist.
const addTwo = a => { const total = a + 2; return total; } Vegye figyelembe, hogy a fenti példában mind göndör zárójeleket, mindreturn kulcsszót használunk .
Ezt a szintaxist általában akkor látja, ha a függvény törzsének egynél több sora van. És ez egy kulcsfontosságú pont: tekerje egy többsoros nyílfüggvény testét göndör zárójelbe, és használja areturnkulcsszó.
Objektumok és nyílfunkciók
Még egy szintaxis árnyalatról tudni kell: zárja be a függvénytestet zárójelbe, ha egy objektum szó szerinti kifejezést szeretne visszaadni.
const f = () => ({ city:"Boston" }) console.log(f().city) Zárójelek nélkül hibát kapunk.
const f = () => { city:"Boston" } //Result: error Ha a nyíl függvény szintaxisa kissé zavarosnak tűnik, akkor nem vagy egyedül. Időbe telik, amíg megismerkedem vele. De az, hogy tisztában van a lehetőségekkel és követelményekkel, ebbe az irányba mutat.
A programozás megtanulásáról és a legjobb módszerekről írok ( amymhaddad.com).