JavaScript modern cu ES6-ES13 (Tutorial JS)

Aceasta este ceea ce te așteaptă în acest curs JavaScript ES6.

JavaScript există de mulți ani în browsere. Aproape fiecare site web conține mai mult sau mai puțin cod JS. Chiar dacă primele versiuni erau destul de stângace, până acum s-a putut lucra destul de bine cu standardul ES5, cel puțin dacă se puteau ocoli cu pricepere capcanele și problemele imprevizibile. Deci de ce să înveți ceva nou și să nu rămâi la ce e deja verificat? În această lecție voi prezenta avantajele noului standard ES6 și motivele pentru care nu poți efectiv să renunți la el.

Această lecție prezintă o modalitate de configurare a unui mediu de dezvoltare. În acest sens, folosim ca IDE Visual Studio Code de la Microsoft și ViteJS ca server de dezvoltare.

Până și inclusiv în ES5, cuvântul cheie var era singura modalitate de a declara variabile și, cu particularitățile sale, adesea ducea la comportamente nedorite sau chiar erori. ES6 introduce cele două noi cuvinte cheie let și const, care corectează unele neajunsuri ale lui var.

Buclele For sunt cunoscute de fiecare dezvoltator web. Ele sunt adesea folosite pentru a itera prin array-uri. Cu ES6 există o variantă a buclei For care permite acest lucru mult mai scurt și compact.

Funcțiile sunt esențiale în JS și au fost declarate și definite până acum doar prin cuvântul cheie function. ES6 introduce o modalitate foarte elegantă și scurtă de a scrie codul, care nu numai că îl face mai ușor de citit, ci oferă și o soluție pentru o problemă persistentă cu this.

Parametrii optionali pot fi realizati intr-un mod destul de complicat in ES5 si nu sunt evidenti pentru cel care apeleaza functia. Cu ES6, parametrii optionali cu valorile lor implicite pot fi scrisi direct in semnatura functiei.

Descompunerea permite extragerea selectivă a elementelor din obiecte și din tablouri. O privire mai atentă dezvăluie multe posibilități de utilizare, care fac codul JS mai elegant și compact.

Manipularea variabilei arguments era necesară până în ES6 pentru a permite un număr variabil de parametri în funcții. Acest lucru este mult mai ușor în ES6 cu așa-numiții parametri rest.

Nu doar la definițiile de funcții, operatorul ... este utilizat pentru parametrii rest, ci poate fi folosit și în destructurarea de array-uri pentru a captura "restul" elementelor și a le pune la dispoziție sub formă de array.

Nu numai la tablouri se poate folosi operatorul rest, ci și la obiecte poate captura proprietățile rămase și le poate pune la dispoziție sub formă de obiect.

Opusul operatorului rest este operatorul spread. Arată la fel (…), dar se află pe partea opusă a unei atribuiri și împrăștie array-ul în componente individuale.

„Trucul“ cu operatorul de răspândire funcționează foarte bine și în cazul obiectelor. Astfel, se pot „amesteca” obiecte în alte obiecte. Cu Object.assign(), există, totuși, o alternativă foarte bună pentru aceasta.

Funcțiile în literalii de obiecte sunt foarte greoaie de scris cu cuvântul cheie function-. Cu ES6 ele pot fi însă scrise mult mai scurt și mai concis.

Lucrul cu șiruri de caractere face parte din trusa de instrumente de bază a fiecărui programator. Este bine că ES6 oferă unele funcții noi și foarte utile pentru șiruri, care economisesc o mulțime de muncă la scriere.

Nu există alt mod de a spune: Șirurile multilinie cu valori de variabile încorporate erau o mare problemă până la ES6 și, de asemenea, foarte neplăcute de citit. Șirurile template-uri noi din ES6, în schimb, sunt un adevărat deliciu sintactic.

Chiar și cu ES5, există câteva funcții de tablouri foarte utile, care urmează un abordare mai funcțională. ES6 a adăugat încă câteva altele care fac lucrul cu tablourile și mai plăcut. Totuși, aici se acordă apreciere și unor funcții "mai vechi", deja existente în ES5.

Obiectele au putut să fie întotdeauna folosite ca un depozit de tip cheie-valoare sau dicționar, dar cu câteva dezavantaje. Noua structură de date Map elimină aceste dezavantaje și oferă funcționalitate solidă de dicționar, așa cum este cunoscut din alte limbaje de programare.

Operațiile asincrone pot fi gestionate cu funcții de tip apel însă există riscul ca adâncimea îmbinărilor să devină prea mare și codul să devină neprieteno cu ochiul (așa-numitul "Iad al apelurilor"). Promisiunile rezolvă această problemă, evitând îmbinările adânci și permind concatenarea operațiilor asincrone pe același nivel.

După ce promisiunile pot fi folosite pentru a evita iadul callbacks, construcția async/await- adaugă un nivel suplimentar de zahăr sintactic. Aceasta se bazează pe promisiuni și permite programarea operațiunilor asincrone aproape ca pe cele sincrone. Cine a programat odată cu async/await, evită de atunci înainte utilizarea directă a metodei then- a promisiunilor (și cu atât mai puțin utilizarea callbacks).

În Node.js modulele sunt folosite încă de la început, însă la început s-a bazat exclusiv pe formatul de modul CommonJS cu require. Din ES6 există o definiție de modul în standard și cuvintele cheie noi import/export. Între timp, acest format este suportat de aproape toate bibliotecile JS (noi), iar și Node.js poate să-l gestioneze în ultimele versiuni.

În afara importului static al modulelor cu cuvântul cheie import,, ES6 suportă și importul dinamic cu funcția import-. Deoarece totul funcționează asynchronous, este returnat un Promise, pe care îl puteți aștepta în mod excepțional folosind await. Astfel, nimic nu mai stă în calea încărcării modulelor în timpul execuției la momente arbitrare.

Programarea orientată pe obiecte clasică, cu clase și moșteniri, era posibilă doar printr-un prototip în cadrul unei funcții constructor. Acest lucru era neîndemânatic, părea puțin compact și, ca atare, era predispus la erori. Noul cuvânt cheie class permite acum, cu ES6, definirea într-o formă compactă, așa cum este cunoscut din alte limbaje de programare cum ar fi Java, C# și C++. Intern, rămâne un sistem fundamental bazat pe prototipuri, doar cu o sintaxă mai frumoasă.

Mostenirea se bazează încă pe prototipuri, se scrie în ES6 cu cuvântul cheie extends, totuși mult mai ușor și mai clar. Atunci când se folosește, trebuie să apelați constructorul clasei de bază la momentul potrivit cu super. Modul în care se realizează acest lucru este, desigur, explicat și în această lecție.

Declararea membrilor sau câmpurilor a fost permisă și cu standardele mai recente. Astfel, se pot declara și inițializa câmpuri statice.

Acum se pot declara și câmpuri private, la care sigur nu poți accesa din exterior. Puțin neobișnuită este declarația, care se diferențiază semnificativ de alte limbaje de programare.

Cu noul cuvânt cheie class și caracteristicile conexe precum moștenirea și encapsularea datelor (câmpuri private), ar trebui să fie mulțumiți toți programatorii orientați pe obiecte, nu? În această lecție, vreau să prezint o alternativă pentru crearea obiectelor care nu depinde de clase, prototipuri și this, ci permite o formă mai flexibilă de "moștenire" sau mai bine spus "compoziție".

Cele mai importante caracteristici ale versiunii ES6 și ulterioare ar trebui să fie acum acoperite. Cu toate acestea, mereu apar inovații noi. Unele funcții mai puțin folosite nu au fost încă menționate. În această lecție se va explica ce mai este de așteptat în viitor și ce funcții ar putea fi încă interesante în cazuri speciale.