EcmaScript 6 (ES6) ceea ce este nou în noua versiune de javascript

destructurare

Destructurarea oferă o modalitate convenabilă de a prelua date de obiecte sau tablouri. Pentru a începe cu, un bun exemplu poate fi prezentat în matrice:

Cu această sintaxă, mai multe variabile pot fi atribuite valori la un moment dat. Un efect secundar frumos este că puteți schimba cu ușurință valorile variabilelor:

Destructurare, de asemenea, funcționează cu obiecte. Asigurați-vă că aveți cheia corectă:

Puteți utiliza, de asemenea, acest mecanism pentru a schimba numele variabilelor:

Un alt exemplu interesant de simulare valori de returnare multiple:

Destructurarea poate fi folosit pentru a seta valori implicite pentru argumentele obiect. Pe un obiect literal, puteți simula parametrii numiți.

valorile implicite

Valorile implicite pentru parametrii funcțiilor disponibile în ES6 cu următoarea sintaxă:

Se pare destul de curat, nu-i așa? Sunt sigur că înainte de a fost forțat să umple unele dintre argumentele în ES5 într-un mod similar:

Valoarea implicită pentru argumentul invocat sau nedefinită. sau lipsa de argument.

Opțiunile rămase

Mai devreme ne-am uitat la răspândirea operatorului. Parametrii rămași sunt foarte asemănătoare cu el. Ei folosesc, de asemenea, sintaxa. și vă permite să salvați argumentele rămase în matrice:

caietul de sarcini ES6 include atât noua sintaxă, și mecanismul modulului încărcător. Dacă doriți să utilizați module și scrie în viitor, trebuie să utilizați această sintaxă. Instrumente moderne de asamblare acceptă acest format, este posibil printr-un plug-in, astfel încât totul să meargă bine (nu vă faceți griji, vom discuta acest lucru în continuare în secțiunea „Transpilyatsiya“).

Și modulele ES6 acum de sintaxă. Modulele sunt proiectate în jurul cuvintelor cheie de export și import. Să considerăm un exemplu cu două module simultan:

După cum puteți vedea, este posibil să exporte mai multe expresii de export. Fiecare tip trebuie să descrie în mod explicit valoarea exportată (în acest exemplu, funcția și var).

Exprimarea importului în acest exemplu utilizează sintaxa (destructurare similare) pentru a defini în mod explicit ceea ce este importat. Pentru a importa modulul în ansamblu, ar trebui să fie utilizat * simbol în legătură cu cuvântul cheie, pentru a da numele unității locale:

Sistemul modular are un export implicit. care poate fi o funcție. Pentru a importa acest lucru implicit în modul, trebuie să furnizeze numai numele local (adică fără destructurare):

Vă rugăm să rețineți că declarațiile de import în sincronizare, dar codul modulului nu este executat până când toate dependențele nu sunt încărcate.

Clasele sunt construite în jurul clasei de cuvinte cheie și constructor. Un mic exemplu:

Rețineți că definiția clasei nu este un obiect obișnuit, prin urmare, nu există nici o virgulă între membrii clasei.

Pentru a crea o instanta a clasei, ar trebui să utilizați un nou cuvânt cheie. Pentru a moșteni o clasă de bază, utilizați Extend:

De la orice designer sau o metodă de clasă derivată, puteți folosi super-. pentru a avea acces la clasa de bază:

• pentru a apela constructorul părintelui folosind super-();
• pentru a apela o altă metodă, folosind, de exemplu, super.getName ().

Simboluri - noul tip de date primitiv, cum ar fi, de exemplu, numărul și String. Puteți folosi simboluri pentru a crea un identificator unic pentru proprietățile obiectului, sau pentru a crea o constantă unică.

Rețineți că un set de perechi cheie-valoare cu simboluri care nu returnate de Object.getOwnPropertyNames (). și nu sunt vizibile în iterații pentru. în. Object.keys () sau JSON.stringify (). În acest sens, ele diferă de cheile obișnuite bazate pe linii. Puteți obține o serie de simboluri obiect cu Object.getOwnPropertySymbols ().

Simboluri, desigur, lucra cu const datorită naturii lor imuabile:

Puteți adăuga o descriere a simbolului. Nu se poate folosi pentru a avea acces la foarte caracterul, dar poate fi util pentru depanare:

Transpilyatsiya

Codul Transpilirovat nu este dificil. Puteți traspilirovat codul direct din linia de comandă sau poate fi inclus ca un programator sarcina plug-in, de exemplu, Grunt și Gulp. Există mai multe soluții pentru transpilyatsii, inclusiv Babel, traceur și dactilografiat. Uitați-vă, de exemplu, într-o varietate de moduri de a începe să utilizați ES6 cu Babel (anterior «6to5»). Cele mai multe caracteristici ES6 la dispoziția dumneavoastră!

Acum, că, sper că ești impresionat ES6, de ce nu începe să utilizați-l? În funcție de caracteristicile pe care doriți să le utilizați, și browsere sau cojile de care aveți nevoie pentru a sprijini (de exemplu, Node.js), veți dori, probabil, să includă transpilyator în fluxul de lucru. Și dacă ești pregătit pentru asta, există, de asemenea, monitorizează fișiere, pentru a face procesul de dezvoltare perfect.

Dacă sunteți incepand de la zero, poate doriți pur și simplu pentru a converti codul din linia de comandă (a se vedea, de exemplu, Babel CLI documentație). Dacă sunteți deja folosind Task Scheduler (de exemplu, Grunt și Gulp), puteți adăuga un plug-in (de exemplu, înghițitură-încărcător-babel babel sau pentru WebPACK). Căci există un mormăit mormăit-babel și multe alte plug-in-uri asociate cu ES6. Oamenii care folosesc Browserify, pot încerca babelify.

Multe caracteristici pot fi convertite în cod ES5-compatibil, fără eforturi suplimentare semnificative. Alții necesită carja temporare suplimentare (care pot fi furnizate transpilyatorom) și / sau afecta performanțele. Și unele sunt pur și simplu imposibil. Pentru a experimenta cu codul ES6 și a vedea cum arată transpilirovanny cod, puteți utiliza o varietate de instrumente interactive (de asemenea, cunoscut sub numele de repl):

Deci, ce pot folosi?

În general, unele dintre caracteristicile ES6 pot fi utilizate practic „liber“, de exemplu, module, funcții săgeată, parametrii și restul claselor. Aceste funcții pot fi transpilirovany în ES5 fără cheltuieli mari. Adaosurile la obiecte și prototipuri matrice. String si Math (de exemplu, Array.from () și "l" .startsWith ( "tu")) au nevoie de așa-numitele „umpluturi» (polyfills). Agregate - cârje temporare pentru funcționalitate care nu este acceptat de browser-ul dumneavoastră. Puteți descărca prima umplere, iar codul va funcționa ca în cazul în care browser-ul acceptă această funcționalitate. și Babel, și traceur furnizează astfel de agregate.

A se vedea tabelul de compatibilitate ES6 de Kangax pentru un plin de caracteristici de revizuire ES6 care sunt acceptate transpilyatorami și browsere. Acesta motivează faptul că, la momentul scrierii, cele mai recente browsere suporta deja de la 55% la peste 70% din toate caracteristicile ES6. Microsoft Edge, Google Chrome și Mozilla Firefox sunt de fapt, în competiție unele cu altele, ceea ce este bun pentru web ca un întreg.

Personal, cred că abilitatea de a utiliza cu ușurință noile caracteristici ES6, cum ar fi module, funcția de săgeată și parametrii reziduale - este o ușurare și o îmbunătățire semnificativă în procesul de codificare.

Ce urmează?

După ce instalați transpilyator, probabil că doriți să începeți utilizarea inovațiilor „mici“, cum ar fi lăsați și funcțiile analogice. Rețineți că acest cod este deja scris pentru ES5, va fi transpilyatorom neatins. După ce vă îmbunătățiți scripturile ES6 și a obține plăcere de la ea, veți începe să adăugați treptat în codul tot mai multe caracteristici ES6. Posibilitatea de a converti orice cod în noi module sau clase de sintaxă. Eu promit că ar fi cool!

ES6 mult mai multe oportunități decât putem acoperi în acest articol. Caracteristici includ evanghelizate Map. Set. Linii șablon tagged, generatoare, Proxy și Promise.

concluzie

Când se utilizează transpilyatora tot codul este eficient „este“ în ES5, în timp ce browsere vor continua să adauge noi caracteristici. Astfel, chiar dacă browser-ul sprijină pe deplin posibilitatea unei anumite ES6, versiunea ES5 compatibil, care va fi utilizat, acesta poate fi mai rău decât performanța. Puteți conta pe faptul că orice posibilitate ES6, și în cele din urmă toate acestea vor fi susținute într-o anumită locație (în browsere și medii care aveți nevoie pentru a sprijini la momentul respectiv). Dar până atunci, avem nevoie pentru a dezactiva selectiv ES6 posibilitatea de transpilyatsii în ES5, pentru a preveni sarcină inutilă. Cu aceasta în minte, să decidă pentru tine caracterul adecvat al momentului pentru a începe să utilizați ES6 (orice parte a acestuia).

Salvare sau Împărtășiți