Noi folosim ECMAScript 6 astăzi
standardul ECMAScript este baza pentru multe alte limbi derivate, inclusiv ActionScript și JScript. De-a lungul anilor, ECMAScript înlocuit patru versiuni, iar acum există o dezbatere în jurul a șasea versiune, care are, de asemenea, un nume de cod Harmony ECMAScript.
istoricul versiunilor
- obiecte complexe
- biblioteci
- generatoare de cod
compatibilitate
noi caracteristici
Următoarele sunt caracteristicile pe care le considerăm. Încercați-le fiecare, sau du-te direct la noile caracteristici ale limbii pe care doriți să exploreze.
Posibilitatea # 1 - Domeniu de aplicare în cadrul blocului pentru a permite
ES6 rezolvă această problemă prin utilizarea let. care se comportă ca var. cu excepția faptului că domeniul său de aplicare este un flux, nu o funcție. Să ne uităm la un alt exemplu de var de mai jos. Funcții de apel es [6] () ne va reveni la valoarea i = 10. Observați că în ciuda faptului că expresia var i = 0; A fost declarată în bucla for. domeniul de aplicare implicit var i la nivel global vizibil. es Prin urmare, atunci când funcția a fost executat [6] (). valoarea i este 10.
Să încercăm acum să folosească let. Pentru a face acest lucru, vom folosi Firefox și faceți clic pe meniul consola Web (Tools> Web Developer> consola Web). Crearea unei variabile într-o buclă pentru. Folosind lit. c = i; încheie domeniul său de aplicare în cadrul blocului.
Firefox sprijină deja multe caracteristici noi ES6. Vă rugăm să consultați tabelul de corespondență Firefox pentru a fi conștienți de care funcțiile sunt susținute și care dintre ele sunt, de asemenea, în concordanță cu specificațiile curente.
Posibilitatea # 2 - zona vizibilă în interiorul const bloc
Posibilitatea # 3 - Clase
Apoi, în tipul de etichetă de script = „text / traceur“ vom folosi sintaxa ES6 pentru punerea în aplicare a aceleiași limbi de clasă. pe care le-am făcut înainte.
Acum putem crea o limbă de clasa instanță pentru a deschide fișierul HTML în Chrome folosind expresia var js = noua limbă. Și vom vedea în consola pentru a determina celelalte proprietăți ale limbii!
Cu o astfel de sintaxă clară, putem merge, de asemenea, la extinderea clasei de a pune în aplicare metalimbaj subclase. care va moșteni toate proprietățile din limba de clasă părinte. In interiorul functiei constructor, vom apela funcția de super. care, la rândul său, va cauza constructorului clasei părinte, să moștenească toate proprietățile sale. În final putem adăuga proprietăți suplimentare, cum ar fi versiunea. Să ne uităm la sintaxa ES6 și rulați-l în browser-ul Chrome:
Posibilitatea # 4 - funcția de valori prestabilite
Cu parametrii funcției implicite, putem avea întotdeauna o anumită semnificație pentru parametrii funcției, definindu-le ca implicite. Sintaxa această posibilitate în ES6 intuitiv. Setările implicite sunt setate la definirea funcției. Să ne uităm la sintaxa noului fișier typescript ES6 cu extensia * TS.
În cele din urmă vom deschide HTML-fișier în Chrome / Firefox și apelați funcția de istorie () de două ori: cu și fără parametri. Vă rugăm să rețineți că nu trece un parametru la funcția pe care o utilizați parametrii definiți în mod implicit.
Posibilitatea # 5 - Colecții
Apoi vom rula NodeJS repl și să vedem care sunt disponibile pentru seturi și tabele proprietăți. Vom lansa o NodeJS repl opțiune de nod --harmony. pentru a activa caracteristicile ES6.
Seturi (seturi)
Seturi - este o structură de date simplă este similară cu matrice, dar cu fiecare element are o valoare unică. Creați un fișier nou, o numim 5-sets.js și inserați codul pentru a crea, adăuga și elimina din setul pe care o vom crea. De asemenea, rețineți că, în ciuda faptului că am adăugat de două ori „Hippo“, datele vor fi introduse numai o singură dată!
Rulați fișierul cu nodul de comandă --harmony 5-set.js. Acum, rețineți că, în ciuda faptului că „Hippo“, a adăugat de două ori, după scoaterea lui din setul de date mai mult în el. Acest lucru arată din nou că setul - o structură de date care poate conține numai valori unice.
Hărți (Tabel)
Așa cum sa arătat, împreună cu colecții ES6, armonie în opțiunea NodeJS sprijină, de asemenea, alte caracteristici, cum ar fi un domeniu de aplicare într-un bloc, și un modul proxy. Doar asigurați-vă că pentru a le încerca în NodeJS acțiune!
Posibilitatea # 6 - Destructurization
În limbaje de programare, termenul „destructurării“ se referă la potrivirea de model. ES6 putem face unele meci destul de interesant un model în matrice și obiecte, care anterior ne-ar fi necesare pentru a acționa cu un pas mai mult. Să ne uităm la unele dintre ele în Firefox consola Web.
destructurării matrice
Folosind o serie de deconstrucție, putem inițializa variabilele la un moment dat, sau chiar să înlocuiască valorile lor în loc de obicei temp utilizare var; .
Destructurization devine, de asemenea, o reducere utilă atunci când se întoarce mai multe valori dintr-o funcție, deoarece nu trebuie să obbegat întregul obiect. În plus față de dor de unele dintre variabilele lasă doar elementul martor al matrice:
obiecte destructurization
Datorită variabilelor destructurare pot fi, de asemenea inițializate de obiectul care este returnat dintr-o funcție, chiar și cu obiecte încorporate. De asemenea, la fel ca matrice, putem sări peste acele valori care sunt necesare. Aici este un fragment de cod care demonstrează acest lucru:
Posibilitatea # 7 - Parametrii rămași și operatori avansați.
Opțiuni rămase
Parametrii reziduale ES6 ne permite să folosească cu ușurință mai mulți parametri fixe în funcție, împreună cu restul de un număr variabil de parametri. Am folosit la argumente. care este un obiect care conține parametrii care au fost trecut la funcția, dar nu putem folosi funcția de a manipula aceste argumente. Folosind sintaxa intuitivă ES6 putem profita de trei puncte. pentru a se referi la un număr variabil de argumente.
Să încercăm să utilizați opțiunile rămase cu gruntjs și plug-in pentru traceur. pe care am folosit în secțiunea anterioară.
Creați fișiere package.json. care definește diferitele module necesare pentru a rula Grunt. Vă rugăm să rețineți că această listă de dependențe include mufă traceur:
Cel mai important lucru - vom crea un fișier de odihnă-spread.js care va conține sintaxa parametrului rămasă:
operatorul de expansiune
Operatorul este opusul extensii parametrii reziduale. Atunci când apelați o funcție care necesită un anumit număr de argumente, putem trece un singur argument, care este o masă de lungime variabilă utilizând o sintaxă familiară deja punctat pentru a indica un număr variabil de argumente.
Vom folosi același fișier de odihnă-spread.js. care a fost utilizat mai sus pentru parametrii rămași, și se adaugă extensiile codului operatorului. În exemplul următor, funcția necesită 6 argumente diferite. Când apelați aceste funcții sunt transferate ca o matrice în extinderea operatorului. Să ne uităm la sintaxa arata ca un apel de funcție cu un număr fix de argumente și o sumă variabilă.
Adăugați codul de extensie a operatorului în dosarul de odihnă-spread.js:
Porniți compilatorul traceur prin Grunt sarcină la un prompt de comandă și deschideți fișierul index.html într-un browser:
Posibilitatea # 8 - Iterație
Să încercăm același concept, dar acum cu designul pentru a-matrice, și setați tabel:
Posibilitatea # 9 - Array Comprehensiune
comprehensions Array ne da o sintaxă prescurtare pentru manipularea conținutului fiecărui element de matrice pe un model specific. Acest lucru este foarte similar cu ceea ce face ca harta metoda () și filtru (). disponibil în obiectul Array. Să ne uităm la modul în care utilizăm harta ()
Să aruncăm o privire la noi această oportunitate în Firefox, vezi ES6 prescurtate sintaxa pentru crearea de tablouri și trei cicluri pentru crearea de posibile soluții jocuri Cluedo:
Posibilitatea # 10 - Module
Acum vom crea un js / fișier init.js. care va apela pur și simplu js / main.js:
Creați un cerc în unitatea în fișierul / circle.js folosind sintaxa ES6. Acest modul exportă două funcții:
Creați în / fișierul main.js. care va importa cercul unitate. astfel încât să putem folosi funcțiile sale. Notă sintaxa de import:
În prezent, structura de directoare este prezentată mai jos. Vom folosi ES6 compilator pentru a genera un cod ES5 compatibil cu două fișiere noi: JS / circle.js și js / main.js
În cele din urmă am compila aceste două fișiere. Du-te la folderul în linia de comandă:
Aruncati o privire la codul compilat în fișierul js / circle.js și / js main.js. Acum, deschide fișierul index.html în browser pentru a vedea modulul în acțiune. Vom avea nevoie de un server web pentru a rula acest fișier. Eu folosesc Python SimpleHTTPServer. Du-te la linia de comandă de la rădăcina fișierului index.html:
O altă lectură biți: