Az object adattípus¶
A JavaScript egyik beépített adattípusa az object
(objektum). Ennek segítségével komplex entitásokat tudunk létrehozni, amelyekbe property-érték párokat helyezhetünk.
Object létrehozása¶
JavaScriptben objektumokat kétféleképpen hozhatunk létre:
- a
new Object()
konstruktor használatával - a kapcsos zárójel (
{}
) operátorok segítségével.
Példa: Üres object-ek létrehozása
1 2 |
|
A továbbiakban a kapcsos zárójeles szintaxist fogjuk használni a jegyzetben. A kapcsos zárójel között, vesszővel elválasztva megadhatjuk az adott objektum property-érték párjait property: érték
formában.
Példa: Egy személy object létrehozása
1 2 3 4 5 6 |
|
Object elemeinek elérése¶
Egy object adott property-jéhez tartozó értéke kétféleképpen is lekérdezhető:
- a
.
(pont) operátorral - a
[]
(szögletes zárójel) operátorral.
Példa: A nev
property-hez tartozó érték lekérése
1 2 3 4 |
|
Kimenet
Béla Béla
A lényegi különbség a két operátor működésében, hogy amennyiben változót adunk át nekik, akkor a .
operátor a változó nevét tekinti kulcsnak, míg a []
operátor a változó értékét fogja kulcsként venni.
Példa: A .
és []
operátorok közötti működésbeli különbség
1 2 3 4 5 |
|
Kimenet
undefined 30
A példában az első esetben a .
operátor egy valami
nevű property-t keresett az objektumon belül, amit nem talált meg, így undefined
értéket kaptunk. A második esetben a []
operátor, már a valami
változóban szerepelő értéket, az eletkor
property-t kereste, és mivel van ilyen property-nk az objektumunkban, ezért az ahhoz tartozó értéket kaptuk vissza.
Fontosabb object műveletek¶
Property előfordulásának ellenőrzése¶
Az előző példában láttuk, hogy amennyiben az object egy nem létező property-jének az értékét szeretnénk lekérni, undefined
értéket kapunk. Ezt kihasználva könnyedén tudjuk ellenőrizni, hogy egy adott property szerepel-e az object-ben.
1 2 3 4 5 6 |
|
Kimenet
Van foglalkozas nevű property-nk! Értéke: programozó
A fenti módszerrel viszont van egy probléma: mi van akkor, ha a foglalkozas
property értékét undefined
-ra állítjuk be? Ekkor az if
-ben megadott feltétel nem fog teljesülni, és hibásan úgy vesszük, mintha nem szerepelne ilyen nevű property az object-ben. Emiatt célszerű inkább használni az in
operátort.
1 2 3 4 5 6 7 8 9 10 |
|
Kimenet
Van foglalkozas nevű property-nk!
Érték módosítása¶
Az object egy adott property-jéhez tartozó értékét módosíthatjuk is. Hivatkozunk a módosítani kívánt elemre (a fentebb tárgyalt .
vagy []
operátorok valamelyikével), majd az =
operátorral beállítjuk az új értéket.
1 2 3 4 |
|
Kimenet
Béla munkát váltott, mától asztronauta!
Új property-érték pár beszúrása¶
Az objektumainkba bármikor beszúrhatunk új property-érték párokat. A beszúrás szintaxisa nagyon egyszerű: megadjuk az object beszúrni kívánt property-jének a nevét, majd =
operátorral értéket adunk neki.
1 2 3 4 |
|
Kimenet
{ nev: 'Béla', eletkor: 30, foglalkozas: 'programozó', kedvencSzin: 'átlátszó' }
Property-érték pár törlése¶
A delete
kulcsszóval lehetőségünk van egy adott property-t és a hozzá tartozó értéket törölni az object-ből.
1 2 3 4 |
|
Kimenet
{ nev: 'Béla', eletkor: 30 }
Object-ek bejárása¶
Az object-ek property-érték párjának bejárása legegyszerűbben egy for
-ciklussal tehető meg. Az alábbi három módszer mindegyike ezt valósítja meg (amelyik a 3 közül a legszimpatikusabb a számunkra, azt használjuk).
for
-in
szerkezet:
1 2 3 4 5 |
|
for
-of
szerkezet, azObject.keys()
használatával:
1 2 3 4 5 |
|
for
-of
szerkezet, azObject.entries()
használatával:
1 2 3 4 5 |
|
Figyelem
Ha böngészős környezetben lennénk, akkor érdemes tudnunk, hogy a harmadik, Object.entries()
használatával történő megvalósítást az Internet Explorer nem támogatja natív módon.
Úton az objektumorientált paradigma felé¶
Az object egy hasznos, viszonylag gyakran használt adatszerkezet JavaScriptben. Ennek ellenére van némi probléma vele, amit érdemes megjegyezni.
Ha az objektumunkban van egy függvény, és az objektum bejárása során azt meg szeretnénk hívni, akkor ez egy kissé körülményes.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
Kimenet
Szia! Béla vagyok, 30 éves.
Emellett, ha nem 1 személyünk lenne, hanem mondjuk 100, akkor 100 különböző személy object-et kellene kézzel létrehoznunk, amelyekben külön-külön megadnánk a property-érték párokat.
Ezt persze nem szeretnénk manuálisan elvégezni, így felmerül az igény arra, hogy hozzunk létre egy "blueprint"-et, ami megmondja, hogy hogyan fognak kinézni az objektumaink. Ez a "blueprint" lesz a más nyelvekből ismerős osztály. Ha van egy Szemely
osztályunk, abból már egyszerűen tudunk személy objektumokat készíteni a példányosítás során.
Az osztályokról, illetve az objektumorientáltság JavaScriptben való megvalósításáról a következő gyakorlaton fogunk tanulni.