A JavaScript ES6 funkciói: A jó alkatrészek

Az ES6 néhány újszerű funkcionális funkciót kínál, amelyek sokkal rugalmasabbá teszik a JavaScript programozását. Beszéljünk néhányukról - konkrétan az alapértelmezett paraméterekről, a többi paraméterről és a nyílfüggvényekről.

Szórakoztató tipp : átmásolhatja és beillesztheti a fenti példák / kódok bármelyikét a Babel REPL-beés láthatja, hogy az ES6 kód hogyan jut el az ES5-be.

Alapértelmezett paraméterértékek

A JavaScript funkcióknak van egy egyedülálló szolgáltatása, amely lehetővé teszi, hogy tetszőleges számú paramétert adjon át a függvényhívás során (tényleges paraméterek), függetlenül a függvénydefinícióban szereplő paraméterek számától (hivatalos paraméterek). Tehát meg kell adnia az alapértelmezett paramétereket arra az esetre, ha valaki elfelejtené átadni az egyik paramétert.

Hogyan valósítsák meg az alapértelmezett paramétereket az ES5-ben

A fentiek jól tűnnek, amikor futtatjuk. number2nem lett átadva, és ezt a ' ||' operátor segítségével ellenőriztük a második operandus visszaszolgáltatására, ha az első hamis. Így a „10” értéket alapértelmezett értékként rendelték, mivel number2ez még nincs meghatározva.

Pedig csak egy probléma van. Mi van, ha valaki „0” -ot ad át második érvként? ⚠

A fenti megközelítés kudarcot vallana, mert az átadott érték, például a „0” helyett az alapértelmezett „10” értéket rendelnénk hozzá. Miért? Mivel a „0” -t hamisnak értékelik!

Fejlesszük a fenti kódot, igaz?

Agh! Ez túl sok kód. Egyáltalán nem klassz. Lássuk, hogyan csinálja az ES6.

Alapértelmezett paraméterek az ES6-ban

function counts(number1 = 5, number2 = 10) { // do anything here}

number1és number2alapértelmezett értékük „5” és „10”.

Hát igen, ez nagyjából ez. Rövid és édes. Nincs extra kód a hiányzó paraméterek ellenőrzésére. Ezáltal a funkció teste szép és rövid lesz. ?

MEGJEGYZÉS: Ha egy undefinedparaméter értéke átkerül egy alapértelmezett argumentummal, a várt módon az átadott érték érvénytelen, és az alapértelmezett paraméter értéke van hozzárendelve . De ha nullátadják, akkor érvényesnek tekintik, és az alapértelmezett paramétert nem használják, és a null értéket rendelik hozzá.

Az alapértelmezett paraméterek szép tulajdonsága, hogy az alapértelmezett paraméternek nem feltétlenül kell primitív értéknek lennie, és az alapértelmezett paraméterérték beolvasására egy funkciót is végrehajthatunk. Íme egy példa:

A korábbi paraméterek alapértelmezett paraméterek lehetnek az utánuk következő paramétereknek is:

function multiply(first, second = first) { // do something here}

De az inverz hibát dob. Azaz, ha a második paramétert az első paraméter alapértelmezett értékeként rendeljük hozzá, akkor az hibát eredményez, mivel a második paraméter még nincs meghatározva, miközben az első paraméterhez van rendelve.

function add(first = second, second) { return first + second;}console.log(add(undefined, 1)); //throws an error

Pihenési paraméterek

A többi paraméter egyszerűen megnevezett paraméter, amelyet három pont (…) előz meg. Ez a megnevezett paraméter tömb lesz, amely tartalmazza a függvényhívás során átadott paraméterek többi részét (azaz a megnevezett paramétereken kívül).

Csak ne feledje, hogy csak egy pihenési paraméter lehet, és ennek az utolsó paraméternek kell lennie. A többi paraméter után nem lehet megnevezett paraméter.

Íme egy példa:

Mint látható, a többi paramétert használtuk az összes kulcs / tulajdonság kinyerésére az átadott objektumból, amely az első paraméter.

A többi paraméter és az 'argumentum objektum' közötti különbség az, hogy az utóbbi tartalmazza a függvényhívás során átadott összes tényleges paramétert, míg a 'többi paraméter' csak azokat a paramétereket tartalmazza, amelyek nem nevezett paraméterek, és amelyeket a függvényhívás során adnak át.

Nyílfunkciók ➡

Az Arrow függvények vagy a „zsír nyíl függvények” új szintaxist vezetnek be a funkciók meghatározásához, amely nagyon tömör. Mi lehet elkerülni gépelési kulcsszavak, mint a function, returnés még zárójelek { }vagy zárójelek ().

Szintaxis

A szintaxis különböző ízekben jelenik meg, a használatunktól függően. Az összes variációnak egy közös vonása van , azaz az argumentumokkal kezdődnek , majd a nyíl ( =>), majd a b ody függvény következik .

Az érvek és a test különböző formákat ölthet. Íme a legalapvetőbb példa:

let mirror = value => value;
// equivalent to:
let mirror = function(value) { return value;};

A fenti példa egyetlen "érték" argumentumot vesz fel (a nyíl előtt), és egyszerűen visszaadja ezt az érvet ( => value;). Amint láthatja , csak a visszatérési érték van, ezért nincs szükség visszatérési kulcsszóra vagy göndör melltartóra, hogy a funkció törzsét be lehessen vonni.

Mivel csak egy argumentum van, nincs szükség zárójelekre is („)”.

Íme egy példa, amely több érvvel segít megérteni ezt:

let add = (no1, no2) => no1 + no2;
// equivalent to:
let add = function(no1, no2) { return no1 + no2;};

Ha egyáltalán nincsenek argumentumok, akkor az alábbiak szerint üres zárójeleket kell megadnia:

let getMessage = () => 'Hello World';
// equivalent to:
let getMessage = function() { return 'Hello World';}

Egy függvénytestnél, amelynek csak visszatérési állítása van, a göndör zárójel opcionális .

Ha egy függvénytestnek nem csak visszatérési állítása van, akkor a testet göndör zárójelbe kell tekernie, csakúgy, mint a hagyományos funkciókat.

Itt egy egyszerű számítási függvény két művelettel - összeadás és kivonás. Testét göndör zárójelbe kell tekerni:

let calculate = (no1, no2, operation) => { let result; switch (operation) { case 'add': result = no1 + no2; break; case 'subtract': result = no1 - no2; break; } return result;};

És mi van akkor, ha olyan funkciót akarunk, amely egyszerűen visszaad egy objektumot? A fordító megzavarodik, hogy a göndör zárójelek az objektum ( er}) vagy a függvénytest göndör zárójelei.()=>{id: numb

A megoldás az objektum zárójelbe zárása. Itt van, hogyan:

let getTempItem = number => ({ id: number});
// effectively equivalent to:
let getTempItem = function(number) { return { id: number };};

Let’s have a look at the final example. In this we’ll use filter function on a sample array of numbers to return all numbers greater than 5,000:

// with arrow functionlet result = sampleArray.filter(element => element > 5000);
// without arrow functionlet result = sampleArray.filter(function(element) { return element > 5000;});

We can see how much less code is necessary compared to the traditional functions.

A few things about arrow functions to keep in mind though:

  • They can’t be called with new, can’t be used as constructors (and therefore lack prototype as well)
  • Arrow functions have their own scope, but there’s no ‘this’ of their own.
  • No arguments object is available. You can use rest parameters however.

Since JavaScript treats functions as first-class, arrow functions make writing functional code like lambda expressions and currying much easier.

"A nyíl funkciók olyanok voltak, mint a rakéta üzemanyag a JavaScript funkcionális programozási robbanásához." - Eric Elliott

Nos, tessék! Talán itt az ideje, hogy elkezdje használni ezeket a funkciókat.

Az ilyen ES6 funkciók egy kis friss levegőt jelentenek, és a fejlesztők egyszerűen imádják használni őket.

Itt van a link az előző bejegyzésemre a változó deklarációkról és az emelésről!

Remélem, hogy ez motiválja Önt az ES6 fejlõdésére, ha még nem tette meg!

Béke ✌️️