Modern Javascript funkciók - ES6 I.

Létrehozás dátuma:2022-09-16 15:04:59
Utolsó módosítás dátuma:2022-09-16 15:06:51
Mára a legtöbb weboldal dobta a régi Flash Playeres funkciókat, felváltotta őket a HTML5 és a Javascript használata. Ez utóbbi viszonylag gyakran kap frissítéseket, de aki nem követi, annak kevés esélye van észlelni, hiszen a böngészők nem igazán szoktak szólni róla, ha bejön egy-egy új szabvány amit implementálnak. 1997 óta nagy utat tett meg a JS, mára a legtöbb keretrendszer alapvető elvárásnak tekinti az ES6-ot. Az ECMAScript 2015 (azaz az ES6) számos új funkciót hozott a 4-6 évvel korábbi (attól függ, hogy az 5.1-et el akarjuk-e fogadni vagy sem) megoldáshoz képest.
Modern Javascript funkciók - ES6 I.

Nézzük is mik ezek:

Let

A var kulcsszóhoz hasonló, változókat tudunk deklarálni vele, azonban a scope kicsit más. Amennyiben blokkon belül hozzuk létre, azaz valahogy így:

Úgy a kapcsos zárójeleken kívül az x bizony már nem lesz 1. Ha korábban deklaráltuk, akkor az előző értéket veszi fel, ha nem, akkor undefined lesz. Ha ugyanezt varral csináljuk, a blokkon belüli értékünk marad a zárás után is.

Function-scope tekintetében a let és a var között nincs igazán különbség, az elérésük ugyanolyan, a function zárásakor kívül már nem lesz elérhető az értékük.

Global-scopeban is lehet használni, egyszerűen csak blokkon és függvényen kívül hozzuk létre

const

Gyakorlatilag ugyanúgy működik mint a let, azzal az egy különbséggel, hogy csak deklarálásnál tudunk neki értéket adni. Így biztosak lehetünk abban, hogy később nem írjuk felül véletlenül.

Arrow function

Shorthand a függvény deklarációkhoz. A segítségével elhagyhatjuk a function kulcsszót egy névtelen függvénynél, illetve akár a kapcsos zárójeleket és a returnt is

Ennek az ES5-ös megfelelője így néz ki:

For/Of ciklus

Leginkább a foreachre hasonlít, egy iterable objektumon tudunk végigmenni vele:

Nem csak tömbökön működik. Például egy string is iterable, ezáltal így is használhatjuk:

Vegyük észre, hogy ebben az esetben nem a konkrét betűket, hanem annak indexeit kapjuk meg az y-ban, ezért van szükség a címzésre.

Map

kulcs-érték párokat tartalmaz, melyeknek megtartja a hozzáadási sorrendjét is:

Tartalmaz néhány beépített metódust minden létrehozott Map:

  • set: érték beállítása egy kulcshoz
  • get: érték lekérdezése kulccsal
  • clear: map kiürítése
  • delete: elem törlés kulcs alapján
  • has: tartalmazza-e a megadott kulcsot a map
  • entries: A kulcs-érték párokat adja vissza egy iterator objectben
  • keys: ugyanaz mint az entries csak kulcsokkal
  • values: ugyanaz mint a keys csak értékekkel

Ezen kívül a már megszokott forEach is működik rajta, illetve van egy size propertyje, ami az elemszámot adja vissza.

Set

Hasonló a maphoz, annyi különbséggel, hogy egyedi értékeket tárolhatunk benne, nincsenek kulcs-érték párok.

Class

Magyarul osztályként találkozhatunk vele, az objektumok számára egy sablon, belső metódusokkal és tulajdonságokkal:

A construcor mindig kötelező, a példányosításnál ez a függvény fog lefutni:

Példányosítás után pedig a beállított tulajdonságokat le tudjuk kérdezni:

Symbol

Egyedi azonosítónak használják, mely minden létrehozásnál más értéket vesz fel.

Így a Symbol által létrehozott egyedi azonosítóval kérhetjük le a truck objektum id-ját, ami csak és kizárólag a felette létrehozott Symbol objektummal működik, ha ugyan ezekkel a paraméterekkel létrehozunk egy másikat, azzal már nem fog.

Alapértelmezett értékek a paramétereknél

A függvénydeklarációknál megadható a paraméterek kezdőértéke, amely akkor állítódik be, ha oda a függvényhívásnál nem adtunk meg semmit.

Így létrehozhatunk opcionálisan megadható függvényparamétereket.

Rest paraméter

Megvizsgálhatjuk, hogy egy stringben megtalálható-e egy másik:

Így az első 2 számot fixen kiírja a write, míg a harmadikat vagy azután következőket már nem kötelező megadnunk. Ha mégis megadjuk, azokat is kiírja.

Persze önmagában is használhatjuk, abban az esetben így kezdődne a létrehozás:

String.includes()

Megvizsgálhatjuk, hogy egy stringben megtalálható-e egy másik:

Ezen kívül a startsWith() és az endsWith() metódusokkal ellenőrizhetjük, hogy a megadott szöveggel kezdődik vagy végződik-e a stringünk.

Array.from()

Tömböt csinál egy iterable objektumból.

Az ES6-nak itt nincs még vége, számos Javascript trükk épül rá amit a honlapkészítés során felhasználhatunk. Egy következő cikkben ismertetjük a további hasznos funkciókat, amelyek ezzel a szabvánnyal kerültek be a nyelvbe.

Segítségre van szüksége?

Vegye fel velünk a kapcsolatot! Csapatunk szívesen segít bármilyen digitális megoldás elkészítésében.