Deși ES6 caietul de sarcini nu este super-fresh, cred că mulți dezvoltatori nu sunt încă pentru a sari familiarizat cu ea., Motivul principal este, probabil, suport slab în browsere web doar după eliberarea CAIETUL DE SARCINI. În prezent, specificația are peste 2 ani, iar o mulțime de browsere web moderne funcționează bine cu ES6. Chiar dacă (sau clienții dvs.) nu utilizați cea mai recentă versiune a browserului web, puteți utiliza transpilere (cum ar fi Babel), care transformă sursele ES6 în surse ES5 în timpul procesului de construire a aplicației. Înseamnă că este timpul să facem un pas înainte și să învățăm ES6.în acest articol, voi încerca să introduc cele mai utile caracteristici într-un mod succint., După tutorial, veți avea abilități de bază și veți putea să le aplicați într-un proiect real. Nu o trata ca pe un ghid sau o documentație. Scopul meu este să vă încurajez să săpați mai adânc și să vă familiarizați cu ES6.
const și lăsați cuvinte cheie
const vă permite să definiți constante (în cele din urmă!). să vă permite să definiți variabile. Este minunat,dar nu avem deja variabile în JavaScript? Da, este adevărat, dar variabilele declarate de var au domeniul de aplicare al funcției și sunt ridicate în partea de sus. Aceasta înseamnă că o variabilă poate fi utilizată înainte de a fi declarată., fie ca variabilele și constantele să aibă domeniul de aplicare al blocului (înconjurat de {}) și nu pot fi utilizate înainte de declarație.
Array funcții helper
Nou rece funcții helper apărut, care facilitează munca cu JS tablouri în cele mai multe cazuri utile. De câte ori ați implementat logica cum ar fi: filtrarea, verificarea dacă oricare sau toate elementele îndeplinesc condiția sau conversia elementelor? Probabil foarte des. Acum aveți caracteristici lingvistice excelente pentru a face munca pentru dvs., Aici, în opinia mea, sunt cele mai valoroase funcții:
forEach
execută funcția furnizată pentru fiecare element al matricei, trecând elementul de matrice ca argument.
hartă
Creează o nouă matrice care conține același număr de elemente, dar elemente de ieșire sunt create de funcția dată. Doar convertește fiecare element de matrice la altceva.,
filtru
Creează o nouă matrice care conține un subset de matrice inițială. Rezultatul are aceste elemente care trec testul implementat de funcția furnizată, care ar trebui să returneze true sau false.
Găsește primul element care trece testul implementat prin funcția dată, care ar trebui să se întoarcă adevărat sau fals.,
fiecare
Verifică dacă fiecare element din matrice trece testul implementat prin funcția dată, care ar trebui să se întoarcă adevărat sau fals.
Verifică dacă orice element din matrice trece testul implementat prin funcția dată, care ar trebui să se întoarcă adevărat sau fals.,
reduce
se Aplică o funcție trecut ca primul parametru împotriva unui acumulator și fiecare element din matrice (de la stânga la dreapta), astfel reducând-o la o singură valoare. Valoarea inițială a acumulatorului trebuie furnizată ca al doilea parametru al funcției de reducere.
Săgeată funcții
Implementarea de funcții simple (ca mai sus suma sau produsul) necesită a scris o mulțime de șabloane., Există vreun remediu pentru asta? Da, încercați doar funcțiile săgeată!
Săgeată funcții pot fi, de asemenea, inline. Simplifică foarte codul:
Săgeată funcții pot fi, de asemenea, mult mai complexe și au mai multe linii de cod:
Cursuri
Care Java developer nu ratați clase atunci când trecerea la un JS proiect?, Cui nu-i place moștenirea explicită, ca în limbajul Java, în loc să scrie cod magic pentru moștenirea prototipică? Deși unii dezvoltatori JS s-au plâns, clasele au fost introduse în ES6. Nu schimbă conceptul de moștenire. Sunt doar zahăr sintactic pentru moștenirea prototipică.
Îmbunătățită obiect literali
Obiect literali au fost îmbunătățite., Acum putem mult mai ușor:
- defini câmpuri cu sarcină variabilă cu același nume
- defini funcții
- defini dinamic (calculat) proprietăți
Șablon siruri de caractere
Cine iubește scris mare șir și variabile de concatenare? Cred că o minoritate dintre noi. Cine urăște s-o citească? Sunt sigur că toată lumea. Din fericire, ES6 introduce șabloane de șir foarte ușor de utilizat cu substituenți pentru variabile.,
vă Rugăm să rețineți, că putem scrie de text multi-linie.important: utilizați backsticks în loc de apostrofuri pentru a înfășura textul.
argumentele implicite ale funcției
nu vă place să furnizați toți parametrii posibili ai funcției? Utilizați valorile implicite.
operatorii Rest și spread
Spread
permite extragerea conținutului de matrice sau obiect ca elemente unice.,
Exemplu de — a face copie superficială de matrice:
Exemplu de îmbinare tablouri:
vrei pentru a lega primele funcție de parametrii variabilelor, și alții pentru anumite variabile ca o matrice? Acum o puteți face destul de ușor.,
Destructurare
De matrice
Permite extragerea de elemente solicitate la matrice și de a le atribui variabile.
De obiect
Permite extragerea solicitat proprietăți de obiect și de a le atribui variabile cu același nume ca proprietăți.,
Promite
Promisiune promisiuni (da, știu că sună ciudat), pe care le-ar obține în viitor rezultatele de amânare sau de lungă durată sarcini. Promisiunea are două canale: primul pentru rezultate, al doilea pentru erori potențiale. Pentru a obține rezultatul, furnizați funcția de apel invers ca parametru de funcție „atunci”. Pentru a gestiona Erorile, furnizați funcția de apel invers ca parametru al funcției „captură”.
vă rugăm să observați că ieșirea exemplului poate diferi pentru fiecare execuție, din cauza apelului funcției aleatoare.,
Sumar
sper că v-a plăcut articolul. Dacă doriți o practică, puteți utiliza sandbox-ul pentru procesul de învățare: https://es6console.com/. Dacă aveți nevoie de mai multe informații, le puteți găsi aici: