JavaScript ES6 caracteristici

în acest tutorial veți afla despre noile caracteristici în cea mai recentă versiune de JavaScript.

ce este ECMAScript 6 (sau ES6)

ECMAScript 2015 (sau ES6) este a șasea și cea mai importantă ediție a standardului de specificație a limbajului ECMAScript. Acesta definește standardul pentru implementarea JavaScript.

ES6 a adus modificări semnificative în limba JavaScript., Acesta introduce mai multe caracteristici noi, cum ar fi, variabile bloc-scoped, buclă nouă pentru iterarea peste matrice și obiecte, literals șablon, și multe alte îmbunătățiri pentru a face programarea JavaScript mai ușor și mai distractiv. În acest capitol, vom discuta despre unele dintre cele mai bune caracteristici ES6 pe care le puteți utiliza în codificarea JavaScript de zi cu zi.

cuvântul cheie let

ES6 introduce noul let cuvânt cheie pentru declararea variabilelor. Înainte de ES6, singura modalitate de a declara o variabilă în JavaScript a fost cuvântul cheie var., Să vedem care este diferența dintre ele este.

Există două diferențe importante între var și let. Variabilele declarate cu var cuvinte cheie sunt funcție de domeniul și arborat la partea de sus, în domeniul său de aplicare, întrucât variabilele declarate cu let cuvinte cheie sunt block-luneta ({}) și nu sunt arborat.

Block scoping înseamnă pur și simplu că un nou domeniu de aplicare este creat între o pereche de paranteze buclat adică {}., Prin urmare, dacă se declară o variabilă cu let cuvinte cheie în interiorul unei bucle, ea nu există în afara buclei, cum s-a demonstrat în exemplul următor:

după Cum puteți vedea în exemplul de mai sus variabila i în primul bloc nu este accesibil din afara for bucla. Acest lucru, de asemenea, ne permite de a reutiliza același nume de variabilă de mai multe ori ca domeniul său de aplicare este limitat la bloc ({}), care rezultă în mai puțin declarație de variabilă și mai curat cod.,

cuvântul cheie const

noul cuvânt cheie const face posibilă definirea constantelor. Constantele sunt doar în citire, nu le puteți realoca noi valori. Ele sunt, de asemenea, bloc-scoped ca let.

const PI = 3.14;console.log(PI); // 3.14PI = 10; // error

cu toate acestea, puteți schimba în continuare proprietăți obiect sau elemente de matrice:

pentru…de buclă

noulfor...of buclă ne permite să iterăm foarte ușor peste matrice sau alte obiecte iterabile., De asemenea, codul din interiorul buclei este executat pentru fiecare element al obiectului iterabil. Iată un exemplu:

for...of bucla nu lucrează cu obiecte, deoarece acestea nu sunt iterable. Dacă doriți să iterați proprietățile unui obiect, puteți utiliza bucla for-in.template literals oferă un mod ușor și curat creați șiruri cu mai multe linii și efectuați interpolarea șirurilor. Acum putem încorpora variabile sau expresii într-un șir de caractere, la orice loc, fără nici o hassle.,șabloanele literale sunt create folosind caracterul back-tick (` `) (Accent grav) în loc de ghilimelele obișnuite duble sau simple. Variabilele sau expresiile pot fi plasate în interiorul șirului folosind sintaxa ${...}. Comparați următoarele exemple și vedeți cât de util este:

în timp ce în ES5, pentru a obține același lucru a trebuit să scriem ceva de genul:

valori implicite pentru parametrii funcției

acum, în ES6 puteți specifica valori implicite la parametrii funcției., Acest lucru înseamnă că, dacă nu sunt furnizate argumente pentru a funcționa atunci când se numește acești parametri valori implicite vor fi utilizate. Aceasta este una dintre cele mai așteptate caracteristici din JavaScript. Iată un exemplu:

în timp ce în ES5, pentru a realiza același lucru, a trebuit să scriem ceva de genul:

funcții săgeată

funcțiile săgeată sunt o altă caracteristică interesantă în ES6. Acesta oferă o sintaxă mai concisă pentru scrierea expresiilor funcției prin renunțarea la cuvintele cheie functionși return.,

funcțiile Arrow sunt definite folosind o nouă sintaxă, notația fat arrow (=>). Hai să vedem cum arată:

după Cum puteți vedea thre nu function și return cuvinte cheie în săgeată funcția de declarație.

de asemenea, puteți sări peste paranteze, adică () în cazul în care există exact un parametru, dar va trebui întotdeauna să îl utilizați atunci când aveți zero sau mai mult de un parametru.,în plus, dacă există mai multe expresii în corpul funcției, trebuie să o înfășurați cu bretele ({}). În acest caz, trebuie să utilizați instrucțiunea return pentru a returna o valoare.există mai multe variante ale modului în care puteți scrie funcții săgeată. Iată cele mai frecvent utilizate:

există o diferență importantă între funcțiile obișnuite și funcțiile săgeată., Spre deosebire de o funcție normală, o funcție săgeată nu are propria this, este nevoie de this din funcția exterioară unde este definită. În JavaScript, this este contextul curent de execuție al unei funcții.,

Pentru a înțelege acest lucru în mod clar, să verificați următoarele exemple:

Rescrierea același exemplu folosind ES6 șablon literale și săgeata funcția:

după Cum puteți vedea în mod clar, this cuvinte cheie în exemplul de mai sus se referă la contextul funcția de închidere săgeata funcție care este Persoană obiect (linia nr-9), spre deosebire de exemplul anterior, unde se face referire la obiectul global Fereastră (linia nr-9).

clase

în ECMAScript 5 și mai devreme, clase nu au existat niciodată în JavaScript., Clasele sunt introduse în ES6 care arată similar cu clasele din alte limbaje orientate obiect, cum ar fi Java, PHP, etc., cu toate acestea, ele nu funcționează exact în același mod. Clasele ES6 facilitează crearea obiectelor, implementarea moștenirii utilizând cuvântul cheie extends și reutilizarea codului.

în ES6 puteți declara o clasă folosind noul class cuvânt cheie urmat de un nume de clasă. Prin convenție, numele claselor sunt scrise în Titlucase (adică capitalizarea primei litere a fiecărui cuvânt).,

în exemplul de mai sus, clasa pătrată moștenește din dreptunghi folosind cuvântul cheie extends. Clasele care moștenesc din alte clase sunt denumite clase derivate sau clase de copii.

de Asemenea, trebuie să sunați super() în clasa copil constructor înainte de a accesa context (this)., De exemplu, dacă omiteți super() și numim getArea() metoda pe piața obiect va rezulta într-o eroare, deoarece getArea() metoda necesită acces la this cuvinte cheie.

module

înainte de ES6, nu existau suport nativ pentru module în JavaScript. Totul în interiorul unei aplicații JavaScript, de exemplu variabile în diferite fișiere JavaScript, partajat același domeniu de aplicare.ES6 introduce modulul bazat pe fișiere, în care fiecare modul este reprezentat de un fișier separat .js., Acum, puteți folosi export sau import declarație într-un modul de export sau import variabile, funcții, clase sau orice altă entitate la/de la alte module sau fișiere.

să creăm un modul, adică un fișier JavaScript „main.js ” și plasați următorul cod în el:

acum creați un alt fișier JavaScript „app.js ” cu următorul cod:

în cele din urmă creați un fișier HTML „test.html ” și cu următorul cod și deschideți acest fișier HTML în browserul dvs. folosind protocolul HTTP (sau utilizați localhost). De asemenea, observați type="module" pe eticheta script.,

parametrii Rest

ES6 introduce parametrii rest care ne permit să trecem un număr arbitrar de parametri unei funcții sub forma unei matrice. Acest lucru este deosebit de util în situațiile în care doriți să treceți parametrii la o funcție, dar nu aveți idee de câte veți avea nevoie.

un parametru rest este specificat prin prefixarea unui parametru numit cu operatorul rest (...) adică trei puncte. Parametrul Rest poate fi ultimul din lista de parametri și poate exista un singur parametru rest., Uitați-vă la următorul exemplu, pentru a vedea cum funcționează:

când parametrul rest este singurul parametru dintr-o funcție, acesta primește toate argumentele transmise funcției, altfel primește restul argumentelor care depășesc numărul de parametri numiți.

operatorul de răspândire

operatorul de răspândire, care este de asemenea notat cu (...), îndeplinește funcția exactă opusă operatorului rest. Răspândirea operator se întinde (adică se desparte) o matrice și trece valorile în funcția specificată, după cum se arată în următorul exemplu:

răspândirea operator poate fi de asemenea utilizat pentru a introduce elementele unei matrice într-o altă matrice fără a utiliza matrice metode, cum ar fi push(), unshift() concat(), etc.,atribuirea destructurare este o expresie care îl face ușor de a extrage valori din matrice, sau proprietăți de obiecte, în variabile distincte prin furnizarea de o sintaxă mai scurtă.

există două tipuri de expresii de atribuire destructurare—atribuirea matrice și obiect destructurare.,face același lucru într-o singură linie, folosind matrice de destructurare misiune:

de asemenea, puteți utiliza restul de operator în matrice de destructurare misiune, așa cum se arată aici:

obiectul de destructurare misiune

În ES5 pentru a extrage valorile de proprietate a unui obiect de care avem nevoie pentru a scrie ceva de genul:

Dar în ES6, puteți extrage obiect valorile de proprietate și să le atribuie variabilelor cu ușurință așa:

cele Mai multe dintre caracteristicile de care am discutat mai sus sunt acceptate în cea mai recentă versiune de marile browsere web, cum ar fi Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, etc.,