A JavaScript nyilak jobb fejlesztővé tehetnek

A JavaScript nyilak jobb fejlesztővé tehetnek

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





Az egyik legnépszerűbb változás a nyílfüggvények JavaScript -be történő hozzáadása volt. A Nyíl függvények új módja a JavaScript függvénykifejezések írásának, kétféle módon hozhat létre funkciókat az alkalmazásban.



Ha a hagyományos JavaScript funkciók szakértője vagy, a nyilak funkciói kissé módosíthatók. Nézzük meg, mik ezek, hogyan működnek és milyen előnyökkel járnak Önnek.





Mik azok a JavaScript nyilak funkciói?

A nyílfüggvények új módot jelentenek a korábbi funkciókifejezések írására tartalmazza a JavaScript ES6 kiadását . Ezek hasonlítanak az Ön által használt JavaScript függvénykifejezésekhez, némileg eltérő szabályokkal.

A nyílfüggvények mindig névtelen függvények, eltérő szabályok vonatkoznak rájuk



this

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

a kiválasztott lemez gpt partíció stílusú

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



=>

Ha valaha is dolgozott Pythonban, ezek a funkciók nagyon hasonlítanak Python Lambda kifejezések .

Ezeknek a funkcióknak a szintaxisa egy kicsit tisztább, mint a normál funkciók. Néhány új szabályt kell szem előtt tartani:



  • A funkciókulcsszó eltávolításra kerül
  • A visszatérési kulcsszó nem kötelező
  • A göndör fogszabályozó opcionális

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

A nyilak funkcióinak használata

A nyilak funkciói könnyen használhatók. A nyílfüggvények megértése könnyebb, ha összehasonlítjuk a hagyományos függvénykifejezésekkel.

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

let 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 visszaadja az összeget.

Itt a kifejezés nyílfüggvényre változott:

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

A függvény szintaxisa egészen más a nyílfüggvény használatával. A függvény kulcsszó eltávolításra kerül; a nyíljelző jelzi a JavaScriptnek, hogy függvényt ír.

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

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

A visszatérési kulcsszó és a göndör zárójelek most eltűntek. Marad egy nagyon tiszta egysoros függvény, amely közel fele a kódnak, mint az eredeti funkció. Ugyanazt az eredményt kapja sokkal kevesebb írott kóddal.

A nyílfüggvényekben több van. merüljünk mélyebbre, hogy jobban érezze, mit tehetnek.

A nyilak funkciói

A nyilak funkcióinak sokféle felhasználása és funkciója van.

megtalálja a házam történetét

Rendszeres funkciók

A nyílfüggvények egy vagy több argumentumot is használhatnak. Ha két vagy több argumentumot használ, azokat zárójelbe kell foglalnia. Ha csak egy argumentuma van, akkor nem kell zárójelet használni.

let square = x => x * x
square(2);
>>4

A nyílfüggvények argumentumok nélkül használhatók. Ha nem használ argumentumokat a függvényben, akkor üres zárójelet kell használnia.

let helloFunction = () => Console.log('Hello reader!');
helloFunction();
>>Hello reader!

Az ilyen egyszerű funkciók sokkal kevesebb kódot használnak. Képzeld el, mennyivel könnyebb egy komplexum projekt, mint egy JavaScript diavetítés akkor válik, ha egyszerűbb módja van a függvények írására.

Ennek használata

A koncepció

this

általában a JavaScript használatának legnehezebb része. A nyílfüggvények teszik

this

könnyebben használható.

Amikor nyilak funkcióit használja

this

a befoglaló függvény határozza meg. Ez problémákat okozhat, amelyek egymásba ágyazott funkciók és szükségletek létrehozásakor merülnek fel

this

alkalmazni a fő funkciójára

Íme egy népszerű példa, amely bemutatja azt a megoldást, amelyet a normál függvényekkel kell használni.

function Person() {
var that = this; //You have to assign 'this' to a new variable
that.age = 0;
setInterval(function growUp() {
that.age++;
}, 1000);
}

Az érték hozzárendelése

this

változóvá teszi, hogy olvasható legyen, ha meghív egy függvényt a fő funkciójában. Ez rendetlen, itt van egy jobb módszer erre a nyílfüggvényekkel.

function Person(){
this.age = 0;
setInterval(() => {
this.age++; // Now you can use 'this' without a new variable declared
}, 1000);
}

Bár nagyszerűek a funkciókhoz, nem használhatók metódusok létrehozására egy objektumon belül. A nyílfüggvények nem használják a megfelelő hatókört

this

.

Íme egy egyszerű objektum, amely egy módszert hoz létre a nyíl függvény használatával. A módszer csökkenti a öntetek hívással eggyel változó. Ehelyett egyáltalán nem működik.

hogyan kell elhagyni egy imessage csoportos csevegést
let pizza = {
toppings: 5,
removeToppings: () => {
this.toppings--;
}
}
//A pizza object with 5 toppings
>pizza
>>{toppings: 5, removeToppings: f}
pizza.removeToppings(); //The method will not do anything to the object
>pizza
>>{toppings: 5, removeToppings: f} //Still has 5 toppings

Munka tömbökkel

A nyílfüggvények használatával egyszerűsítheti a tömb metódusokkal való munkához használt kódot. Tömbök és tömb módszerek nagyon fontos részei a JavaScriptnek szóval sokat fogod használni őket.

Van néhány hasznos módszer, mint pl térkép metódus, amely egy tömb minden elemén futtat egy függvényt, és visszaadja az új tömböt.

let myArray = [1,2,3,4];
myArray.map(function(element){
return element + 1;
});
>> [2,3,4,5]

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

let myArray = [1,2,3,4];
myArray.map(element => {
return element + 1;
});
>> [2,3,4,5]

Most már sokkal könnyebb olvasni.

Objektum literálok létrehozása

A nyílfüggvények segítségével objektum literálok hozhatók létre a JavaScriptben. A szokásos funkciók létrehozhatják őket, de kicsit hosszabbak.

let createObject = function createName(first,last) {
return {
first: first,
last: last
};
};

Ugyanazt az objektumot nyílfüggvénnyel is létrehozhatja kevesebb kód használatával. A nyíl jelöléssel zárójelbe kell tekerni a függvénytestet. Itt a továbbfejlesztett szintaxis nyílfüggvényekkel.

let createArrowObject = (first,last) => ({first:first, last:last});

JavaScript nyilak és azon túl

Most már számos különböző módszert ismer, amelyek segítségével a JavaScript nyílfunkciók megkönnyítik az Ön életét fejlesztőként. Rövidítik a szintaxist, és nagyobb ellenőrzést biztosítanak a használatával

this

, megkönnyíti az objektumok létrehozását, és új módszert ad a tömb metódusokkal való munkához.

A nyílfunkciók bevezetése sok más funkcióval együtt a JavaScript ES6 -ban megmutatja, hogy a JavaScript mennyire fontos lett a webfejlesztésben. Pedig annyival többet tehet.

Szeretne többet megtudni a JavaScriptről? Ismerje meg ezeket a JavaScript keretrendszereket. Ráadásul a miénk JavaScript csalólap értékes információkat nyújt és többet megtudhat hogyan működik a JavaScript jobb fejlesztővé tehet téged.

Részvény Részvény Csipog Email 6 hallható alternatíva: A legjobb ingyenes vagy olcsó hangoskönyv -alkalmazások

Ha nem szeretne fizetni a hangoskönyvekért, íme néhány nagyszerű alkalmazás, amelyek segítségével ingyen és legálisan hallgathatja azokat.

Olvassa tovább Kapcsolódó témák
  • Programozás
  • JavaScript
A szerzőről Anthony Grant(40 cikk megjelent)

Anthony Grant szabadúszó író, aki programozással és szoftverrel foglalkozik. Számítástechnikai szakember, aki programozásban, Excelben, szoftverekben és technológiákban játszik.

Továbbiak Anthony Grant -tól

Iratkozzon fel hírlevelünkre

Csatlakozz hírlevelünkhöz, ahol technikai tippeket, értékeléseket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!

Feliratkozáshoz kattintson ide