A JavaScript nyílfunkciói jobb fejlesztővé tehetik Önt

Hirdetés

A JavaScript ES6 izgalmas változásokat hozott a webfejlesztés világában. A JavaScript nyelv új kiegészítései új lehetőségeket kínáltak.

Az egyik legnépszerűbb változás a nyíl funkciók hozzáadása a JavaScript-be. A nyílfunkciók új módszer a JavaScript funkciók kifejezéseinek írására, kétféle módon adva meg funkciókat az alkalmazásban.

A nyílfunkciók kissé módosíthatók, ha szakértő vagy a hagyományos JavaScript funkciók területén. Vessünk egy pillantást ezekre, mik ezek működnek, és hogy mi az előnye.

Mik a JavaScript nyíl funkciói?

A nyílfüggvények egy új módszer a függvény kifejezések írására, amelyek voltak szerepel a JavaScript ES6 kiadásában Mi az ES6 és mit kell a Javascript programozóknak tudni?Az ES6 az ECMA Script (Javascript) programozási nyelv 6. verziójára utal. Nézzük meg néhány fontosabb változást, amelyeket az ES6 a JavaScripthez hoz. Olvass tovább . Ezek hasonlítanak a használt JavaScript funkció kifejezésekhez, amelyeket kissé eltérő szabályokkal tartalmaz.

A nyílfunkciók mindig anonim funkciók, eltérő szabályokra vonatkoznak

ez, és egyszerűbb szintaxissal rendelkeznek, mint a hagyományos függvények.

Ezek a funkciók egy új nyíl tokent használnak:

=>

Ha valaha is dolgoztál Pythonban, ezek a funkciók nagyon hasonlóak a Python Lambda kifejezések Útmutató a Python Lambda funkcióinak megértéséhezA Pythonban található lambda az egyik leghasznosabb, legfontosabb és érdekesebb funkció, amelyet tudni kell. Íme, hogyan kell használni őket, és miért hasznosak. Olvass tovább .

Ezeknek a funkcióknak a szintaxisa kissé tisztább, mint a normál függvényeknél. Van néhány új szabály, amelyeket figyelembe kell venni:

• A funkció kulcsszója eltávolítva
• A visszatérő kulcsszó választható
• A göndör tartók opcionálisak

Nagyon sok apró változtatáson kell átmenni, ezért kezdjük a függvény kifejezések alapvető összehasonlításával.

A nyílfunkciók használata

A nyíl funkciók könnyen kezelhetők. A nyílfunkciók megértése könnyebb, ha összehasonlítjuk a tradicionális függvény kifejezésekkel.

Itt van egy függvény kifejezés, amely két számot ad hozzá; először a hagyományos függvény módszerrel:

 hadd addnum = function (num1, num2) {return num1 + num2; }; addnum (1,2); >>3

Ez egy nagyon egyszerű függvény, amely két érvet vesz fel és visszatér az összeget.

Itt van egy kifejezés nyílfüggvényre változtatva:

hadd addnum = (num1, num2) => {return num1 + num2;}; addnum (1,2); >>3

A függvény szintaxisa meglehetõsen különbözik egy nyílfüggvénytõl. A funkció kulcsszója eltávolítva; a nyíl jelzi, hogy a JavaScript tudja, hogy írt egy funkciót.

A göndör zárójelek és a visszatérő kulcsszó még mindig ott vannak. Ezek opcionálisak nyíl funkciókkal. Íme egy még egyszerűbb példa ugyanazon funkcióra:

hadd addnum = (num1, num2) => num1 + num2;

A visszatérő kulcsszó és a göndör tartóelemek eltűntek. Ami egy nagyon tiszta egysoros funkció, amely a kód közel fele az eredeti függvény. Ugyanazt az eredményt kapja, sokkal kevesebb írott kóddal.

Még több van a nyíl funkciókhoz. merüljünk mélyebben, hogy jobban érezzük magukat, amit tehetnek.

Nyíl funkciók

A nyíl funkcióknak sokféle felhasználása és funkciója van.

Rendszeres funkciók

A nyílfunkciók használhatnak egy vagy több argumentumot. Ha két vagy több érvet használ, akkor azokat zárójelbe kell tenni. Ha csak egy érve van, akkor nem kell zárójeleket használni.

legyen négyzet = x => x * x négyzet (2); >>4

A nyílfunkciók argumentumok nélkül használhatók. Ha nem használ semmilyen érvet a funkciójában, akkor üres zárójelet kell használnia.

let helloFunction = () => Console.log ("Helló olvasó!"); helloFunction (); >> Helló olvasó!

Az ilyen egyszerű funkciók sokkal kevesebb kódot használnak. Képzelje el, mennyire könnyebb egy komplexum A JavaScript diavetítésként jelenik meg Hogyan készítsünk egy JavaScript diavetítést 3 egyszerű lépésbenMa megmutatom neked, hogyan lehet a Javacript diavetítést készíteni a semmiből - ugorjunk bele! Olvass tovább akkor válik, ha egyszerűbb módja van a függvények írására.

Ennek használata

A koncepció ez általában a JavaScript használatának legbonyolultabb része. Nyíl funkciók teszik ez könnyebben használható.

Ha nyíl funkciókat használ ez pontját a mellékelt funkció határozza meg. Ez problémákat okozhat, amelyek akkor merülnek fel, ha beágyazott funkciókat és szükségleteket hoz létre ez hogy alkalmazza a fő funkciójára

Íme egy népszerű példa, amely bemutatja azt a megoldást, amelyet a szokásos funkciókhoz kell használni.

funkció Személy () {var that = this; // 'ezt' kell hozzárendelnie egy új változóhoz, amely.age = 0; setInterval (növekedés függvény () {that.age ++; }, 1000); }

Érték hozzárendelése ez egy változóra, akkor olvashatóvá válik, amikor egy funkciót hív fel a fő funkción belül. Ez rendetlen, itt van egy jobb módszer erre a nyílfunkciók használatával.

funkció Személy () {this.age = 0; setInterval (() => {this.age ++; // Most már használhatja 'ezt' új deklarált változó nélkül}, 1000); }

Bár ezek kiválóan alkalmasak a funkciók ellátására, nem használhatók metódusok létrehozására egy objektumon belül. A nyíl funkciók nem használják a megfelelő méretarányt ez.

Íme egy egyszerű objektum, amely létrehoz egy módszert a nyíl funkció segítségével. A módszernek csökkentenie kell a öntetek változik egynel, amikor hívják. Ehelyett egyáltalán nem működik.

hadd pizza = { öntetek: 5, removeToppings: () => {this.toppings--; } } // Pizza objektum 5 feltétellel. > Pizza. >> {öntetek: 5, removeToppings: f} pizza.removeToppings (); // A módszer nem fog semmit megtenni az objektummal szemben> pizza. >> {öntetek: 5, removeToppings: f} // Még 5 feltöltése van.

Munka a tömbökkel

A nyíl funkciókkal egyszerűsítheti a tömb módszerekkel végzett munkához használt kódot. Tömbök és a tömb módszerek a JavaScript nagyon fontos részei 5 JavaScript tömb módszer, amelyet ma elsajátítania kellMeg akarja érteni a JavaScript tömböket, de nem tud megbirkózni velük? Olvassa el a JavaScript tömb példáinkat útmutatásért. Olvass tovább tehát sokat fogja használni őket.

Van néhány hasznos módszer, például a térkép metódus, amely egy függvényt egy tömb összes elemén futtat, és az új tömböt adja vissza.

legyen myArray = [1,2,3,4]; myArray.map (függvény (elem) { visszatérő elem + 1; }); >> [2,3,4,5]

Ez egy nagyon egyszerű függvény, amely hozzáad egy értéket a tömb minden értékéhez. Ugyanazt a funkciót kevesebb kóddal is írhatja egy nyílfüggvény használatával.

legyen myArray = [1,2,3,4]; myArray.map (elem => { visszatérő elem + 1; }); >> [2,3,4,5]

Most sokkal könnyebb olvasni.

Objektum literálok létrehozása

A nyíl funkciókkal objektum literálok hozhatók létre JavaScript-ben. A szokásos funkciók létrehozhatják őket, de ezek kissé hosszabbak.

hadd createObject = function createName (első, utolsó) {visszatérés {első: első, utolsó: utolsó}; };

Ugyanazt az objektumot egy nyílfunkcióval is elkészítheti kevesebb kód felhasználásával. A nyíl jelölésével be kell csomagolni a függvénytestet zárójelbe. Itt található a továbbfejlesztett szintaxis a nyílfunkciókkal.

hadd createArrowObject = (első, utolsó) => ({első: első, utolsó: utolsó});

JavaScript nyílfunkciók és azon túl

Most már tudsz néhány különféle módszert a JavaScript nyíl funkcióinak megkönnyítésére az Ön fejlesztői életében. Rövidítik a szintaxist, így több vezérlést biztosítanak a használatával ez, megkönnyíti az objektumok létrehozását, és új lehetőséget kínál a tömb módszerekkel történő munkavégzésre.

A nyílfunkciók, valamint sok más szolgáltatás bevezetése a JavaScript ES6-ban megmutatja, hogy a JavaScriptek milyen fontosak lettek a webfejlesztésben. De még sok minden más megtehető.

Szeretne többet megtudni a JavaScriptről? a JavaScript csaló lap A végső JavaScript csaló lapKapjon gyors frissítést a JavaScript elemekkel ezzel a cheat-lappal. Olvass tovább értékes információkat és további ismereteket nyújt hogyan működik a JavaScript Mi a JavaScript és hogyan működik?Ha webfejlesztést tanul, akkor itt van, amit tudnia kell a JavaScriptről, valamint arról, hogy hogyan működik a HTML és CSS. Olvass tovább jobb fejlesztővé tehet téged.