JavaScript ES6 aduce noi sintaxă și noi caracteristici minunat pentru a face Codul mai modern și mai ușor de citit. Vă permite să scrieți Mai puțin cod și să faceți mai mult. ES6 ne introduce în multe caracteristici de mare, cum ar fi funcțiile săgeată, siruri de caractere șablon, distrugere de clasă, module… și mai mult. Să aruncăm o privire.

const și lăsați

const este un nou cuvânt cheie în ES6 pentru declararea variabilelor. consteste mai puternic decât var. Odată utilizată, variabila nu poate fi realocată., Cu alte cuvinte, este o variabilă imuabilă, cu excepția cazului în care este utilizată cu obiecte.acest lucru este foarte util pentru direcționarea selectorilor. De exemplu, atunci când avem un singur buton care declanșează un eveniment, sau atunci când doriți să selectați un element HTML in JavaScript, utilizați const în loc de var. Acest lucru se datorează faptului că var este „ridicat”. Este întotdeauna de preferat să utilizați const atunci când nu doriți să realocați variabila .,

În codul de mai sus, const nu se va schimba și nu poate fi transferat. Dacă încercați să-i dați o nouă valoare, vă va returna o eroare.

let poate fi redistribuit și să ia o nouă valoare. Creează o variabilă mutabilă.

let este același lucru ca const în care ambele sunt blocate-domeniul de aplicare. Aceasta înseamnă că variabila este disponibilă numai în domeniul său de aplicare.,

funcții săgeată

funcția săgeată este într-adevăr minunat, și face Codul mai ușor de citit, mai structurat, si arata ca un cod modern. În loc de a folosi acest lucru:

Utilizare:

după Cum vedeți, săgeata în funcție pare mai ușor de citit și curat! Nu va mai trebui să folosiți vechea sintaxă.

de Asemenea, puteți utiliza Săgeata în funcție cu map, filter și reduce built-in functii.,

funcția hartă cu săgețile arată mai clar și ușor de citit decât map în ES5. Cu ES6 puteți scrie cod mai scurt și mai inteligent. Puteți utiliza același lucru cu filterși reduce.

Template Literals

Template literals sau siruri de caractere șablon sunt destul de cool. Nu trebuie să folosim operatorul plus ( + ) pentru a concatena șiruri sau când dorim să folosim o variabilă în interiorul unui șir.,

vechiul sintaxa:

Cu noul ES6 sintaxa:

Atât de simplu! Este o diferență foarte mare între sintaxa veche și ES6. Când se joacă cu șiruri de caractere, șirul literal din ES6 arată mai organizat și mai bine structurat decât ES5.

parametrii implicite

când lucrez în PHP, eu folosesc de obicei parametrii implicite. Acestea vă permit să definiți un parametru în avans.,deci, atunci când uitați să scrieți parametrul, acesta nu va returna o eroare nedefinită, deoarece parametrul este deja definit în implicit. Deci, atunci când executați funcția cu un parametru ratat, va lua valoarea parametrului implicit t și nu va returna o eroare!

Uită-te la acest exemplu:

funcția de mai sus se întoarce nedefinit, pentru că am uitat să-i dea al doilea parametru age.,

dar dacă am folosit parametrul implicit, acesta nu va reveni nedefinit și își va folosi valoarea atunci când uităm să atribuim un parametru!

după Cum vedeți, funcția returnează o valoare, chiar dacă am ratat cel de-al doilea parametru. Acum, cu parametrul implicit, putem gestiona eroarea în avans.

Array și object destructing

distrugerea face atribuirea valorilor unui tablou sau obiect la noua variabilă mai ușoară.,

vechiul sintaxa:

Cu ES6 sintaxa:

Cu ES5, trebuie să alocați fiecare valoare pentru fiecare variabilă. Cu ES6, ne punem valorile în paranteze ondulate pentru a obține orice proprietate a obiectului.Notă: Dacă atribuiți o variabilă care nu este identică cu numele proprietății, aceasta va reveni nedefinită. De exemplu, dacă numele proprietății estename și o atribuim unei variabileusername, aceasta va reveni nedefinită.,

întotdeauna trebuie să numim variabila la fel ca numele proprietății. Dar în cazul în care dorim să redenumim variabila, putem folosi în schimb colonul :.

pentru matrice, folosim aceeași sintaxă ca și obiectul. Trebuie doar să înlocuim parantezele ondulate cu paranteze pătrate.

Import și export

cu Ajutorul import și export în JavaScript aplicație face mai puternic., Acestea vă permit să creați componente separate și reutilizabile.

Dacă sunteți familiarizat cu orice JavaScript MVC-cadru, veți vedea că ei folosesc import și export să se ocupe de componentele cele mai multe ori. Deci, cum funcționează cu adevărat?

este simplu! export vă permite să exportați un modul pentru a fi utilizat într-o altă componentă JavaScript. Folosim import pentru a importa acel modul pentru a-l utiliza în componenta noastră.

de exemplu, avem două fișiere., Primul este numit detailComponent.js, iar al doilea este numit homeComponent.js.

în detailComponent.jsvom exporta funcția detail.

Și dacă doriți să utilizați această funcție în homeComponent.js, vom folosi doar import.

Dacă doriți să importați mai multe module, noi doar le-a pus în acolade.,

Atât de cool, nu-i așa?!promisiunile sunt o caracteristică nouă a ES6. Este o metodă de a scrie cod asincron. Poate fi folosit atunci când, de exemplu, dorim să preluăm date dintr-un API sau când avem o funcție care necesită timp pentru a fi executată. Promisiunile facilitează rezolvarea problemei, așa că haideți să creăm prima noastră promisiune!

Dacă vă conectați consola, se va returna o Promisiune. Deci, dacă dorim să executăm o funcție după preluarea datelor, vom folosi o promisiune., Promisiunea are doi parametri: resolveși reject pentru a gestiona o eroare așteptată.

Notă: Funcția fetch returnează o promisiune în sine!

const url='https://jsonplaceholder.typicode.com/posts';
const getData=(url)=>{return fetch(url);}
getData(url).then(data=> data.json()).then(result=> console.log(result));

Acum, dacă vă conectați consola ta se va întoarce o matrice de date.

Rest parameter and Spread operator

parametrii rest sunt folosiți pentru a obține argumentul unei matrice și pentru a returna o nouă matrice.,

răspândirea operatorul are aceeași sintaxă ca și restul parametru, dar răspândirea operatorul ia Matrice în sine și nu doar argumentele. Putem folosi parametrul Spread pentru a obține valorile unui tablou, în loc să folosim o buclă for sau orice altă metodă.

clase

clasele sunt nucleul programării orientate pe obiecte (OOP). Ele fac Codul mai sigur și încapsulat. Utilizarea claselor oferă codului dvs. o structură frumoasă și o menține orientată.,

Pentru a crea o clasă, folosiți class cuvânt cheie urmat de numele clasei cu două acolade.

Acum putem accesa class metode și proprietăți folosind new cuvinte cheie.

class myClass{ constructor(name,age){ this.name=name; this.age=age;}}const Home= new myClass("said",20);console.log(Home.name)// said

Pentru a moșteni de la o altă clasă, de a folosi extends cuvânt cheie urmat de numele clasei vrei să moștenească de la.,

puteți afla mai multe despre Cursuri aici.ES6 are și alte caracteristici uimitoare — le puteți explora aici.Sper că ați găsit acest articol util și sper că am reușit să vă prezint câteva dintre caracteristicile ES6. Dacă da, abonați-vă la această listă de e-mail pentru a afla mai multe despre subiectele Front-end. Mulțumesc pentru timpul acordat.

apropo, am lucrat recent cu un grup puternic de ingineri software pentru una dintre aplicațiile mele mobile., Organizația a fost grozavă, iar produsul a fost livrat foarte repede, mult mai rapid decât alte firme și freelanceri cu care am lucrat și cred că le pot recomanda sincer pentru alte proiecte de acolo. Trage – mi un e-mail dacă doriți să obțineți în contact — [email protected].