ECMAScript 6 - 10 Úžasné nové funkcie

Vedeli ste, že JavaScript (spolu s jazykom JScript a ActionScript) je implementáciou špecifikácie skriptovacieho jazyka na všeobecnej strane klienta nazývanej ECMAScript? Ak chceme, aby táto škaredá definícia bola trochu atraktívnejšia, môžeme povedať, že ECMAScript (alebo oficiálne ECMA-262) je štandard, ktorý definuje, ako používame JavaScript a čo môžeme dosiahnuť s tým.

Posledná, 6. vydanie jazyka ECMAScript 2015 (alebo ES6) je pravdepodobne najvýznamnejšia aktualizácia od prvej verzie v roku 1997. Hlavným cieľom najnovšej verzie je poskytnúť lepšiu podporu pre vytváranie väčších aplikácií a knižníc. Znamená to zrelšiu syntax, nové skratky na zjednodušenie kódovania a tiež nové metódy, kľúčové slová, typy údajov a mnoho ďalších vylepšení.

Dokumentácia ES6 je rozsiahla, ak si prajete veľa čítať, môžete si stiahnuť celé špecifikácie z webovej stránky ECMA International. V tomto príspevku sa pozrieme na 10 vybraných funkcií, hoci ES6 má oveľa viac ponúknuť. Ak chcete experimentovať s tým, ES6 Fiddle je skvelé miesto na to, a môžete tiež nájsť nejaké vzorové úryvky tam.

Podpora ECMAScript 6

Dodávatelia prehliadačov postupne pridávajú podporu funkcií ECMAScript 6. Tu nájdete prehľadnú kompatibilnú tabuľku o podpore prehliadačov a kompilátorov pre nové funkcie.

Ak máte záujem o podporu ES6 v Node.js, pozrite si tu dokumenty.

Aj keď nie všetky funkcie sú v súčasnosti podporované, môžeme použiť prekladače, ako je Babel, aby sme preniesli náš ES6 kód na ES5. K dispozícii je skvelý plugin Grunt pre Babel, veľa úžasných zásuviek ES6 pre Grunt a úžasný plugin Gulp-Babel, takže našťastie máme veľa možností.

Týmto spôsobom môžeme začať používať rozšírenú syntax a možnosti, zatiaľ čo sa nemusíte obávať problémov kompatibility. Teraz sa pozrieme na funkcie.

1. Nový nechať kľúčové

ES6 predstavuje nový nechať kľúčové slovo, ktoré nám umožňuje deklarovať lokálne premenné v rámci bloku, ako napríklad vyhlásenie, výraz alebo funkciu (n vnútorné). Napríklad môžeme deklarovať a pre slučka nasledujúcim spôsobom a opätovne použite rovnaký názov premennej (jeho rozsah je obmedzený na pre slučka) v ďalšom ak vyhlásenie:

 pre (let i = 0; i < myArray.length; i++)  // Do something inside the block  if (x > 0 && x! = Y) // Opätovne používame "i" nechať i = x * y

Použitie nechať kľúčové slovo vedie k čistejšiemu a použiteľnejšiemu kódu. Rozdiel medzi nechať a var je v rozsahu, napríklad lokálna premenná definovaná výrazom var kľúčové slovo sa môže použiť v celej obalovej funkcii, zatiaľ čo premenné definované výrazom nechať pracujú iba v ich vlastnom (sub) bloku. nechať možno tiež použiť globálne, v tomto prípade sa správa rovnakým spôsobom ako var. Samozrejme, v ES6 môžeme stále používať var ak chceme.

2. Nové const kľúčové

Nové const kľúčové slovo umožňuje deklarovať konštanty, známe aj ako nemenné premenné, na ktoré nemôžeme neskôr priradiť nový obsah.

 const MY_CONST = 12; console.log (MY_CONST); // 12 MY_CONST = 16; // Tichá chyba, pretože nemôžeme priradiť novú hodnotu na konštantu

Zmeniteľné premenné nie sú vždy úplne nemeniteľné v ECMAScript 6, hoci, ak konštanta drží objekt, môžeme neskôr zmeniť hodnotu jeho vlastností a metód. To isté platí pre prvky poľa.

 konšt. 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

Stále nemôžeme priamo priradiť novú hodnotu objektu MY_CONSTANT vo vyššie uvedenom útržku kódu, čo znamená, že nemôžeme zmeniť mená vlastností a metód a tiež nemôžeme pridať nový alebo odstrániť existujúci, takže nemôžeme urobiť nasledujúca vec:

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

3. Šípové funkcie

ECMAScript 6 uľahčuje, ako píšeme anonymných funkcií, ako to môžeme úplne vynechať funkcie kľúčových slov. Stačí len použiť novú syntax pre funkcie šípky, pomenovaná po znamení šípky =>, ktorá nám poskytuje skvelú skratku.

 // 1. Jeden parameter v ES6 let sum = (a, b) => a + b; // v ES5 var sum = funkcia (a, b) return a + b; ; // 2. Bez parametrov v ES6 nechajte randomNum = () => Math.random (); // v ES5 var randomNum = funkcia () return Math.random (); ; // 3. bez návratu v ES6 nechajte message = (name) => alert ("Hi" + name + "!"); // v ES5 var message = funkcia (yourName) alert ("Hi" + yourName + "!"); ;

Je tu dôležitý rozdiel medzi bežnými a šípovými funkciami, tj šípovými funkciami, ktoré nedostávajú toto hodnota automaticky definovaná ako funkcie definované pomocou funkcie kľúčové slovo urobiť. Šípové funkcie lexikálne viazať toto hodnoty v súčasnom rozsahu. To znamená, že môžeme ľahko znovu použiť toto kľúčové slovo vo vnútornej funkcii. V ES5 je možné len s nasledujúcim hackom:

 // ES5 Použite kľúčové slovo "toto" vo vnútornej funkcii ... addAll: funkcia addAll (pieces) var self = this; _.each (kusy, funkcia (kus) self.add (kus);); , ... // ES6 rovnaká vnútorná funkcia teraz môže používať vlastnú "túto" ... addAll: funkcia addAll (kusy) _.each (kusy, kus => tento.add (kus)); , ...

Kód vyššie je z Mozilla Hacks

4. Nové nátierka operátor

Nové nátierka operátor je označený 3 bodmi (...) a môžeme ho použiť na podpísanie miesta viacerých očakávaných položiek. Jedným z najčastejších prípadov použitia operátora šírenia je vloženie prvkov poľa do iného poľa:

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

Môžeme tiež využiť pákový efekt nátierka operátor vo funkčných volaniach, v ktorom chceme preniesť argumenty z poľa:

 Nech je myArray = [1, 2, 3]; funkčná suma (a, b, c) vrátiť a + b + c;  console.log (suma (... myArray)); 6

nátierka operátor je pomerne flexibilný, pretože môže byť použitý viackrát v rovnakom volaní poľa alebo funkcie.

5. Predvolené hodnoty pre parametre a nové parametre odpočinku

Dobrá správa, že v ECMAScript 6 môžeme pridať predvolené hodnoty parametrom funkcie. To znamená, že ak neskončíme argumenty neskôr vo funkčnom volaní, budú použité predvolené parametre. V ES5 sú predvolené hodnoty parametrov vždy nastavené na nedefinovaný, takže nová možnosť ich nastavenia na čokoľvek, čo chceme, je určite skvelým rozšírením jazyka.

 súčet funkcií (a = 2, b = 4) return a + b;  konsole.log (suma ()); // 6 console.log (súčet (3, 6)); 9

ES6 tiež zavádza nový druh parametra, odpočinku. Vyzerajú a pracujú podobne ako pri šírení operátorov. Prichádzajú užitočnými, ak nevieme, koľko argumentov prebehne neskôr vo funkčnom volaní. Môžeme použiť vlastnosti a metódy objektu Array na parametre odpočinku:

 funkcia putInAlphabet (... args) nechal tried = args.sort (); návrat triedený;  console.log (putInAlphabet ("e", "c", "m", "a", "s", "c", "r", "i", "p", "t")); // a, c, c, e, i, m, p, r, s, t

6. Nové pre ... z výkaz

Pomocou nového pre ... z smyčka môžeme iterovať cez pole alebo iné iterovateľné objekty ľahko. Spolu s novým pre ... z ECMAScript 6 zavádza dva nové iteračné objekty, mapu pre mapy kľúčov / hodnôt a nastavenie pre zbierky jedinečných hodnôt, ktoré môžu byť aj primitívne hodnoty a referencie objektov. Keď používame pre ... z vyhlásenie, kód vnútri bloku sa vykoná pre každý prvok iterovateľného objektu.

 Nech je myArray = [1, 2, 3, 4, 5]; let suma = 0; pre (let i myArray) sum + = i;  konsole.log (súčet); // 15 (= 1 + 2 + 3 + 4 + 5)

7. Šablóny literálov

ECMAScript 6 nám poskytuje novú alternatívu pre zlučovanie reťazcov. Šablóny literálov dovoľte nám jednoducho vytvárať šablóny, v ktorých môžeme vložiť rôzne hodnoty do akéhokoľvek miesta, ktoré chceme. Aby sme tak urobili, musíme použiť $ ... syntax všade tam, kde chceme vložiť dáta, ktoré môžeme preniesť z premenných, polí alebo objektov nasledujúcim spôsobom:

 let zákazník = titul: "Ms", meno: "Jane", priezvisko: "Doe", vek: "34 '; let šablóna = 'Drahý $ zákazník.title $ zákazník.firstname $ zákazník.zoznam! Happy $ customer.age narodeniny! '; console.log (šablóny); // Milá pani Jane Doeová! Šťastné 34. narodeniny!

8. Triedy

ES6 zavádza triedy JavaScript, ktoré sú postavené na existujúcej dedičnosti založenej na prototype. Nová syntax umožňuje jednoduchšie vytvárať objekty, využívať dedičnosť a opätovne používať kód. Rovnako to uľahčí pre začiatočníkov, ktorí prichádzajú z iných programovacích jazykov, aby pochopili, ako funguje jazyk JavaScript.

V triede ES6 sú deklarované nové trieda kľúčové slovo a potrebujete mať konštruktor () metóda, ktorá sa nazýva pri inštancii nového objektu pomocou new myClass () syntax. Je tiež možné rozšíriť nové triedy s trieda Dieťa rozširuje rodič syntax, ktorý môže byť známy z iných objektovo orientovaných jazykov, ako napríklad PHP. Je tiež dôležité vedieť, že na rozdiel od deklarácií o funkciách a premenných sa trieda deklarácií NEMÁ VYHRADENÁ v ECMAScript 6.

 class Polygon konštruktor (výška, šírka) // konštruktor triedy this.name = 'Polygon'; this.height = height; this.width = width;  sayName () // class metóda console.log ('Ahoj, ja som', toto.meno + '.');  let myPolygon = nová polygón (5, 6); console.log (myPolygon.sayName ()); Ahoj, som polygon.

Kód vyššie z príkladov ES6 Fiddle, .

9. Moduly

Už ste niekedy premýšľali o tom, ako by bolo cool, ak by bol JavaScript modulárny? Samozrejme, existovali riešenia ako CommonJS (používané v Node.js) alebo AMD (Asynchronous Module Definition) (používané v RequireJS), aby to urobili predtým, ale ES6 zavádza moduly ako natívnu funkciu.

Musíme definovať každý modul vo vlastnom súbore a potom použiť export kľúčové slovo na export premenných a funkcií na ostatné súbory a súbor import kľúčové slovo na importovanie z ostatné súbory podľa nasledujúcej syntaxe:

 // Funkcia funkcia.js kocka (a) return a * a * a;  funkcia cubeRoot (a) return Math.cbrt (a);  export cube, cubeRoot // alebo: export cube ako cb, cubeRoot ako cr // app.js import cube, cubeRoot z 'functions'; console.log (kocky (4)); // 64 konsole.log (cubeRoot (125)); 5

Toto riešenie je skvelé, pretože kód uložený v module je zvonka neviditeľný a potrebujeme exportovať iba časť, ktorú chceme dostať do iných súborov. Môžeme robiť oveľa úžasnejšie veci s modulmi ES6, tu nájdete skvelé a podrobné vysvetlenie o nich.

10. Náboje nových metód

ECMAScript 6 zavádza mnoho nových metód pre existujúce String Prototype, Array Object, Array Prototype a Math Object. Nové metódy môžu výrazne zlepšiť spôsob, ako môžeme manipulovať s týmito entitami. Mozilla Dev má skvelé kódexové príklady nových doplnkov, stojí za to vziať čas a dôkladne ich preskúmať.

Len aby som ukázal, aké sú v pohode, tu je moja najobľúbenejšia metóda hľadania prototypu Array, ktorá nám umožňuje testovať určité kritériá na prvkoch poľa spúšťaním funkcie spätného volania na každom prvku a potom vrátiť prvý prvok, ktorý výnos pravdivý.

 funkcia isPrime (element, index, array) var start = 2; zatiaľ čo (štart <= Math.sqrt(element))  if (element % start++ < 1)  return false;   return element > 1;  console.log ([4, 6, 8, 12] .find (isPrime)); // undefined, nenašiel console.log ([4, 5, 8, 12] .find (isPrime)); 5

Kód vyššie z: Mozilla Dev