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.

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.

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.

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.

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 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.

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.

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.