ECMAScript 6 - 10 Awesome New Features

Tudtad, hogy a JavaScript (a JScript és az ActionScript) mellett egy általános célú kliensoldali parancsfájl-specifikáció, az ECMAScript neve? Ahhoz, hogy ez a csúnya definíció egy kicsit vonzóbb legyen, azt mondhatjuk, hogy az ECMAScript (vagy hivatalosan ECMA-262) a szabvány, amely meghatározza, hogyan használjuk a JavaScript-t, és mit tudunk elérni ezzel.

A legutóbbi, 6. kiadás, az ECMAScript 2015 (vagy ES6) valószínűleg a legjelentősebb frissítés az első verzió óta 1997-ben. A legújabb kiadás fő célja az volt, hogy jobban támogassa a nagyobb alkalmazások és könyvtárak létrehozását. Ez egy érettebb szintaxist, új kódokat könnyebbé tenni, valamint új módszereket, kulcsszavakat, adattípusokat és sok más fejlesztést is tartalmaz..

Az ES6 dokumentációja kiterjedt, ha szeretne sokat olvasni, akkor letöltheti a teljes adatot az ECMA International honlapjáról. Ebben a hozzászólásban megnézzük a 10 választott funkciót, annak ellenére, hogy az ES6 sokkal többet kínál. Ha azt szeretné, hogy kísérletezzen vele, az ES6 Fiddle remek hely erre, és ott találhat néhány példakódrészletet is.

Az ECMAScript 6 támogatása

A böngésző-gyártók fokozatosan támogatják az ECMAScript 6 szolgáltatásait. Itt találhat egy jó kompatibilitási táblázatot a böngésző és a fordító támogatásáról az új funkciókhoz.

Ha érdekli az ES6 támogatás a Node.js-ban, nézd meg a dokumentumokat itt.

Bár nem minden jellemzője jelenleg támogatott, akkor az olyan transzpilereket, mint a Babel, az ES6-kód ES5-re való átvitelére használhatjuk. Van egy hűvös Grunt plugin a Babel számára, sok félelmetes ES6 plugin a Grunt számára, és egy csodálatos Gulp-Babel plugin odakinn, így szerencsére rengeteg választás van.

Így elkezdhetjük a továbbfejlesztett szintaxis és képességek használatát, miközben nem kell aggódnunk a kompatibilitási problémák miatt. Most nézzük meg a funkciókat.

1. Új enged Kulcsszó

Az ES6 bemutatja az új enged kulcsszó, amely lehetővé teszi számunkra, hogy helyi változókat deklaráljunk egy blokk hatókörében, például egy nyilatkozatot, kifejezést vagy egy (n belső) függvényt. Például kijelenthetjük a mert hurok a következő módon, majd újra ugyanazt a változónevet használja (mivel a hatóköre az mert hurok) a következő ha nyilatkozat:

 a (i = 0; i < myArray.length; i++)  // Do something inside the block  if (x > 0 && x! = Y) // Újra használjuk az "i" -t, i = x * y

Használni a enged A kulcsszó tisztább és használhatóbb kódot eredményez. A különbség enged és var a hatókörben van, például egy helyi változó, amelyet a var A kulcsszó használható a teljes zárási funkcióban, míg a változók által definiált változók enged csak saját (al) blokkjukban dolgozhat. enged globálisan is használható, ebben az esetben ugyanúgy viselkedik, mint var. Természetesen az ES6-ban még mindig használhatjuk var ha akarjuk.

2. Új const Kulcsszó

Az új const a kulcsszó lehetővé teszi az állandókat, amelyek változatlan változókként is ismertek, amelyekre később nem adhatunk új tartalmat.

 const MY_CONST = 12; console.log (MY_CONST); // 12 MY_CONST = 16; // Csendes hiba, mivel nem adhatunk új értéket konstansnak

Az ECMAScript 6-ban nem mindig változtathatóak a változhatatlan változók, mintha egy konstans egy objektumot tartana, később megváltoztathatjuk tulajdonságainak és módszereinek értékét. Ugyanez igaz egy tömb elemeire is.

 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

A fenti kódrészletben még mindig nem adhatunk át új értéket a MY_CONSTANT objektumra, ami azt jelenti, hogy nem tudjuk megváltoztatni a tulajdonságok és módszerek nevét, és nem is adhatunk hozzá újat vagy törölhetünk már létezőt. következő dolog:

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

3. Nyíl funkciók

Az ECMAScript 6 megkönnyíti az írást névtelen funkciók, mivel teljesen elhagyhatjuk a funkció kulcsszó. Csak az új szintaxist kell használni nyíl funkciók, a => nyíl jele (kövér nyíl) nevét kapta, amely nagyszerű parancsikont biztosít számunkra.

 // 1. Az ES6-ban egy paraméter értéke = (a, b) => a + b; // az ES5 var sum = függvényben (a, b) return a + b; ; // 2. Az ES6 paraméterek nélkül hagyja, hogy randomNum = () => Math.random (); // az ES5 var randomNum = függvényben () return Math.random (); ; // 3. Visszatérés nélkül az ES6-ban hagyja üzenet = (name) => figyelmeztetés ("Hi" + név + "!"); // az ES5 var message = function (yourName) figyelmeztetés ("Hi" + yourName + "!"); ;

Fontos különbség van a normál és a nyíl funkciók között, azaz a nyíl funkciók nem kapnak egy ez értéke automatikusan hasonló a funkció kulcsszó nem. Nyíl funkciók lexikálisan kötődik a ez értéket a jelenlegi hatókörre. Ez azt jelenti, hogy könnyen újra felhasználhatjuk ez kulcsszó egy belső függvényben. Az ES5-ben csak az alábbi hackekkel lehetséges:

 // ES5 Hack, hogy használja ezt a kulcsszót egy belső függvényben … addAll: függvény addAll (darab) var self = this; _.magyar (darab, függvény (darab) self.add (darab);); ,… // ES6 ugyanazt a belső funkciót használhatja most saját "ez" … addAll: függvény addAll (darab) _.each (darab, darab => this.add (darab)); ,…

A fenti kód a Mozilla Hacks-től származik

4. Új terjedését Operátor

Az új terjedését az üzemeltetőt 3 pont (…) jelöli, és felhasználhatjuk arra, hogy aláírja a több várt elem helyét. Az elterjedt operátor egyik leggyakoribb esete a tömb elemeinek beillesztése egy másik tömbbe:

 hadd myArray = [1, 2, 3]; hadd newArray = [… myArray, 4, 5, 6]; console.log (newArray); // 1, 2, 3, 4, 5, 6 

Azt is figyelembe vehetjük a terjedését üzemeltető olyan funkcióhívásokban, amelyekben egy tömb érvelését szeretnénk átadni:

 hadd myArray = [1, 2, 3]; függvényösszeg (a, b, c) vissza a + b + c;  console.log (összeg (… myArray)); // 6

A terjedését Az operátor elég rugalmas, mivel ugyanabban a tömbben vagy funkcióhívásban többször is használható.

5. Alapértelmezett értékek a paraméterek és az új pihenőparaméterek számára

Jó hír, hogy az ECMAScript 6-ban alapértelmezett értékeket adhatunk a függvény paramétereihez. Ez azt jelenti, hogy ha nem továbbítunk argumentumokat később a függvényhívásban, akkor az alapértelmezett paraméterek kerülnek felhasználásra. Az ES5-ben a paraméterek alapértelmezett értékei mindig vannak beállítva határozatlan, így az új lehetőség arra, hogy azokat a kívánságunkra állítsuk, minden bizonnyal a nyelv nagyszerűsége.

 függvényösszeg (a = 2, b = 4) return a + b;  console.log (összeg ()); // 6 konzol.log (összeg (3, 6)); // 9

Az ES6 újfajta paramétert mutat be, a pihenési paraméterek. Úgy néznek ki és működnek, mint az elterjedt operátorok. Kényelmesek, ha nem tudjuk, hogy hány argumentumot kapunk később a függvényhívásban. Az Array objektum tulajdonságait és módszereit használhatjuk a többi paraméterre:

 Funkció putInAlphabet (… args) let sorted = args.sort (); vissza rendezés;  console.log (putInAlphabet ("e", "c", "m", "a", "s", "c", "r", "i", "p", "t")); // a, c, c, e, i, m, p, r, s, t

6. Új … -ig Nyilatkozat

Az új segítségével … -ig hurok segítségével könnyen elrendezhetjük a tömböket vagy más iterable objektumokat. Az újdal együtt … -ig nyilatkozat, az ECMAScript 6 két új iterable objektumot is bemutat, térképet a kulcs / érték térképekhez, és állítsa be az egyedi értékek gyűjteményeit, amelyek szintén primitív értékek és objektum hivatkozások lehetnek. Amikor a … -ig utasítás, a blokk belsejében lévő kód az iterable objektum minden egyes elemére kerül végrehajtásra.

 hadd myArray = [1, 2, 3, 4, 5]; legyen összeg = 0; a (a myArray) i-nek sum + = i;  console.log (összeg); // 15 (= 1 + 2 + 3 + 4 + 5)

7. Sablon írása

Az ECMAScript 6 egy új alternatívát biztosít a húrkoncentrációhoz. Sablon literálok lehetővé teszi számunkra, hogy könnyen készítsünk sablonokat, amelyekbe különböző értékeket tudunk beágyazni bármely kívánt helyre. Ehhez használnunk kell a $ … szintaxis mindenhol, ahol a következő változókból, tömbökből vagy objektumokból átadható adatokat szeretnénk beszúrni:

 let customer = title: 'Ms', név: 'Jane', vezetéknév: 'Doe', kor: '34'; let template = 'Kedves $ customer.title $ customer.firstname $ customer.surname! Boldog $ customer.age th születésnap! console.log (sablon); // Kedves Jane Doe! Boldog 34. születésnap!

8. Osztályok

Az ES6 bemutatja a JavaScript osztályokat, amelyek a meglévő prototípus alapú öröklésen alapulnak. Az új szintaxis egyszerűbbé teszi az objektumok létrehozását, az öröklés tőkeáttételét és a kód újbóli felhasználását. Ez megkönnyíti a más programnyelvekről érkező kezdők számára a JavaScript működésének megértését.

Az ES6-ban az osztályokat az új osztály kulcsszó, és szükség van a konstruktőr() az új objektumot a új myClass () szintaxis. Lehetőség van új osztályok kibővítésére is a osztály Gyermek kiterjeszti a szülőt szintaxis, amely más objektum-orientált nyelvekről, például a PHP-ről ismerős. Fontos tudni azt is, hogy a funkció- és változó nyilatkozatokkal ellentétben az osztály-nyilatkozatok NEM merülnek fel az ECMAScript 6-ban.

 osztály Polygon konstruktor (magasság, szélesség) // osztály konstruktor this.name = 'sokszög'; ez a magasság = magasság; this.width = szélesség;  sayName () // class method console.log ('Szia, én vagyok', ez a név + '.');  hadd myPolygon = új poligon (5, 6); console.log (myPolygon.sayName ()); // Szia, sokszög vagyok.

A fenti kód az ES6 Fiddle példákból származik, .

9. Modulok

Gondolkozott már azon, hogy mennyire hűvös lenne, ha a JavaScript moduláris lenne? Természetesen előfordultak olyan megoldások, mint a CommonJS (a Node.js-ban használt) vagy az AMD (Asynchronous Module Definition) (amit a RequireJS-ben használnak), hogy ezt megelőzze, de az ES6 a modulokat natív funkcióként vezeti be.

Minden modult saját fájljában kell definiálnunk, majd a export kulcsszó a változók és funkciók exportálásához nak nek más fájlok, és a import kulcsszót importálni tól től más fájlok, a következő szintaxis szerint:

 // function.js függvénykocka (a) vissza a * a * a;  funkció cubeRoot (a) return Math.cbrt (a);  export kocka, cubeRoot // vagy: kocka mint cb, cubeRoot as cr // app.js importálása cube, cubeRoot a 'függvényekből'; console.log (kocka (4)); // 64 konzol.log (cubeRoot (125)); // 5

Ez a megoldás ragyogó, mivel a modulban tárolt kód kívülről láthatatlan, és csak azt a részt kell exportálnunk, amelyet más fájlokhoz szeretne elérni. Sokkal csodálatosabb dolgokat tehetünk az ES6 modulokkal, itt talál egy nagy és részletes magyarázatot ezekről.

10. Új módszerek terhelése

Az ECMAScript 6 számos új módszert mutat be a meglévő String Prototype, Array Object, Array Prototype és Math Object számára. Az új módszerek jelentősen javíthatják, hogyan kezelhetjük ezeket az entitásokat. A Mozilla Dev nagyszerű példái az új kiegészítéseknek, érdemes időt venni és alaposan megvizsgálni.

Csak azért, hogy megmutassuk, milyen hűvösek legyenek, itt van a kedvencem: az Array prototípus keresési módja, amely lehetővé teszi egy tömb bizonyos elemeinek tesztelését az egyes elemek visszahívási funkciójának végrehajtásával, majd az első elem visszajuttatásával, majd visszatér igaz.

 függvény isPrime (elem, index, tömb) var start = 2; míg (kezdje <= Math.sqrt(element))  if (element % start++ < 1)  return false;   return element > 1;  console.log ([4, 6, 8, 12] .find (isPrime)); // undefined, nem található console.log ([4, 5, 8, 12] .find (isPrime)); // 5

A fenti kód: Mozilla Dev