ECMAScript 6 - 10 Izvanredne nove značajke
Jeste li znali da je JavaScript (zajedno s JScript i ActionScript) implementacija opće namjene klijenta skriptni jezik specifikacija zove ECMAScript? Da bi ova gadna definicija bila malo privlačnija, možemo reći da je ECMAScript (ili službeno ECMA-262) standard koji definira kako koristimo JavaScript i što možemo postići s tim.
Najnovije, 6. izdanje jezika, ECMAScript 2015 (ili ES6) vjerojatno je najznačajnije ažuriranje od prve verzije 1997. godine. Glavni cilj najnovijeg izdanja bio je pružiti bolju podršku za stvaranje većih aplikacija i knjižnica. To znači zreliju sintaksu, nove prečace za lakše kodiranje, kao i nove metode, ključne riječi, vrste podataka i mnoga druga poboljšanja.
ES6 dokumentacija je opsežna, ako želite čitati puno, možete preuzeti cijele specifikacije s web stranice ECMA International. U ovom postu ćemo pogledati 10 ručno odabranih značajki, iako ES6 ima mnogo više za ponuditi. Ako želite eksperimentirati s njim, ES6 Fiddle je odlično mjesto za to, a tu možete pronaći i neke odlomke koda..
Podrška za ECMAScript 6
Proizvođači preglednika postupno dodaju podršku za značajke ECMAScripta 6. Ovdje možete pronaći cool tablicu kompatibilnosti o podršci preglednika i kompajlera za nove značajke.
Ako ste zainteresirani za ES6 podršku u Node.js, pogledajte dokumente ovdje.
Iako trenutno nisu podržane sve značajke, možemo koristiti transpiler-ove kao što je Babel da bismo prenijeli naš ES6 kod na ES5. Tu je cool Gruntov dodatak za Babel, mnogo strašnih ES6 dodataka za Grunt i nevjerojatan Gulp-Babel dodatak, tako da srećom imamo mnogo izbora.
Na taj način možemo početi koristiti poboljšanu sintaksu i mogućnosti, dok ne moramo brinuti o problemima kompatibilnosti. Sada ćemo vidjeti značajke.
1. Novo pustiti Riječ
ES6 uvodi novo pustiti ključna riječ koja nam omogućuje da proglasimo lokalne varijable u opsegu bloka, kao što su izraz, izraz ili (n unutarnja) funkcija. Na primjer, možemo proglasiti a za petlju na sljedeći način, a zatim ponovno koristiti isto ime varijable (budući da je njegov opseg ograničen na za petlje) unutar sljedeće ako izjava:
za (neka i = 0; i < myArray.length; i++) // Do something inside the block if (x > 0 && x! = Y) // Ponovno koristimo "i" neka i = x * y
Koristiti pustiti ključna riječ vodi do čišćeg i korisnijeg koda. Razlika između pustiti i var je u opsegu, na primjer, lokalna varijabla koju definira var ključna riječ može se koristiti u cjelokupnoj funkciji okruženja, a varijable definirane pomoću pustiti rade samo u vlastitom (pod) bloku. pustiti može se koristiti i globalno, u ovom se slučaju ponaša na isti način kao i var. Naravno, u ES6 još uvijek možemo koristiti var ako želimo.
2. Novo const Riječ
Novi const ključna riječ omogućuje deklariranje konstanti, također poznatih kao nepromjenjive varijable, na koje kasnije ne možemo preraspodijeliti novi sadržaj.
const MY_CONST = 12; console.log (MY_CONST); // 12 MY_CONST = 16; // Tiha pogreška, jer ne možemo preraspodijeliti novu vrijednost na konstantu
Nepromjenjive varijable nisu uvijek u potpunosti nepromjenjive u ECMAScript 6 iako, kao da konstanta drži objekt, možemo kasnije promijeniti vrijednost njegovih svojstava i metoda. Isto vrijedi i za elemente niza.
const MY_CONSTANT = myProperty: 6; console.log (MY_CONSTANT.myProperty); // 6 MY_CONSTANT.myProperty = 18; console.log (MY_CONSTANT.myProperty); // 18 const OTHER_CONSTANT = [12, 14, 16]; console.log (OTHER_CONSTANT [0]); // 12 OTHER_CONSTANT [0] = 22; console.log (OTHER_CONSTANT [0]); // 22
Još uvijek ne možemo izravno dodijeliti novu vrijednost objektu MY_CONSTANT u gornjem isječku koda, što znači da ne možemo mijenjati nazive svojstava i metoda, a ne možemo dodati ni novo ili izbrisati postojeću, tako da ne možemo sljedeća stvar:
MY_CONSTANT = newProperty: 18; console.log (MY_CONSTANT.newProperty); // pogreška
3. Funkcije strelica
ECMAScript 6 olakšava kako pišemo anonimne funkcije, kao što možemo potpuno izostaviti funkcija ključne riječi. Trebamo samo koristiti novu sintaksu za funkcije strelica, nazvana po znakom strelice (> arrow arrow), koja nam daje veliku prečicu.
// 1. Jedan parametar u ES6 neka sum = (a, b) => a + b; // u ES5 var sum = funkcija (a, b) return a + b; ; // 2. Bez parametara u ES6 neka randomNum = () => Math.random (); // u ES5 var randomNum = function () return Math.random (); ; // 3. Bez povratka u ES6 neka poruka = (ime) => alert ("Hi" + name + "!"); // u ES5 var poruka = funkcija (yourName) alert ("Hi" + yourName + "!"); ; Postoji važna razlika između regularnih i strelic funkcija, to jest funkcije strelica ne primaju ovaj vrijednost automatski kao funkcije definirane s funkcija ključna riječ učiniti. Funkcije strelica leksički vezati ovaj vrijednost za trenutni opseg. To znači da lako možemo ponovno koristiti ovaj ključne riječi u unutarnjoj funkciji. U ES5 to je moguće samo sa sljedećim hackom:
// ES5 Hack koristiti "ovu" ključnu riječ u unutarnjoj funkciji ... addAll: function addAll (pieces) var self = this; _.each (komada, funkcija (komad) self.add (komad);); ,… // ES6 sada ista unutarnja funkcija može koristiti vlastitu "ovu" ... addAll: function addAll (komada) _.each (komada, komad => this.add (komad)); ,…
Gornji kod je iz Mozilla Hacks
4. Novo širenje Operater
Novi širenje Operator je označen s 3 točke (…), a mi ga možemo koristiti za potpisivanje mjesta za više očekivanih stavki. Jedan od najčešćih slučajeva korištenja operatora širenja je umetanje elemenata niza u drugi niz:
neka myArray = [1, 2, 3]; neka newArray = [… myArray, 4, 5, 6]; console.log (newArray); // 1, 2, 3, 4, 5, 6
Također možemo uzeti utjecaj širenje operator u pozivima funkcija u koje želimo proslijediti argumente iz niza:
neka myArray = [1, 2, 3]; funkcija sum (a, b, c) povratak a + b + c; console.log (sum (… myArray)); // 6
širenje operater je vrlo fleksibilan, jer se može koristiti više puta u istom polju ili pozivu funkcije.
5. Zadane vrijednosti za parametre i nove parametre odmora
Dobra vijest, da u ECMAScript 6 možemo dodati zadane vrijednosti parametrima funkcije. To znači da ako kasnije ne proslijedimo argumente u pozivu funkcije, koristit će se zadani parametri. U ES5 zadane vrijednosti parametara uvijek su postavljene na nedefiniran, tako da je nova mogućnost da ih postavimo na ono što želimo definitivno veliko poboljšanje jezika.
funkcija sum (a = 2, b = 4) return a + b; console.log (sum ()); // 6 console.log (sum (3, 6)); // 9
ES6 također uvodi novu vrstu parametra parametri odmora. Oni izgledaju i djeluju slično kao i šire operatore. Oni su zgodni ako ne znamo koliko će argumenata kasnije biti proslijeđeno u pozivu funkcije. Možemo koristiti svojstva i metode objekta Array na parametrima ostatka:
funkcija putInAlphabet (… args) neka sorted = args.sort (); povratak sortiran; console.log (putInAlphabet ("e", "c", "m", "a", "s", "c", "r", "i", "p", "t")); a, c, c, e, i, m, p, r, s, t 6. Novo za ... od izjava
Uz pomoć novog za ... od petlju možemo lako ponoviti preko polja ili drugih iterabilnih objekata. Zajedno s novim za ... od izjava, ECMAScript 6 uvodi i dva nova iterabilna objekta, Map za karte / vrijednosti, i Set za zbirke jedinstvenih vrijednosti koje također mogu biti primitivne vrijednosti i reference objekta. Kada koristimo za ... od naredbe, kod unutar bloka se izvršava za svaki element iterabilnog objekta.
neka myArray = [1, 2, 3, 4, 5]; neka je sum = 0; za (let i od myArray) sum + = i; console.log (zbroj); // 15 (= 1 + 2 + 3 + 4 + 5)
7. Template Literals
ECMAScript 6 nam daje novu alternativu za povezivanje nizova. Literali predložaka dopustite nam da jednostavno kreiramo predloške u koje možemo ugraditi različite vrijednosti na bilo koje mjesto koje želimo. Da bismo to učinili, moramo koristiti $ … sintaksa svugdje gdje želimo umetnuti podatke koje možemo prenijeti iz varijabli, polja ili objekata na sljedeći način:
let customer = title: 'Ms', ime: 'Jane', prezime: 'Doe', dob: '34'; let template = 'Poštovani $ customer.title $ customer.firstname $ customer.surname! Sretan rođendan od $ customer.age! '; console.log (predložak); // Draga gospođica Jane Doe! Sretan 34. rođendan!
8. Nastava
ES6 uvodi JavaScript klase koje su izgrađene na postojećem naslijeđivanju prototipa. Nova sintaksa olakšava stvaranje objekata, iskorištavanje nasljeđivanja i ponovno korištenje koda. Također će olakšati početnike koji dolaze s drugih programskih jezika da razumiju kako JavaScript funkcionira.
U ES6 razredima se prijavljuju novi klasa ključnu riječ i trebate imati konstruktor() metoda koja se poziva kada se novi objekt instalira pomoću novi myClass () sintaksa. Također je moguće proširiti nove razrede s klasa Dijete proširuje Roditelja sintaksa koja može biti poznata iz drugih objektno-orijentiranih jezika kao što je PHP. Također je važno znati da, za razliku od deklaracija funkcija i varijabli, deklaracije klasa NISU podignute u ECMAScript 6.
klasa Polygon konstruktor (height, width) // konstruktor klase this.name = 'Poligon'; this.height = visina; this.width = width; sayName () // metoda klase console.log ('Bok, ja sam', this.name + '.'); neka myPolygon = novi poligon (5, 6); console.log (myPolygon.sayName ()); // Bok, ja sam poligon. Kod iznad iz ES6 Primjeri gusara, .
9. Moduli
Jeste li se ikada zapitali kako bi bilo cool ako je JavaScript modularan? Naravno, došlo je do zaobilaznih rješenja kao što su CommonJS (koristi se u Node.js) ili AMD (definicija asinkronog modula) (korištena u RequireJS), ali ES6 uvodi module kao izvornu značajku.
Moramo definirati svaki modul u njegovoj vlastitoj datoteci, a zatim koristiti izvoz ključne riječi za izvoz varijabli i funkcija do druge datoteke i uvoz ključnu riječ za uvoz iz ostale datoteke, prema sljedećoj sintaksi:
// functions.js funkcija kocka (a) povratak a * a * a; funkcija cubeRoot (a) return Math.cbrt (a); izvoz kocka, cubeRoot // ili: izvoz kocka kao cb, cubeRoot kao cr // app.js uvoz kocka, cubeRoot iz 'funkcije'; console.log (kocka (4)); // 64 console.log (cubeRoot (125)); // 5
Ovo rješenje je briljantno, jer je kod pohranjen u modulu nevidljiv izvana, a mi moramo izvesti samo onaj dio koji želimo pristupiti drugim datotekama. Možemo učiniti mnogo više nevjerojatnih stvari s ES6 modulima, ovdje možete pronaći veliko i detaljno objašnjenje o njima.
10. Opterećenja novih metoda
ECMAScript 6 uvodi mnoge nove metode za postojeći String Prototype, Array Object, Array Prototype i Math Object. Nove metode mogu značajno poboljšati način na koji možemo manipulirati tim entitetima. Mozilla Dev ima velike kodne primjere novih dodataka, vrijedi uzeti vremena i temeljito ih ispitati.
Da bih pokazao koliko su uistinu kul, ovdje je moja najdraža: pronađi metodu prototipa Array, koja nam omogućuje testiranje određenih kriterija na elementima niza izvršavanjem funkcije povratnog poziva na svakom elementu, a zatim vraćanjem prvog elementa vraća pravi.
funkcija isPrime (element, indeks, niz) var start = 2; vrijeme (početak <= Math.sqrt(element)) if (element % start++ < 1) return false; return element > 1; console.log ([4, 6, 8, 12]. pronaći (isPrime)); // undefined, not found console.log ([4, 5, 8, 12] .find (isPrime)); // 5
Kod iznad: Mozilla Dev
