ECMAScript 6 - 10 Caracteristici extraordinare noi

Știați că JavaScript (împreună cu JScript și ActionScript) este o implementare a unei limbi de specificare a limbajului de scripting pe bază de client, numită ECMAScript? Pentru a face această definiție urâtă un pic mai atractivă, putem spune că ECMAScript (sau oficial ECMA-262) este standardul care definește modul în care folosim JavaScript și ceea ce putem realiza Cu acesta.

Cea mai recentă ediție a limbii, ECMAScript 2015 (sau ES6) este probabil cea mai importantă actualizare de la prima versiune din 1997. Scopul principal al celei mai recente versiuni a fost de a oferi un suport mai bun pentru crearea de aplicații și biblioteci mai mari. Aceasta înseamnă o sintaxă mai matură, noi comenzi rapide pentru a ușura codarea și, de asemenea, noi metode, cuvinte cheie, tipuri de date și multe alte îmbunătățiri.

Documentația ES6 este extinsă, dacă vă place să citiți foarte mult, puteți descărca toate specificațiile de pe site-ul ECMA International. În acest post vom arunca o privire la 10 caracteristici selectate, chiar dacă ES6 are mult mai multe de oferit. Dacă doriți să experimentați acest lucru, ES6 Fiddle este un loc minunat pentru a face acest lucru și puteți găsi și câteva fragmente de cod exemplu.

Sprijin pentru ECMAScript 6

Furnizorii de browsere au adăugat treptat suport pentru caracteristicile ECMAScript 6. Puteți găsi aici un tabel de compatibilitate rece despre browser și suportul compilatorului pentru noile caracteristici.

Dacă sunteți interesat de suportul ES6 în Node.js, consultați docs-ul aici.

Deși nu toate caracteristicile sunt în prezent acceptate, putem folosi transpilers, cum ar fi Babel, pentru a transpira codul nostru ES6 în ES5. Există un plugin grozav de Grunt pentru Babel, multe pluginuri minunate ES6 pentru Grunt și un uimitor plugin Gulp-Babel acolo, din fericire avem multe opțiuni.

În acest fel, putem începe să folosim sintaxa și capacitățile îmbunătățite, în timp ce nu trebuie să ne facem griji cu privire la problemele de compatibilitate. Acum, să vedem caracteristicile.

1. Noi lăsa cuvinte cheie

ES6 introduce noul lăsa care ne permite să declarăm variabilele locale în sfera unui bloc, cum ar fi o instrucțiune, o expresie sau o funcție (n interior). De exemplu, putem declara a pentru buclă în modul următor, apoi reutilizați același nume de variabilă (deoarece domeniul său de aplicare este limitat la pentru bucla) în interiorul următoarei dacă afirmație:

 pentru (let i = 0; i < myArray.length; i++)  // Do something inside the block  if (x > 0 && x! = Y) // Reutilizăm "i" lasă i = x * y

Utilizarea funcției lăsa cuvântul cheie duce la un cod mai curat și mai ușor de utilizat. Diferența dintre lăsa și var este în domeniul de aplicare, de exemplu, o variabilă locală definită de var cuvântul cheie poate fi folosit în întreaga funcție de închidere, în timp ce variabilele definite de lăsa lucrează doar în propriul (sub) bloc. Lăsa poate fi utilizată și la nivel global, în acest caz se comportă la fel ca și în cazul în care var. Desigur, în ES6 putem folosi în continuare var dacă vrem.

2. Noi const cuvinte cheie

Noul const cuvântul cheie face posibilă declararea constantelor, de asemenea cunoscute ca variabile imuabile, cărora nu le putem reassigna noul conținut mai târziu.

 const MY_CONST = 12; console.log (MY_CONST); // 12 MY_CONST = 16; // Eroare silențioasă, deoarece nu putem reassigna o nouă valoare la o constantă

Variabilele imuabile nu sunt întotdeauna complet imuabile în ECMAScript 6, deși, ca și cum o constantă deține un obiect, putem schimba mai târziu valoarea proprietăților și metodelor sale. Același lucru este valabil și pentru elementele unei matrice.

 const MY_CONSTANT = myProperty: 6; console.log (MY_CONSTANT.myProperty); // 6 MY_CONSTANT.myProperty = 18; console.log (MY_CONSTANT.myProperty); // constă OTHER_CONSTANT = [12, 14, 16]; console.log (OTHER_CONSTANT [0]); // 12 OTHER_CONSTANT [0] = 22; console.log (OTHER_CONSTANT [0]); // 22

Încă nu putem realoca o nouă valoare pentru obiectul MY_CONSTANT din fragmentul de cod de mai sus, ceea ce înseamnă că nu putem schimba numele proprietăților și metodelor, nici nu putem adăuga o nouă sau nu o ștergem pe cea existentă, deci nu putem face următorul lucru:

 MY_CONSTANT = newProperty: 18; console.log (MY_CONSTANT.newProperty); // eroare

Funcțiile săgeată

ECMAScript 6 facilitează modul în care scriem funcții anonime, deoarece putem omite complet funcţie cuvinte cheie. Trebuie doar să folosim noua sintaxă pentru funcții săgeată, numit după semnul săgeată => (săgeată de grăsime), care ne oferă o scurtătură excelentă.

 // 1. Un parametru în ES6 let suma = (a, b) => a + b; // în ES5 var sum = funcția (a, b) return a + b; ; // 2. Fără parametrii în ES6 let randomNum = () => Math.random (); // în ES5 var randomNum = funcție () return Math.random (); ; // 3. fără returnare în ES6 lăsați message = (nume) => alert ("Hi" + nume + "!"); // în ES5 var mesaj = funcția (numele tău) alert ("Hi" + numele tău + "!"); ;

Există o diferență importantă între funcțiile obișnuite și săgeată, adică funcțiile săgeții nu primesc a acest valoare automată ca și funcțiile definite cu funcţie cuvântul cheie face. Funcțiile săgeată legătura lexicală acest valoare pentru domeniul de aplicare curent. Acest lucru înseamnă că putem reutiliza cu ușurință acest cuvânt cheie într-o funcție interioară. În ES5 este posibilă numai cu următoarea hack:

 // ES5 Hack pentru a folosi acest cuvânt cheie într-o funcție interioară ... addAll: funcția addAll (bucăți) var self = this; _.each (bucăți, funcție (bucată) auto.add (bucată);); , ... // ES6 aceeasi functie interioara acum poate folosi propriul "acest" ... addAll: function addAll (bucati) _.each (bucati, piesa => this.add (bucata)); , ...

Codul de mai sus este din Mozilla Hacks

4. Noi răspândire Operator

Noul răspândire operatorul este marcat cu 3 puncte (...) și îl putem folosi pentru a semna locul mai multor elemente așteptate. Unul dintre cele mai frecvente cazuri de utilizare a operatorului de răspândire este introducerea elementelor dintr-o matrice într-o altă matrice:

 lasati myArray = [1, 2, 3]; lasati newArray = [... myArray, 4, 5, 6]; console.log (newArray); // 1, 2, 3, 4, 5, 6 

Putem, de asemenea, să luăm pârghie răspândire operator în apeluri funcționale în care vrem să trecem în argumente dintr-o matrice:

 lasati myArray = [1, 2, 3]; Suma funcției (a, b, c) return a + b + c;  console.log (suma (... myArray)); // 6

răspândire operatorul este destul de flexibil, deoarece poate fi folosit de mai multe ori în același apel de tip matrice sau funcție.

5. Valori implicite pentru parametri și noi parametri de odihnă

Vești bune, că în ECMAScript 6 putem adăuga valori implicite la parametrii unei funcții. Aceasta înseamnă că dacă nu vom transmite argumente mai târziu în apelul funcțional, vor fi utilizați parametrii impliciți. În ES5 valorile implicite ale parametrilor sunt întotdeauna setate la nedefinit, astfel încât noua posibilitate de a le pune la ceea ce dorim este cu siguranță o mare îmbunătățire a limbajului.

 Suma funcției (a = 2, b = 4) return a + b;  console.log (suma ()); // 6 console.log (suma (3, 6)); // 9

ES6 introduce, de asemenea, un nou tip de parametru, restul parametrilor. Ei arata si lucreaza in mod similar pentru a raspandi operatorii. Ele vin la îndemână dacă nu știm câte argumente vor fi transmise mai târziu în apelul pentru funcții. Putem folosi proprietățile și metodele obiectului Array pentru parametrii de odihnă:

 funcția putInAlphabet (... args) lasă sort = args.sort (); returnat sortat;  console.log (putInAlphabet ("e", "c", "m", "a", "s", "c", "r", "i", "p", "t")); // a, c, c, e, i, m, p, r, s, t

6. Nou pentru ... de Afirmație

Cu ajutorul noului pentru ... de buclă putem itera peste mese sau alte obiecte iterabile cu ușurință. Împreună cu noul pentru ... de , ECMAScript 6 introduce, de asemenea, două noi obiecte iterabile, Harta pentru hărți cheie / valoare și Set pentru colecții de valori unice care pot fi, de asemenea, valori primitive și referințe de obiecte. Când folosim pentru ... de , codul din interiorul blocului este executat pentru fiecare element al obiectului iterabil.

 lasati myArray = [1, 2, 3, 4, 5]; lasă suma = 0; pentru (let i lui myArray) sum + = i;  console.log (suma); // 15 (= 1 + 2 + 3 + 4 + 5)

7. Literele de șabloane

ECMAScript 6 ne oferă o nouă alternativă pentru concatenarea șirului. Template literals ne permite să creăm cu ușurință șabloane în care să putem încorpora diferite valori în orice loc pe care îl dorim. Pentru a face acest lucru trebuie să folosim $ ... sintaxa oriunde vrem să inserăm datele pe care le putem trece din variabile, matrice sau obiecte în felul următor:

 lasă client = title: "Ms", prenume: "Jane", numele de familie: "Doe", vârsta: "34"; ștergeți template = 'Dragă $ client.title $ client.firstname $ client.sumăr! Happy $ client.age ziua de naștere! '; console.log (template); // Dragă doamnă Jane Doe! Fericită data de 34 de ani!

8. Clase

ES6 introduce clase JavaScript care sunt construite pe moștenirea bazată pe prototipuri existente. Noua sintaxă face mai simplu să creeze obiecte, să profite de moștenire și să utilizeze codul de reutilizare. De asemenea, va fi mai ușor pentru începători care sosesc din alte limbi de programare să înțeleagă cum funcționează JavaScript.

În clasele ES6 sunt declarate clasele noi clasă cuvânt cheie, și trebuie să aibă o constructor() metoda care se numește atunci când un obiect nou este instanțiat prin utilizarea new myClass () sintaxă. Este, de asemenea, posibil să extindeți clasele noi cu copilul de clasă extinde părintele sintaxă care poate fi familiarizată de alte limbi orientate pe obiecte, cum ar fi PHP. De asemenea, este important să știți că, spre deosebire de declarațiile de funcții și variabile, declarațiile de clasă NU sunt ridicate în ECMAScript 6.

 clasa Polygon constructor (înălțime, lățime) // constructor de clasă this.name = 'Polygon'; this.height = înălțime; this.width = width;  sayName () // metoda de clasă console.log ('Bună, eu sunt', acest nume + '.');  permite myPolygon = poligon nou (5, 6); console.log (myPolygon.sayName ()); Bună, eu sunt un poligon.

Cod de mai sus din exemplele ES6 Fiddle, .

9. Module

Te-ai intrebat vreodata cat de cool ar fi daca JavaScript ar fi modular? Desigur, au existat soluții cum ar fi CommonJS (utilizate în Node.js) sau AMD (Asynchronous Module Definition) (utilizate în RequireJS) pentru a face acest lucru înainte, dar ES6 introduce modulele ca o caracteristică nativă.

Trebuie să definim fiecare modul în fișierul propriu, apoi să folosim export cuvinte cheie pentru a exporta variabile și funcții la alte fișiere și import cuvinte cheie pentru a le importa din alte fișiere, în conformitate cu următoarea sintaxă:

 // function.js Funcția cub (a) return a * a * a;  funcția cubeRoot (a) return Math.cbrt (a);  export cube, cubeRoot // sau: export cub ca cb, cubeRoot ca cr // app.js import cube, cubeRoot din "funcții"; console.log (cub (4)); // 64 console.log (cubeRoot (125)); // 5

Această soluție este genială, deoarece codul stocat într-un modul este invizibil din exterior și trebuie să exportăm doar partea pe care dorim să o accesăm de alte fișiere. Putem face lucruri mult mai uimitoare cu modulele ES6, aici puteți găsi o explicație detaliată și detaliată despre ele.

10. Încărcări de metode noi

ECMAScript 6 introduce multe metode noi pentru Prototype String existente, Array Object, Array Prototype și Object Math. Noile metode pot îmbunătăți în mod semnificativ modul în care putem manipula aceste entități. Mozilla Dev are exemple foarte bune de cod ale noilor adăugiri, merită să-ți dai timp și să le examinezi cu atenție.

Doar pentru a arăta cât de cool sunt într-adevăr, aici este metoda mea favorită: metoda de căutare a prototipului Array, care ne permite să testați anumite criterii pe elementele unei matrice executând funcția de apel invers pe fiecare element, apoi returnând primul element se intoarce Adevărat.

 funcția isPrime (element, index, matrice) var start = 2; în timp ce (începe <= Math.sqrt(element))  if (element % start++ < 1)  return false;   return element > 1;  console.log ([4, 6, 8, 12] .find (isPrime)); // undefined, nu a fost găsit console.log ([4, 5, 8, 12] .find (isPrime)); // 5

Cod de mai sus de la: Mozilla Dev