JavaScript ES6 aduce o nouă sintaxă și noi funcții minunate pentru a vă face codul mai modern și mai lizibil. Vă permite să scrieți mai puțin cod și să faceți mai mult. ES6 ne introduce în multe funcții extraordinare, cum ar fi funcțiile săgeată, șirurile șablonului, distrugerea clasei, modulele … și multe altele. Hai să aruncăm o privire.

const si lasa

const este un nou cuvânt cheie în ES6 pentru declararea variabilelor. const este mai puternic decât var. Odată utilizată, variabila nu poate fi realocată. Cu alte cuvinte, este un variabilă imuabilă cu excepția cazului în care s-a folosit 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 când doriți să selectați un element HTML în JavaScript, utilizați const în loc de var. Asta pentru ca var este „ridicat”. Este întotdeauna de preferat să se utilizeze const când nu doriți să reatribuiți variabila.

JavaScript ES6 scrieti mai putin faceti mai mult

În codul de mai sus, const nu se va schimba și nu poate fi realocat. Dacă încercați să îi acordați o nouă valoare, aceasta vă va întoarce o eroare.

1611911587 451 JavaScript ES6 scrieti mai putin faceti mai mult

let pot fi realocate și să ia o nouă valoare. Se creează un variabilă mutabilă.

let este la fel ca const prin aceea că ambele sunt blocate. Înseamnă că variabila este disponibilă numai în domeniul său de aplicare.

Funcții săgeată

Funcția săgeată este cu adevărat minunată și vă face codul mai lizibil, mai structurat și arată ca un cod modern. În loc să folosiți acest lucru:

1611911587 68 JavaScript ES6 scrieti mai putin faceti mai mult

Foloseste asta:

1611911588 492 JavaScript ES6 scrieti mai putin faceti mai mult

După cum vedeți, funcția săgeată pare mai lizibilă și mai curată! Nu va mai trebui să utilizați sintaxa veche.

De asemenea, puteți utiliza funcția săgeată cu map, filter, și reduce funcții încorporate.

1611911588 735 JavaScript ES6 scrieti mai putin faceti mai mult

Funcția de hartă cu săgeți arată mai clară și mai 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.

Litere de șablon

Literalele șablonului sau șirurile șablonului sunt destul de interesante. Nu trebuie să folosim operatorul plus (+) pentru a concatena șirurile sau când dorim să utilizăm o variabilă în interiorul unui șir.

Vechea sintaxă:

1611911588 193 JavaScript ES6 scrieti mai putin faceti mai mult

Cu noua sintaxă ES6:

1611911588 649 JavaScript ES6 scrieti mai putin faceti mai mult

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

Parametrii impliciți

Când lucrez în PHP, de obicei folosesc parametrii impliciți. Acestea vă permit să definiți un parametru în avans.

Deci, când uitați să scrieți parametrul, acesta nu va returna o eroare nedefinită, deoarece parametrul este deja definit în valoarea implicită. Deci, atunci când rulați funcția cu un parametru ratat, acesta va lua valoarea parametrului implicit t, și nu va întoarce o eroare!

Uită-te la acest exemplu:

1611911589 253 JavaScript ES6 scrieti mai putin faceti mai mult

Funcția de mai sus revine nedefinită, deoarece am uitat să-i dăm 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!

1611911589 157 JavaScript ES6 scrieti mai putin faceti mai mult

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

Matricea și distrugerea obiectelor

Distrugerea face mai ușoară atribuirea valorilor unui tablou sau obiect către noua variabilă.

Vechea sintaxă:

1611911589 327 JavaScript ES6 scrieti mai putin faceti mai mult

Cu sintaxa ES6:

1611911589 748 JavaScript ES6 scrieti mai putin faceti mai mult

Cu ES5, trebuie să atribuim fiecare valoare fiecărei variabile. Cu ES6, ne plasăm valorile între paranteze bucle 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 este name și îl atribuim unui username variabil, va reveni nedefinit.

Întotdeauna trebuie să numim variabila la fel ca și numele proprietății. Dar, în cazul în care dorim să redenumim variabila, putem folosi două puncte : in schimb.

1611911590 420 JavaScript ES6 scrieti mai putin faceti mai mult

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

1611911590 6 JavaScript ES6 scrieti mai putin faceti mai mult

Import si export

Folosind import și export în aplicația dvs. JavaScript îl face mai puternic. Acestea vă permit să creați componente separate și reutilizabile.

Dacă sunteți familiarizat cu orice cadru JavaScript MVC, veți vedea că îl folosesc import și export pentru a manipula componentele de 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 să importăm acel modul pentru al utiliza în componenta noastră.

De exemplu, avem două fișiere. Primul se numește detailComponent.js iar al doilea este numit homeComponent.js.

În detailComponent.js vom exporta detail funcţie.

1611911590 466 JavaScript ES6 scrieti mai putin faceti mai mult

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

1611911590 237 JavaScript ES6 scrieti mai putin faceti mai mult

Dacă dorim să importăm mai multe module, le plasăm doar între paranteze.

1611911591 906 JavaScript ES6 scrieti mai putin faceti mai mult

Atât de mișto, nu-i așa ?!

Promisiuni

Promisiunile sunt o nouă caracteristică 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!

1611911591 394 JavaScript ES6 scrieti mai putin faceti mai mult

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

Notă: funcția de preluare returnează ea însăși o Promisiune!

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, va returna o serie de date.

Parametru Rest și operator Spread

Parametrul rests sunt folosite pentru a obține argumentul unei matrice și pentru a returna o nouă matrice.

1611911591 767 JavaScript ES6 scrieti mai putin faceti mai mult
1611911591 844 JavaScript ES6 scrieti mai putin faceti mai mult

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

const arr=['said',20,'JavaScript enthusiast','Hi','Said','How are you?'];

const Func=(...anArray)=>{
  return anArray;
}

console.log(Func(arr));

//output  ["said", 20, "JavaScript enthusiast", "Hi", "Said", "How are you?"

Clase

Clasele sunt nucleul programării orientate pe obiecte (OOP). Acestea vă fac codul mai sigur și încapsulat. Utilizarea orelor oferă codului dvs. o structură frumoasă și îl menține orientat.

1611911592 772 JavaScript ES6 scrieti mai putin faceti mai mult

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

1611911592 644 JavaScript ES6 scrieti mai putin faceti mai mult

Acum putem accesa class metode și proprietăți folosind new cuvânt 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ă, utilizați extends cuvânt cheie urmat de numele clasei de la care doriți să moșteniți.

1611911592 15 JavaScript ES6 scrieti mai putin faceti mai mult

Puteți afla mai multe despre cursuri Aici.

ES6 are alte caracteristici uimitoare – le puteți explora Aici.

Concluzie

Sper că voi ați găsit acest articol util și sper că v-am putut prezenta câteva dintre caracteristicile ES6. Dacă da, abonați-vă la aceasta mail-list 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 excelentă, iar produsul a fost livrat foarte repede, mult mai repede decât alte firme și freelanceri cu care am lucrat și cred că pot să le recomand sincer pentru alte proiecte. Trimiteți-mi un e-mail dacă doriți să luați legătura – said@devsdata.com.