A JavaScript objektum (object) egy olyan adatstruktúra, amely kulcs-érték párokat (property-párokat) tartalmaz. Az objektumokat gyakran használjuk összetett adatok kezelésére és rendszerezésére.
Objektum létrehozása: literál segítségéve, ahol tulajdonképpen felsoroljuk az objektum tulajdonságait és azok értékeit, vagy konstruktorral. A literál gyorsabb megoldás.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// literállal let szemely= { nev: "János", kor: 30, munkanelkuli: true }; // konstruktorral let szemely= new Object(); person.nev= "János"; person.kor= 30; person.munkanelkuli = true; const auto = { marka: "Toyota", evjarat: 2020, elektromos: false }; |
Az objektum tulajdonságához az objektunnév.tulajdonság formában tudunk hozzáférni. Az objektum tulajdonságain végig lehet menni for … in ciklussal is.
Az objektumok tartalmazhatnak függvényeket, más objektumokat is! A javascript számos beépített objektumot tartalmaz, amelyekkel már találkoztunk is: Math, Date, Array
Tulajdonság módosítása, hozzáadása, törlése
|
1 2 3 4 |
// az előzőleg létrehozott autó objektumot használva auto.evjarat = 2021; // módosítás auto.szin = "piros"; // új tulajdonság hozzáadása delete auto.elektromos; // törlés |
Objektum bejárása (kulcs-értékek)
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// for .. in for (let kulcs in auto) { console.log(kulcs, auto[kulcs]); } console.log(Object.keys(auto)); // ["marka", "evjarat", "szin"] console.log(Object.values(auto)); // ["Toyota", 2021, "piros"] // Object.keys() / Object.values() / Object.entries() Object.entries(auto).forEach(([kulcs, ertek]) => { console.log(kulcs, ":", ertek); }); |
Hasznos műveletek objektumokkal
| Művelet | Leírás |
|---|---|
Object.assign() | Több objektum összemásolása |
Object.freeze(obj) | Az objektum módosíthatatlanná tétele |
Object.hasOwnProperty(key) | Tartalmazza-e a kulcsot (öröklést nem nézi) |
key in obj | Ellenőrzi, hogy a kulcs létezik-e (öröklést is nézi) |
Object.keys(obj).length | Objektum elemszáma |
Objektum tömbben
|
1 2 3 4 5 6 |
const diakok = [ { nev: "Anna", kor: 18 }, { nev: "Béla", kor: 19 } ]; diakok.forEach(d => console.log(d.nev)); |
Példák
Nézzünk egy példát! Hozzunk látre egy autó objektumot! Tároljuk el az autó márkáját, típusát! A motor adatai az objektumon belül egy másik objektumban lesznek eltárolva. Az auto objektum kapott egy metódust is, ami az adatok kiírását intézi egy div-be! Hasonlóan az adatok eléréshez, a metódust is könnyű elérni: auto.kiir()
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Objektum</title> </head> <body> <div id="info"></div> <script> let infoDiv = document.getElementById("info"); let auto = { marka: "Toyota", modell: "Corolla", motor: { loero: 110, uzemanyag: "benzin", }, kiir: function() { infoDiv.innerHTML += "márka:" + this.marka + "<br>"; infoDiv.innerHTML += "modell:" + this.modell + "<br>"; infoDiv.innerHTML += "lóerő:" + this.motor.loero + "<br>"; infoDiv.innerHTML += "üzemanyag:" + this.motor.uzemanyag + "<br>"; } } auto.kiir(); infoDiv.innerHTML = auto.marka; </script> </body> </html> |
Bővítsük ki az előző példát egy űrlappal, ahol több autó adatait is meg lehet adni! Az autókat tároljuk el egy tömbben! A tömbben található autókat egy lista elemeinként jelenítjük meg.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <form id="urlap"> Márka: <input type="text" id="marka" /><br /> Modell: <input type="text" id="modell" /><br /> Lóerő: <input type="text" id="loero" /><br /> Üzemanyag: <input type="text" id="uzemanyag" /><br /> <button type="submit">Hozzád</button> </form> <ul id="autoLista"></ul> <script> document.addEventListener('DOMContentLoaded',()=> { let urlap = document.getElementById("urlap"); let autoLista = document.getElementById("autoLista"); let tomb = []; urlap.addEventListener("submit",(event) => { event.preventDefault(); let marka = document.getElementById("marka").value; let modell = document.getElementById("modell").value; let loero = document.getElementById("loero").value; let uzemanyag = document.getElementById("uzemanyag").value; let auto = { marka: marka, modell: modell, motor: { loero: Number(loero), uzemanyag: uzemanyag, } }; tomb.push(auto); frissit(); urlap.reset(); }); function frissit() { autoLista.innerHTML = ''; console.log("valami"); tomb.forEach((auto, index) => { let li = document.createElement("li"); li.textContent = `${auto.marka} ${auto.modell} ${auto.motor.loero} ${auto.motor.uzemanyag}`; autoLista.appendChild(li); }); } }); </script> </body> </html> |
A harmadik példában local storage-ban fogjuk elráolni a laptopok adatait, hogy a böngésző bezárása után is megmaradjanak. A localstorage-ban JSON formátumban fogjuk tárolni az adatokat!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Objektumok + json + localStorage</title> </head> <body> <!-- űrlap --> <form id="urlap"> márka: <input type="text" id="marka"><br> cpu: <input type="text" id="cpu"><br> ram: <input type="text" id="ram"><br> <button type="submit">Hozzáad</button> </form> <!-- törlés gomb --> <button id="torol">Töröl</button> <!-- lista --> <ul id="laptopLista"></ul> <script> // amikor a dokumentum teljesen betöltődött document.addEventListener('DOMContentLoaded', () => { // hozzáférés az űrlaphoz és a lista elemeihez let urlap = document.getElementById("urlap"); let laptopLista = document.getElementById("laptopLista"); let torolGomb = document.getElementById("torol"); // az előzőleg tárolt laptopok betöltése a localStorage-ból, vagy egy üres tömb, ha nincs tárolt adat let laptopok_tomb = JSON.parse(localStorage.getItem("laptopok")) || []; // új laptop hozzáadása a tömbhöz és mentése a localStorage-ba function ujlaptop(marka, cpu, ram) { let laptop = { marka: marka, cpu: cpu, ram: ram }; // új laptop hozzáadása a tömbhöz laptopok_tomb.push(laptop); // frissített tömb mentése localStorage-ba localStorage.setItem("laptopok", JSON.stringify(laptopok_tomb)); } // A laptop lista kiírása a böngészőben1 function kiir() { // A lista kiürítése laptopLista.innerHTML = ''; // laptopok hozzáadása a listához laptopok_tomb.forEach((laptop, index) => { let li = document.createElement("li"); li.textContent = `${laptop.marka} ${laptop.cpu} ${laptop.ram}`; laptopLista.appendChild(li); }); } // eseménykezelő hozzáadása az űrlaphoz, ami lekezeli a form submit eseményt urlap.addEventListener("submit", (event) => { // alapértelmezett űrlap viselkedés megakadályozása event.preventDefault(); // űrlap mezők értékeinek lekérése let marka = document.getElementById("marka").value; let cpu = document.getElementById("cpu").value; let ram = document.getElementById("ram").value; // új laptop hozzáadása és a lista frissítése ujlaptop(marka, cpu, ram); kiir(); // űrlap kiürítése urlap.reset(); }); // eseménykezelő a törlés gombhoz, ami törli a localStorage tartalmát és frissíti a listát torolGomb.addEventListener("click", () => { // összes laptop törlése a localStorage-ból localStorage.removeItem("laptopok"); // összes laptop törlése a tömbből laptopok_tomb = []; // lista frissítése kiir(); }); // Az oldal betöltésekor a lista inicializálása kiir(); }); </script> </body> </html> |
4. példa: adatok tárolása objektumban. Tároljuk el játékok adatait, és űrlap segítségével tudjunk hozzáadni új játékot!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Játékok objektum</title> </head> <body> <h1>Játékok listája</h1> <!-- Játékok megjelenítése --> <div id="games-list"></div> <!-- Új játék hozzáadása --> <h2>Új játék hozzáadása</h2> <form id="game-form"> <label for="title">Cím:</label> <input type="text" id="title" name="title" required><br><br> <label for="year">Megjelenési év:</label> <input type="number" id="year" name="year" required><br><br> <label for="genre">Stílus:</label> <input type="text" id="genre" name="genre" required><br><br> <label for="developer">Fejlesztő:</label> <input type="text" id="developer" name="developer" required><br><br> <label for="location">Helyszín:</label> <input type="text" id="location" name="location" required><br><br> <button type="submit">Játék hozzáadása</button> </form> <script> const games = { jatekokTomb: [ { cim: "The Witcher 3: Wild Hunt", megjelenes: 2015, stilus: "RPG", kiado: { nev: "CD Projekt Red", helyszin: "Poland" } }, { cim: "Cyberpunk 2077", megjelenes: 2020, stilus: "Action RPG", kiado: { nev: "CD Projekt Red", helyszin: "Poland" } }, { cim: "Minecraft", megjelenes: 2011, stilus: "Sandbox", kiado: { nev: "Mojang", helyszin: "Sweden" } } ], // Metódus: játékok adatainak kiírása kiir: function() { const gamesListDiv = document.getElementById("games-list"); gamesListDiv.innerHTML = ""; // Törli a korábbi listát this.jatekokTomb.forEach((game) => { gamesListDiv.innerHTML += ` <div> <h3>${game.cim}</h3> <p>Megjelenési év: ${game.megjelenes}</p> <p>Stílus: ${game.stilus}</p> <p>Fejlesztő: ${game.kiado.nev} (${game.kiado.helyszin})</p> <hr> </div> `; }); }, // Metódus: új játék hozzáadása hozzaAd: function(cim, megjelenes, stilus, fejlesztoNev, helyszin) { this.jatekokTomb.push({ cim: cim, megjelenes: parseInt(megjelenes), stilus: stilus, kiado: { nev: fejlesztoNev, helyszin: helyszin } }); this.kiir(); // Játékok frissítése } }; // Játékok megjelenítése az oldal betöltésekor games.kiir(); // Űrlap kezelése document.getElementById("game-form"). addEventListener("submit", function(event) { event.preventDefault(); // Ne töltse újra az oldalt const cim = document.getElementById("title").value; const megjelenes = document.getElementById("year").value; const stilus = document.getElementById("genre").value; const fejlesztoNev = document.getElementById("developer").value; const helyszin = document.getElementById("location").value; // Új játék hozzáadása az objektumhoz games.hozzaAd(cim, megjelenes, stilus, fejlesztoNev, helyszin); // Űrlap kiürítése document.getElementById("game-form").reset(); }); </script> </body> </html> |