de Bhuvan Malik

Funcții JavaScript ES6: părțile bune

Functii JavaScript ES6 partile bune

ES6 oferă câteva noi funcții funcționale care fac programarea în JavaScript mult mai flexibilă. Să vorbim despre unele dintre ele – în mod specific, parametrii impliciți, parametrii de repaus și funcțiile săgeată.

Sfat distractiv: puteți copia și lipi oricare dintre aceste exemple / cod în Babel REPL și puteți vedea cum codul ES6 se transpune în ES5.

Functii JavaScript ES6 partile bune

Valori implicite ale parametrilor

Funcțiile JavaScript au o caracteristică unică care vă permite să transmiteți orice număr de parametri în timpul apelului funcției (parametri reali) indiferent de numărul de parametri prezenți în definiția funcției (parametri formali). Deci, trebuie să includeți parametrii impliciți doar în cazul în care cineva uită să treacă unul dintre parametri.

Cum ar fi implementați parametrii impliciți în ES5

Cele de mai sus par bine atunci când îl rulăm. number2 nu a fost trecut și am verificat acest lucru folosind „||‘operatorul să returneze al doilea operand dacă primul este fals. Astfel, „10” a fost atribuit ca valoare implicită de la number2 este nedefinit.

Există însă o singură problemă. Ce se întâmplă dacă cineva trece „0” ca al doilea argument? ⚠

Abordarea de mai sus ar eșua, deoarece valoarea noastră implicită „10” ar fi atribuită în locul valorii trecute, cum ar fi „0”. De ce? Deoarece „0” este evaluat ca fals!

Să îmbunătățim codul de mai sus, nu-i așa?

Agh! E prea mult cod. Deloc mișto. Să vedem cum o face ES6.

Parametrii impliciți în ES6

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

number1 și number2 li se atribuie valori implicite de „5” și respectiv „10”.
Ei bine, da, cam asta este. Scurt și dulce. Nu există cod suplimentar pentru a verifica dacă există un parametru lipsă. Acest lucru face ca corpul funcției să fie frumos și scurt. ?

NOTĂ: Când o valoare de undefined este trecut pentru un parametru cu argument implicit, așa cum era de așteptat, valoarea trecută este invalid si se atribuie valoarea implicită a parametrului. Dar dacă null este trecut, se consideră valabil si parametrul implicit nu este utilizat iar nul este atribuit parametrului respectiv.

O caracteristică plăcută a parametrilor impliciți este că parametrul implicit nu trebuie neapărat să fie o valoare primitivă și putem, de asemenea, să executăm o funcție pentru a recupera valoarea parametrului implicit. Iată un exemplu:

Parametrii anteriori pot fi, de asemenea, parametri impliciți pentru parametrii care urmează după cum urmează:

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

Dar inversul va arunca o eroare. Adică, dacă al doilea parametru este atribuit ca valoare implicită pentru primul parametru, rezultă o eroare deoarece al doilea parametru nu este încă definit în timp ce este atribuit primului parametru.

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

Parametrii de odihnă

A odihnă parametrul este pur și simplu un parametru numit care este precedat de trei puncte (…). Acest parametru numit devine un tablou care conține restul parametrilor (adică în afară de parametrii numiți) trecuți în timpul apelului funcțional.

Rețineți că nu poate exista decât unul odihnă parametru și trebuie să fie ultimul parametru. Nu putem avea un parametru numit după un parametru de repaus.
Iată un exemplu:

După cum puteți vedea, am folosit parametrul rest pentru a obține toate cheile / proprietățile care trebuie extrase din obiectul trecut, care este primul parametru.

Diferența dintre un parametru de repaus și „obiectul de argumente” este că acesta din urmă conține toți parametrii reali trecuți în timpul apelului de funcție, în timp ce „parametrul de repaus” conține doar parametrii care nu sunt parametri numiți și sunt trecuți în timpul apelului de funcție.

Funcții săgeată ➡

1611268807 999 Functii JavaScript ES6 partile bune

Funcțiile săgeată sau „funcțiile săgeții grase” introduc o nouă sintaxă pentru definirea funcțiilor foarte concisă. Putem evita tastarea cuvintelor cheie precum function, return și chiar paranteze cretate { } și paranteze ().

Sintaxă

Sintaxa vine în diferite arome, în funcție de utilizarea noastră. Toate variantele au un singur lucru uzual, adică încep cu argumente, urmat de săgeată (=>), urmat de tel funcționează body.

Argumentele și corpul pot lua diferite forme. Iată exemplul cel mai de bază:

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

Exemplul de mai sus ia un singur argument „valoare” (înainte de săgeată) și returnează pur și simplu acel argument (=> value;). După cum puteți vedea, există doar valoarea returnată, deci nu este nevoie de cuvânt cheie returnat sau sutien buclatpentru a încheia funcția corpului.

Din moment ce există doar un argument, există nu este nevoie de paranteze “( )” de asemenea.

Iată un exemplu cu mai multe argumente pentru a vă ajuta să înțelegeți acest lucru:

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

Dacă nu există deloc argumente, trebuie să includeți paranteze goale ca mai jos:

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

Pentru un corp funcțional cu doar o declarație return, acoladele sunt opțional.
Pentru un corp de funcții care are mai mult decât o declarație de returnare, trebuie să înfășurați corpul cu aparate dentare la fel ca funcțiile tradiționale.

Iată o funcție simplă de calcul cu două operații – adunare și scădere. Corpul său trebuie să fie înfășurat în acolade:

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

Acum, dacă vrem o funcție care returnează pur și simplu un obiect? Compilatorul se va confunda dacă aparatele dentare sunt ale obiectului (()=>{id: number}) sau acolade cretate ale corpului funcției.

Soluția este să înfășurați obiectul între paranteze. Iată cum:

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

Să aruncăm o privire la ultimul exemplu. În aceasta vom folosi funcția de filtrare pe un eșantion de matrice de numere pentru a returna toate numerele mai mari de 5.000:

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

Putem vedea cât de puțin cod este necesar în comparație cu funcțiile tradiționale.

Câteva lucruri despre funcțiile săgeată de care trebuie să ții cont însă:

  • Nu pot fi chemați cu nou, nu poate fi folosit ca constructori (și, prin urmare, nu are și prototip)
  • Funcțiile săgeată au propriul lor domeniu, dar nu existăacest’ pe cont propriu.
  • Nu argumente obiectul este disponibil. Tu poate utiliza parametrii de odihnă totuși.

Deoarece JavaScript tratează funcțiile ca fiind de primă clasă, funcțiile săgeată facilitează scrierea codului funcțional precum expresiile lambda și cursarea.

„Funcțiile săgeții erau ca un combustibil pentru rachete pentru explozia de programare funcțională din JavaScript.” – Eric Elliott

Ei bine, iată-te! Poate că este timpul să începeți să utilizați aceste caracteristici.

Funcțiile ES6 ca acestea sunt o gură de aer proaspăt, iar dezvoltatorilor le place să le folosească.

1611268808 231 Functii JavaScript ES6 partile bune

Iată legătură la postarea mea anterioară despre declarații variabile și ridicare!
Sper că acest lucru vă motivează să luați ES6 în față, dacă nu ați făcut-o deja!

Pace ✌️️