Cum să utilizați argumentele și parametrii ES6

ECMAScript 6 (sau ECMAScript 2015) este cea mai nouă versiune a standardului ECMAScript și a îmbunătățit remarcabil gestionarea parametrilor în JavaScript. Putem folosi acum parametrii de repaus, valorile implicite și destructurarea, printre alte caracteristici noi.

În acest tutorial, vom explora argumentele și parametrii în detaliu și vom vedea cum le-a actualizat ECMAScript 6.

Argumente versus parametri

Argumentele și parametrii sunt adesea menționate în mod interschimbabil. Cu toate acestea, în scopul acestui tutorial, vom face o distincție. În majoritatea standardelor, parametrii (sau parametrii formali) sunt ceea ce este dat în declarația funcției, iar argumentele (sau parametrii reali) sunt ceea ce este transmis funcției. Luați în considerare această funcție:

 function foo(param1, param2) { // do something } foo(10, 20);

În această funcție, param1 și param2 sunt parametrii funcției, iar valorile transmise funcției ( 10 și 20 ) sunt argumente.

Operator Spread (…)

În ECMAScript 5, metoda apply() este un instrument convenabil pentru a transmite o matrice ca argumente unei funcții. De exemplu, este folosit în mod obișnuit cu metoda Math.max() pentru a găsi cea mai mare valoare dintr-o matrice. Luați în considerare acest fragment de cod:

 var myArray = [5, 10, 50]; Math.max(myArray); // Error: NaN Math.max.apply(Math, myArray); // 50

Metoda Math.max() nu acceptă matrice; acceptă doar numere. Când o matrice este transmisă funcției Math.max() , ea aruncă o eroare. Dar când se folosește metoda apply() , matricea este trimisă ca numere individuale, astfel încât metoda Math.max() o poate gestiona.

Din fericire, odată cu introducerea operatorului de răspândire în ECMAScript 6, nu mai trebuie să folosim metoda apply() . Cu operatorul de răspândire, putem extinde cu ușurință o expresie în mai multe argumente:

 var myArray = [5, 10, 50]; Math.max(...myArray); // 50

Aici, operatorul de răspândire extinde myArray pentru a crea valori individuale pentru funcție. Deși simularea operatorului de împrăștiere folosind apply() în ECMAScript 5 este posibilă, sintaxa este confuză și nu are flexibilitatea operatorului de împrăștiere. Operatorul de împrăștiere nu numai că este mai ușor de utilizat, dar include mai multe caracteristici. De exemplu, poate fi folosit de mai multe ori și poate fi amestecat cu alte argumente într-un apel de function :

 function myFunction() { for(var i in arguments){ console.log(arguments[i]); } } var params = [10, 15]; myFunction(5, ...params, 20, ...[25]); // 5 10 15 20 25

Un alt avantaj al operatorului de răspândire este că poate fi utilizat cu ușurință cu constructori:

 new Date(...[2016, 5, 6]); // Mon Jun 06 2016 00:00:00 GMT-0700 (Pacific Daylight Time)

Desigur, am putea rescrie codul precedent în ECMAScript 5, dar ar trebui să folosim un model complicat pentru a evita o eroare de tip:

 new Date.apply(null, [2016, 4, 24]); // TypeError: Date.apply is not a constructor new (Function.prototype.bind.apply(Date, [null].concat([2016, 5, 6]))); // Mon Jun 06 2016 00:00:00 GMT-0700 (Pacific Daylight Time)

Răspândiți asistență pentru browserul operatorului în apelurile de funcție

Browsere desktop:

Browsere mobile:

Parametrii de odihnă

Parametrul rest are aceeași sintaxă ca și operatorul de răspândire, dar în loc să extindă o matrice în parametri, colectează parametrii și îi transformă într-o matrice.

 function myFunction(...options) { return options; } myFunction('a', 'b', 'c'); // ["a", "b", "c"]

Dacă nu există argumente, parametrul rest va fi setat la o matrice goală:

 function myFunction(...options) { return options; } myFunction(); // []

Un parametru rest este util în special atunci când se creează o funcție variadică (o funcție care acceptă un număr variabil de argumente). Având avantajul de a fi matrice, parametrii rest pot înlocui cu ușurință obiectul arguments (pe care îl vom explica mai târziu în acest tutorial). Luați în considerare această funcție, scrisă în ECMAScript 5:

 function checkSubstrings(string) { for (var i = 1; i < arguments.length; i++) { if (string.indexOf(arguments[i]) === -1) { return false; } } return true; } checkSubstrings('this is a string', 'is', 'this'); // true

Această funcție verifică dacă un șir conține un număr de subșiruri. Prima problemă cu această funcție este că trebuie să ne uităm în interiorul corpului function pentru a vedea că este nevoie de mai multe argumente. A doua problemă este că iterația trebuie să înceapă de la 1 în loc de 0 , deoarece arguments[0] indică primul argument. Dacă mai târziu decidem să adăugăm un alt parametru înainte sau după șir, s-ar putea să uităm să actualizăm bucla. Cu restul parametrilor, evităm cu ușurință aceste probleme:

 function checkSubstrings(string, ...keys) { for (var key of keys) { if (string.indexOf(key) === -1) { return false; } } return true; } checkSubstrings('this is a string', 'is', 'this'); // true

Ieșirea acestei funcții este aceeași cu cea anterioară. Din nou, string de parametri este umplut cu argumentul care este transmis primul, dar restul argumentelor sunt puse într-o matrice și atribuite keys variabile.

Utilizarea parametrului rest în locul obiectului arguments îmbunătățește lizibilitatea codului și evită problemele de optimizare în JavaScript. Cu toate acestea, parametrul de odihnă nu este lipsit de limitări. De exemplu, trebuie să fie ultimul argument; în caz contrar, va apărea o eroare de sintaxă:

 function logArguments(a, ...params, b) { console.log(a, params, b); } logArguments(5, 10, 15); // SyntaxError: parameter after rest parameter

O altă limitare este că este permis un singur parametru rest în declarația function :

 function logArguments(...param1, ...param2) { } logArguments(5, 10, 15); // SyntaxError: parameter after rest parameter

Suport pentru browser Rest Parameters

Browsere desktop:

Browsere mobile:

Parametrii impliciti

Parametrii impliciti în ECMAScript 5

JavaScript nu acceptă parametrii impliciti în ECMAScript 5, dar există o soluție simplă. Folosind un operator logic OR ( || ) în interiorul funcției, putem simula cu ușurință parametrii impliciti în ECMAScript 5. Luați în considerare această funcție:

 function foo(param1, param2) { param1 = param1 || 10; param2 = param2 || 10; console.log(param1, param2); } foo(5, 5); // 5 5 foo(5); // 5 10 foo(); // 10 10

Această funcție așteaptă două argumente, dar când este apelată fără argumente, va folosi valorile implicite. În interiorul funcției, argumentele lipsă sunt setate automat la nedefinite; deci, putem detecta aceste argumente și declara valori implicite pentru ele. Pentru a detecta argumentele lipsă și pentru a seta valorile implicite, folosim operatorul logic OR ( || ). Acest operator examinează primul argument: dacă este adevărat, operatorul îl returnează; dacă nu este, operatorul returnează al doilea argument.

Această abordare este folosită în mod obișnuit în funcții, dar are un defect. Trecerea 0 sau null va declanșa și o valoare implicită, deoarece acestea sunt considerate valori false. Deci, dacă chiar trebuie să transmitem 0 sau null acestei funcție, am avea nevoie de o modalitate alternativă de a verifica dacă lipsește un argument:

 function foo(param1, param2) { if(param1 === undefined){ param1 = 10; } if(param2 === undefined){ param2 = 10; } console.log(param1, param2); } foo(0, null); // 0, null foo(); // 10, 10

În cadrul acestei funcții, tipurile de argumente transmise sunt verificate pentru a vă asigura că sunt nedefinite înainte de a fi atribuite valori implicite. Această abordare necesită doar puțin mai mult cod, dar este o alternativă mai sigură și ne permite să trecem 0 și null funcției.

Parametrii impliciti în ECMAScript 6

Cu ECMAScript 6, nu mai trebuie să verificăm valorile nedefinite pentru a simula parametrii impliciti. Acum putem pune valorile implicite chiar în declarația function :

 function foo(a = 10, b = 10) { console.log(a, b); } foo(5); // 5 10 foo(0, null); // 0 null

După cum puteți vedea, omiterea unui argument declanșează valoarea implicită, dar trecerea 0 sau null nu va face. Putem folosi chiar și funcții pentru a prelua valori pentru parametrii impliciti:

 function getParam() { alert("getParam was called"); return 3; } function multiply(param1, param2 = getParam()) { return param1 * param2; } multiply(2, 5); // 10 multiply(2); // 6 (also displays an alert dialog)

Rețineți că funcția getParam este apelată numai dacă al doilea argument este omis. Deci, atunci când apelăm funcția multiply() cu doi parametri, alerta nu va fi afișată.

O altă caracteristică interesantă a parametrilor impliciti este că ne putem referi la alți parametri și variabile în declarația function :

 function myFunction(a=10, b=a) { console.log('a = ' + a + '; b = ' + b); } myFunction(); // a=10; b=10 myFunction(22); // a=22; b=22 myFunction(2, 4); // a=2; b=4

Puteți chiar să efectuați operații în declarația function :

 function myFunction(a, b = ++a, c = a*b) { console.log(c); } myFunction(5); // 36

Rețineți că, spre deosebire de alte limbi, JavaScript evaluează parametrii impliciti la momentul apelului:

 function add(value, array = []) { array.push(value); return array; } add(5); // [5] add(6); // [6], not [5, 6]

Suport implicit pentru browser pentru parametri

Browsere desktop:

Browsere mobile:

Destructurarea

Destructurarea este o caracteristică nouă în ECMAScript 6 care ne permite să extragem valori din matrice și obiect și să le atribuim variabilelor folosind o sintaxă care este similară cu literalele obiect și matrice. Sintaxa este clară și ușor de înțeles și este deosebit de utilă atunci când se transmit argumente unei funcții.

În ECMAScript 5, un obiect de configurare este adesea folosit pentru a gestiona un număr mare de parametri opționali, mai ales când ordinea proprietăților nu contează. Luați în considerare această funcție:

 function initiateTransfer(options) { var protocol = options.protocol, port = options.port, delay = options.delay, retries = options.retries, timeout = options.timeout, log = options.log; // code to initiate transfer } options = { protocol: 'http', port: 800, delay: 150, retries: 10, timeout: 500, log: true }; initiateTransfer(options);

Acest model este folosit în mod obișnuit de dezvoltatorii JavaScript și funcționează bine, dar trebuie să ne uităm în interiorul corpului function pentru a vedea la ce parametri se așteaptă. Cu parametrii destructurați, putem indica clar parametrii în declarația function :

 function initiateTransfer({protocol, port, delay, retries, timeout, log}) { // code to initiate transfer }; var options = { protocol: 'http', port: 800, delay: 150, retries: 10, timeout: 500, log: true } initiateTransfer(options);

În această funcție, am folosit un model de destructurare a obiectelor, în loc de un obiect de configurare. Acest lucru face ca funcția noastră să fie nu numai mai concisă, dar și mai ușor de citit.

De asemenea, putem combina parametrii destructurați cu cei obișnuiți:

 function initiateTransfer(param1, {protocol, port, delay, retries, timeout, log}) { // code to initiate transfer } initiateTransfer('some value', options);

Rețineți că o eroare de tip va fi generată dacă parametrii sunt omiși în apelul function :

 function initiateTransfer({protocol, port, delay, retries, timeout, log}) { // code to initiate transfer } initiateTransfer(); // TypeError: Cannot match against 'undefined' or 'null'

Acesta este comportamentul dorit atunci când avem nevoie de parametrii solicitați, dar dacă vrem ca aceștia să fie opționali? Pentru a preveni această eroare atunci când parametrii lipsesc, trebuie să atribuim o valoare implicită parametrilor destructurați:

 function initiateTransfer({protocol, port, delay, retries, timeout, log} = {}) { // code to initiate transfer } initiateTransfer(); // no error

În această funcție, un obiect gol este furnizat ca valoare implicită pentru parametrii destructurați. Acum, dacă această funcție este apelată fără niciun parametru, nu va apărea nicio eroare.

De asemenea, putem atribui o valoare implicită fiecărui parametru destructurat:

 function initiateTransfer({ protocol = 'http', port = 800, delay = 150, retries = 10, timeout = 500, log = true }) { // code to initiate transfer }

În acest exemplu, fiecare proprietate are un parametru implicit, eliminând nevoia de a verifica manual parametrii nedefiniți și de a atribui valori implicite în corpul function .

Destructurarea suportului pentru browser

Browsere desktop:

Browsere mobile:

Argumente de trecere

Există două moduri de a transmite argumente unei funcții: prin referință sau prin valoare. Modificarea unui argument care este transmis prin referință este reflectată global, dar modificarea unui argument care este transmis prin valoare este reflectată numai în interiorul funcției.

În unele limbi, cum ar fi Visual Basic și PowerShell, avem opțiunea de a specifica dacă se transmite un argument prin referință sau după valoare, dar nu este cazul cu JavaScript.

Trecerea argumentelor după valoare

Din punct de vedere tehnic, JavaScript poate trece numai prin valoare. Când trecem un argument unei funcții după valoare, o copie a acelei valori este creată în domeniul de aplicare al function . Astfel, orice modificări ale valorii sunt reflectate numai în interiorul function . Luați în considerare acest exemplu:

 var a = 5; function increment(a) { a = ++a; console.log(a); } increment(a); // 6 console.log(a); // 5

Aici, modificarea argumentului din interiorul funcției nu are niciun efect asupra valorii inițiale. Deci, atunci când variabila este înregistrată din afara funcției, valoarea imprimată este încă 5 .

Trecerea argumentelor prin referință

În JavaScript, totul este transmis după valoare, dar când trecem o variabilă care se referă la un obiect (inclusiv matrice), „valoarea” este o referință la obiect, iar modificarea unei proprietăți a unui obiect referit de o variabilă schimbă obiectul de bază.

Luați în considerare această funcție:

 function foo(param){ param.bar = 'new value'; } obj = { bar : 'value' } console.log(obj.bar); // value foo(obj); console.log(obj.bar); // new value

După cum puteți vedea, proprietatea obiectului este modificată în interiorul funcției, dar valoarea modificată este vizibilă în afara funcției.

Când trecem o valoare neprimitivă, cum ar fi o matrice sau un obiect, în spatele scenei este creată o variabilă care indică locația obiectului original în memorie. Această variabilă este apoi transmisă funcției, iar modificarea acesteia va afecta obiectul original.

Verificarea tipului și parametrii lipsă sau suplimentari

Într-un limbaj puternic tipizat, trebuie să specificăm tipul de parametri în declarația function , dar JavaScript nu are această caracteristică. În JavaScript, nu contează ce tip de date sau câte argumente transmitem unei funcții.

Să presupunem că avem o funcție care acceptă un singur argument. Când apelăm acea funcție, nu ne limităm să transmitem un singur argument funcției; suntem liberi să transmitem unul, două sau mai multe argumente! S-ar putea chiar să alegem să nu trecem deloc și nu vor apărea erori.

Numărul de argumente și parametri poate diferi în două moduri:

• Mai puține argumente decât parametri .
  Parametrii lipsă vor fi undefined .
• Mai multe argumente decât parametri .
  Parametrii suplimentari vor fi ignorați, dar pot fi recuperați prin argumentele variabilelor speciale de tip matrice (discutate în continuare).

Argumente obligatorii

Dacă un argument lipsește într-un apel de function , acesta va fi setat la undefined . Putem profita de acest comportament și aruncăm o eroare dacă un argument este omis:

 function foo(mandatory, optional) { if (mandatory === undefined) { throw new Error('Missing parameter: mandatory'); } }

În ECMAScript 6, putem duce acest lucru mai departe și folosim parametrii impliciti pentru a seta argumente obligatorii:

 function throwError() { throw new Error('Missing parameter'); } function foo(param1 = throwError(), param2 = throwError()) { // do something } foo(10, 20); // ok foo(10); // Error: missing parameter

Obiectul Argumentelor

Suportul pentru parametrii de odihnă a fost adăugat la ECMAScript 4 cu intenția de a înlocui obiectul arguments , dar ECMAScript 4 nu a ajuns niciodată la bun sfârșit. Odată cu lansarea ECMAScript 6, JavaScript acceptă acum oficial parametrii de rest. De asemenea, a anulat planul de a renunța la suportul pentru obiectul arguments .

Obiectul arguments este un obiect asemănător matricei care este disponibil în toate funcțiile. Permite ca valorile argument transmise funcției să fie preluate prin număr, mai degrabă decât după nume. Obiectul ne permite să transmitem orice număr de argumente unei funcții. Luați în considerare următorul fragment de cod:

 function checkParams(param1) { console.log(param1); // 2 console.log(arguments[0], arguments[1]); // 2 3 console.log(param1 + arguments[0]); // 2 + 2 } checkParams(2, 3);

Această funcție se așteaptă să primească un singur argument. Când îl numim cu două argumente, primul argument este accesibil în funcție prin numele parametrului param1 sau arguments object arguments[0] , dar al doilea argument este accesibil doar ca arguments[1] . De asemenea, rețineți că obiectul arguments poate fi folosit împreună cu argumente numite.

Obiectul arguments conține o intrare pentru fiecare argument transmis funcției, iar indexul primei intrări începe de la 0 . Dacă am dori să accesăm mai multe argumente în exemplul de mai sus, am scrie arguments[2] , arguments[3] și așa mai departe.

Am putea chiar să omitem cu totul setarea parametrilor numiți și să folosim doar obiectul arguments :

 function checkParams() { console.log(arguments[1], arguments[0], arguments[2]); } checkParams(2, 4, 6); // 4 2 6

De fapt, parametrii numiți sunt o comoditate, nu o necesitate. În mod similar, parametrii rest pot fi utilizați pentru a reflecta argumentele transmise:

 function checkParams(...params) { console.log(params[1], params[0], params[2]); // 4 2 6 console.log(arguments[1], arguments[0], arguments[2]); // 4 2 6 } checkParams(2, 4, 6);

Obiectul arguments este un obiect asemănător matricei, dar îi lipsesc metodele matrice precum slice() și foreach() . Pentru a utiliza metode matrice pe obiectul arguments , obiectul trebuie mai întâi convertit într-o matrice reală:

 function sort() { var a = Array.prototype.slice.call(arguments); return a.sort(); } sort(40, 20, 50, 30); // [20, 30, 40, 50]

În această funcție, Array.prototype.slice.call() este folosit ca o modalitate rapidă de a converti obiectul arguments într-o matrice. Apoi, metoda sort() sortează elementele matricei și le returnează.

ECMAScript 6 are o modalitate și mai simplă. Array.from() , o nouă adăugare în ECMAScript 6, creează o nouă matrice din orice obiect asemănător matricei:

 function sort() { var a = Array.from(arguments); return a.sort(); } sort(40, 20, 50, 30); // [20, 30, 40, 50]

Proprietatea Length

Deși obiectul arguments nu este din punct de vedere tehnic o matrice, are o proprietate de length care poate fi folosită pentru a verifica numărul de argumente transmise unei funcții:

 function countArguments() { console.log(arguments.length); } countArguments(); // 0 countArguments(10, null, "string"); // 3

Folosind proprietatea length , avem un control mai bun asupra numărului de argumente transmise unei funcții. De exemplu, dacă o funcție necesită două argumente pentru a funcționa, am putea folosi proprietatea length pentru a verifica numărul de argumente transmise și a arunca o eroare dacă acestea sunt mai puține decât se aștepta:

 function foo(param1, param2) { if (arguments.length < 2) { throw new Error("This function expects at least two arguments"); } else if (arguments.length === 2) { // do something } }

Parametrii rest sunt matrice, deci au o proprietate de length . În ECMAScript 6, codul precedent poate fi rescris cu parametrii rest:

 function foo(...params) { if (params.length < 2) { throw new Error("This function expects at least two arguments"); } else if (params.length === 2) { // do something } }

Proprietățile apelantului și apelantului

Proprietatea caller callee referă la funcția care a apelat funcția care se execută în prezent. În modul strict ECMAScript 5, aceste proprietăți sunt depreciate, iar încercarea de a le accesa provoacă o eroare de tip.

Proprietatea arguments.callee este utilă în funcțiile recursive (o funcție recursivă este o funcție obișnuită care se referă la ea însăși prin numele ei), mai ales când numele funcției nu este disponibil (o funcție anonimă). Deoarece o funcție anonimă nu are un nume, singura modalitate de a face referire la ea este prin arguments.callee .

 var result = (function(n) { if (n <= 1) { return 1; } else { return n * arguments.callee(n - 1); } })(4); // 24

Argumente obiect în moduri stricte și non-strict

În modul non-strict ECMAScript 5, obiectul arguments are o caracteristică neobișnuită: își păstrează valorile sincronizate cu valorile parametrilor numiți corespunzători.

Luați în considerare următorul fragment de cod:

 function foo(param) { console.log(param === arguments[0]); // true arguments[0] = 500; console.log(param === arguments[0]); // true return param } foo(200); // 500

În cadrul acestei funcții, o nouă valoare este atribuită arguments[0] . Deoarece valorile arguments rămân întotdeauna sincronizate cu valorile parametrilor numiți, modificarea la arguments[0] va schimba și valoarea param . De fapt, sunt ca două nume diferite pentru aceeași variabilă. În modul strict ECMAScript 5, acest comportament confuz al obiectului arguments a fost eliminat:

 "use strict"; function foo(param) { console.log(param === arguments[0]); // true arguments[0] = 500; console.log(param === arguments[0]); // false return param } foo(200); // 200

De data aceasta, schimbarea arguments[0] nu afectează param , iar rezultatul este așa cum era de așteptat. Ieșirea acestei funcții în ECMAScript 6 este aceeași ca în modul strict ECMAScript 5, dar rețineți că atunci când valorile implicite sunt utilizate în declarația function , obiectul arguments nu este afectat:

 function foo(param1, param2 = 10, param3 = 20) { console.log(param1 === arguments[0]); // true console.log(param2 === arguments[1]); // true console.log(param3 === arguments[2]); // false console.log(arguments[2]); // undefined console.log(param3); // 20 } foo('string1', 'string2');

În această funcție, chiar dacă param3 are o valoare implicită, nu este egal cu arguments[2] deoarece numai două argumente sunt transmise funcției. Cu alte cuvinte, setarea valorilor implicite nu are niciun efect asupra obiectului arguments .

Concluzie

ECMAScript 6 a adus sute de îmbunătățiri mici și mari pentru JavaScript. Din ce în ce mai mult, dezvoltatorii folosesc funcțiile ECMAScript 6, iar în curând aceste funcții vor fi inevitabile. În acest tutorial, am învățat cum ECMAScript 6 a îmbunătățit gestionarea parametrilor în JavaScript, dar tocmai am zgâriat suprafața lui ECMAScript 6. O mulțime de alte caracteristici noi și interesante ale limbajului merită verificate.

Legături

• Tabelul de compatibilitate ECMAScript 6, Juriy Zaytsev
• „ECMAScript 2015 Language Specification”, ECMA International