Tömbök a JavaScript-ben (Tömbök magyarázata, létrehozása, elemek hozzáadása, módosítása, törlése, indexelés, tömb hosszának megállapítása)

Ebben a leckében a tömbökkel fogunk megismerkedni JavaScript környezetben. Elmagyarázzuk, hogy mik azok a tömbök, mire szokták használni őket. Majd az elmélet után áttérünk a gyakorlatra, azaz létrehozunk egy tömböt, feltöltjük elemekkel, lekérdezzük a létrehozott tömb egyes elemeit és módosítjuk néhány elemet. Illetve megvizsgálunk egy függvényt, amellyel lekérhetjük a tömb hosszát, azaz az elemeinek a számát.

Tömbök a JavaScript-ben (Tömbök magyarázata, létrehozása, elemek hozzáadása, módosítása, indexelés, tömb hosszának megállapítása) című cikk borítóképe

Tömbök a JavaScript-ben (Tömbök magyarázata, létrehozása, elemek hozzáadása, módosítása, törlése, indexelés, tömb hosszának megállapítása)

Ebben a leckében a tömbökkel fogunk megismerkedni JavaScript környezetben. Elmagyarázzuk, hogy mik azok a tömbök, mire szokták használni őket. Majd az elmélet után áttérünk a gyakorlatra, azaz létrehozunk egy tömböt, feltöltjük elemekkel, lekérdezzük a létrehozott tömb egyes elemeit és módosítjuk néhány elemet. Illetve megvizsgálunk egy függvényt, amellyel lekérhetjük a tömb hosszát, azaz az elemeinek a számát.

Mik azok a tömbök?

A tömb tulajdonképpen egy speciális változó, amely egyidejűleg több elemet képes tárolni. A WikiPédia így fogalmazza meg a tömbök fogalmát: ,,A számítástudományban a tömb (angolul array) olyan adatszerkezet, amelyet nevesített elemek csoportja alkot, melyekre sorszámukkal (indexükkel) lehet hivatkozni.”

Mire való a tömb?

Olyan esetekben használjuk, amikor több elem szerepel egy listán, általában ezek az elemek összefüggnek. Például van egy listánk, amely különböző webes programnyelveket tartalmaz. Itt a kapcsolódási pont az, hogy minden elemünk egy webes programnyelv.

A fent említett elemeket (programnyelveket) tárolhatnánk az alábbi módon is:

var nyelv1 = "HTML";
var nyelv2 = "CSS";
var nyelv2 = "JS";
Code language: JavaScript (javascript)

A fenti példával sincs semmilyen gond, működik, rendesen lefut, de be kell látnunk, hogy egy kicsit sok időbe telik mire egyesével létrehozunk annyi változót, ahány elemünk van. És akkor még nem is beszéltünk arról, hogy mi van akkor, ha az összes elemet megszeretnénk vizsgálni. Nehéz lenne rá olyan módszert találni, ami gyors is és egyszerű.

Ilyenkor jönnek képbe a tömbök, ha egy tömböt hozunk létre, akkor nincs szükség arra, hogy minden egyes programnyelvet külön változóban tároljunk, szimplán létrehozunk egy tömböt és abba pakoljuk bele az összes értéket, amit alapesetben külön-külön változókban tárolnánk.

A fenti példa így néz ki tömbbel megoldva:

var nyelvek = ["HTML", "CSS", "JS"];
Code language: JavaScript (javascript)

Mi az az index?

A tömb elemeire a sorszámukkal lehet hivatkozni. Először tekintsük meg az alábbi ábrát, amihez a kép alatt hozzáfűzöm a magyarázatot.

JavaScript (JS) tömbök során használatos indexek magyarázata szemléletes példával, grafikával

Szóval van egy tömbünk, amelynek vannak elemei, ezeket az elemeket sorszámokkal jelöljük, ezeket a sorszámokat nevezzük indexnek. Láthatjuk, hogy a tömbünk első eleme a “HTML”. Az informatikában a számozás nem egytől, hanem nullától kezdődik! Így az első sorszámunk nem 1, hanem 0 lesz. Azaz a “HTML” elemünket úgy tudjuk elérni, ha lekérjük a “nyelvek[]” tömbünk nulladik indexű elemét.

Ha a “JS” után szeretnénk berakni egy újabb elemet, mondjuk a “PHP”-t, akkor az utolsó elem után következő elemre kell hivatkoznunk, jelenesetben a 3. indexre.

Tömb létrehozása

Arról már beszéltünk egy korábbi cikkünkben, hogy létezik const, let és var, szóval azt most nem fogjuk tárgyalni, hogy miért éppen var-t írok minden tömb deklarációhoz. (Annyit megsúgok, hogy azért, mert én ezt használom a leggyakrabban, de azért olvassátok el a cikket, nagyon sok hasznos információ találhattok benne.)

Szóval ennyi mellébeszélés után kezdjük a tömb létrehozásának a szintaktikájával:

var TÖMBNÉV = [ELEM1, ELEM2, ELEM3];
Code language: JavaScript (javascript)

Példaként a fent említett példát egy az egyben megismételhetjük itt is:

A var (vagy const, let) kulcsszó után megadjuk a tömb nevét, majd az egyenlőségjel után két szögletes zárójel között felsoroljuk a tömbünk elemeit. Ezt hívjuk az úgynevezett ömlesztett tömb deklarációnak. Egy tömb létrehozása során az elemek felsorolásánál nem számítanak a szóközök, így akár így is létrehozhatjuk a tömbünket:

var nyelvek = ["HTML", "CSS", "JS"];
Code language: JavaScript (javascript)

Most nem mutatom meg a kimenetet, mert a tömb létrehozásának nincs szemmel látható eredménye.

var TÖMBNÉV = [
  ELEM1,
  ELEM2,
  ELEM3
];
Code language: JavaScript (javascript)

Ilyenkor a tömbünk sokkal átláthatóbb lesz, viszont az eredmény ugyanaz, mint fentebb. A fenti példát ugyanúgy elkészíthetjük az átláthatóbb megoldással is.

var nyelvek = [
  "HTML",
  "CSS",
  "JS"
];
Code language: JavaScript (javascript)

Természetesen egy tömb nem csak 3 elemet tartalmazhat, nyugodtan írhatunk negyedik, ötödik vagy százhuszonhatodik elemet is.

Úgy is létrehozhatunk egy tömböt, hogy nem adunk neki kezdő elemeket, csak utólag adjuk hozzá azokat. Ez így néz ki:

var TÖMBNÉV = [];

//TETSZŐLEGES KÓDOK

TÖMBNÉV[0] = ELEM1;
TÖMBNÉV[1] = ELEM2;
TÖMBNÉV[2] = ELEM2;
Code language: JavaScript (javascript)

Az erre vonatkozó példa:

var nyelvek = [];

nyelvek [0] = "HTML";
nyelvek [1] = "CSS";
nyelvek [2] = "JS";
Code language: JavaScript (javascript)

Legutolsó megoldásként létrehozhatunk a “new Array()” kulcsszóval is tömböt, de ez is ugyanazt csinálja, mint a fenti megoldások. De az egyszerűség, olvashatóság és a futási sebesség érdekében nem szokták ezt a megoldás használni.

var TÖMBNÉV = new Array(ELEM1, ELEM2, ELEM3);
Code language: JavaScript (javascript)

Tömb elemének elérése

Fentebb volt már szó az indexelésről, ami elengedhetetlen egy elem eléréséhez, hiszen ha nem tudjuk az index számát, akkor nem is tudunk hozzáférni.

Egy elemet egyszerűen úgy érhetünk el, ha megadjuk, hogy a tömb hányadik indexére vagyunk kíváncsiak, ezt így tehetjük meg:

TÖMBNÉV[INDEX];
Code language: CSS (css)

Így meg is szereztük a tömb adott elemének az értékét, de mivel azt nem tároltuk el egy változóban, vagy nem írattuk ki sehova, így nem is tudunk vele mit kezdeni.

Nézzünk rá egy példát, hogy hogyan érdemes ezt felhasználni:

JavaScript + HTML kód

<!DOCTYPE html>
 <html>
  <body>
   <p id="szoveg"> </p>

   <button onclick="elso()">Első elem (0. index)</button>
   <button onclick="masodik()">Második elem (1. index)</button>
   <button onclick="harmadik()">Harmadik elem (2. index)</button>

   <script>
      var nyelvek = ["HTML", "CSS", "JS"]; 

      function elso() {
         document.getElementById("szoveg").innerHTML = nyelvek[0];
      }

      function masodik() {
         document.getElementById("szoveg").innerHTML = nyelvek[1];
      }

      function harmadik() {
         document.getElementById("szoveg").innerHTML = nyelvek[2];
      }
  </script>

 </body>
</html>
Code language: HTML, XML (xml)

Eredmény


>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Tömb összes elemének elérése

Lehetőségünk van arra is, hogy a tömbnek ne csak egyetlen egy elemét kérjük le, hanem egyszerre az összeset is. Ezt úgy érhetjük el, hogy szimplán leírjuk a tömb nevét az alábbi módon:

TÖMBNÉV

Nincs szükség se indexre, se szögletes zárójelre, se semmire. Nézzünk erre is egy példát, hogy könnyebben érthető legyen.

JavaScript + HTML kód

<!DOCTYPE html>
 <html>
  <body>
   <p id="szoveg"> </p>

   <button onclick="osszes()">Összes elem</button>
   <script>
      var nyelvek = ["HTML", "CSS", "JS"]; 

      function osszes() {
         document.getElementById("szoveg").innerHTML = nyelvek;
      }
  </script>

 </body>
</html>
Code language: HTML, XML (xml)

Eredmény


>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Tömb elemének módosítása

Ahhoz hogy módosítsunk egy tömbelemet, tisztában kell lennünk az indexével, vagy ha nem vagyunk tisztában vele, akkor ki kell derítenünk.

Ha megvan az index, akkor az alábbi utasítással módosíthatjuk a tömb elemét:

TÖMBNÉV[INDEX] = ÚJ.ÉRTÉK;

Természetesen erre is mutatunk egy példát.

JavaScript + HTML kód

<!DOCTYPE html>
 <html>
  <body>
   Előtte: <p id="szoveg"> </p>
   Utána: <p id="szoveg2"> </p>
   <button onclick="modosit()">Tömbelem módosítása</button>

   <script>
      var nyelvek = ["HTML", "CSS", "JS"]; 
      document.getElementById("szoveg").innerHTML = nyelvek;
      nyelvek[1] = "PHP";

      function modosit() {
         document.getElementById("szoveg2").innerHTML = nyelvek;
      }
  </script>

 </body>
</html>
Code language: HTML, XML (xml)

Eredmény

Előtte:

Utána:


>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Példánkban a nyelvek tömb első indexű elemét cseréljük le a “PHP” szóra.

Új elem hozzáadása a tömbhöz

Előfordulhat velünk olyan eset is – valójában szinte ez a leggyakoribb -, hogy egy létező tömbhöz újabb elemeket szeretnénk hozzáadni. Ennek megvalósítására több módszer is a rendelkezésünkre áll.

A legegyszerűbb módszer a push() metódus használatával történik. Ilyenkor nem szükséges megadnunk, hogy hova szeretnénk a tömbben elhelyezni az új elemet, mert az automatikusan elhelyezi a legutolsó elem után. Egyszerűen megadjuk, hogy mit szeretnénk elhelyezni a tömbben a többit pedig a JavaScript-re és a böngészőnkre bízhatjuk. Így fest a szintaktika:

TÖMBNÉV.pushJRTÉK);
Code language: CSS (css)

Most pedig jöhet a példa:

JavaScript + HTML kód

<!DOCTYPE html>
 <html>
  <body>
   Előtte: <p id="szoveg"> </p>
   Utána: <p id="szoveg2"> </p>
   <button onclick="hozzaad()">Új érték hozzáadása</button>

   <script>
      var nyelvek = ["HTML", "CSS", "JS"]; 
      document.getElementById("szoveg").innerHTML = nyelvek;

      function hozzaad() {
         nyelvek.push("PHP"); //itt adunk hozzá egy újabb elemet a tömbhöz
         document.getElementById("szoveg2").innerHTML = nyelvek;
      }
  </script>

 </body>
</html>
Code language: HTML, XML (xml)

Eredmény

Előtte:

Utána:


>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Ebben az esetben láthatjuk, hogy ha többször nyomjuk meg a gombot, akkor többször adja hozzá ugyanazt az értéket. Ez azért történik, mert a push() esetében nem mondjuk meg, hogy hova tegye az értéket, csak azt, hogy van egy új érték, amit hozzá kell adni a tömbhöz.

A következő módszernél megmondjuk, hogy pontosan hova tegye a tömbhöz hozzáadni kívánt értéket. Mivel új elemet szeretnénk hozzáadni a tömbhöz, így értelemszerűen azt kellene megadni, hogy az utolsó elem indexénél eggyel nagyobb indexű helyre tegye be. Matekozgathatnánk, hogy melyik volt az utolsó elemünk, de egy idő után macerás lenne folyton észben tartani, hogy hol is járunk az indexekkel. Ezért a length tulajdonsággal nagyon könnyen megmondhatjuk, egy bekezdéssel lentebb részletezzük, hogy mi is ez pontosan. Ennek a módszernek így fest a szintaktikája:

TÖMBNÉV[TÖMBNÉV.length] = ÚJ.ÉRTÉK;

A “TÖMBNÉV.LENGTH” gondoskodik arról, hogy az új elemünk a tömb utolsó eleme után legyen elhelyezve. Természetesen erre is láthattok egy példát alább.

JavaScript + HTML kód

<!DOCTYPE html>
 <html>
  <body>
   Előtte: <p id="szoveg"> </p>
   Utána: <p id="szoveg2"> </p>
   <button onclick="hozzaad()">Új érték hozzáadása</button>

   <script>
      var nyelvek = ["HTML", "CSS", "JS"]; 
      document.getElementById("szoveg").innerHTML = nyelvek;

      function hozzaad() {
         nyelvek[nyelvek.length] = "PHP"; //itt adunk hozzá egy újabb elemet a tömbhöz
         document.getElementById("szoveg2").innerHTML = nyelvek;
      }
  </script>

 </body>
</html>
Code language: HTML, XML (xml)

Eredmény

Előtte:

Utána:


>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Tömb hosszának megállapítása

Fentebb szó volt a length tulajdonságról, amely itt lesz kifejtve. A fentebb lévő fejezetcímből valószínűleg már kitalálhattad, hogy a length tulajdonság adja vissza egy tömb hosszát, vagyis az elem számait. Vessünk egy pillantást a szintaxisára:

TÖMBNÉV.length;
Code language: CSS (css)

Most pedig következzen a példa.

JavaScript + HTML kód

<!DOCTYPE html>
 <html>
  <body>
   Elemek: <p id="szoveg"> </p>
   Tömb hossza: <p id="szoveg2"> </p>
   <button onclick="hossz()">Tömb hossza</button>

   <script>
      var nyelvek = ["HTML", "CSS", "JS"]; 
      document.getElementById("szoveg").innerHTML = nyelvek;

      function hossz() {
         document.getElementById("szoveg2").innerHTML = nyelvek.length;
      }
  </script>

 </body>
</html>
Code language: HTML, XML (xml)

Eredmény

Elemek:

Tömb hossza:


>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Tömbelem törlése

Ha az utolsó elemet szeretnénk törölni, akkor érdemes a pop() metódust használnunk, ami körülbelül ugyanúgy működik mint a push(), csak ez nem az utolsó helyre tesz be, hanem töröl onnan. A pop() szintaxisa:

TÖMBNÉV.pop();
Code language: CSS (css)

Példa erre vonatkozóan:

JavaScript + HTML kód

<!DOCTYPE html>
 <html>
  <body>
   Előtte: <p id="szoveg"> </p>
   Utána: <p id="szoveg2"> </p>
   <button onclick="torol()">Tömb utolsó elemének törlése</button>

   <script>
      var nyelvek = ["HTML", "CSS", "JS"]; 
      document.getElementById("szoveg").innerHTML = nyelvek;

      function torol() {
         nyelvek.pop();
         document.getElementById("szoveg2").innerHTML = nyelvek;
      }
  </script>

 </body>
</html>
Code language: HTML, XML (xml)

Eredmény

Előtte:

Utána:


>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Most pedig jöjjön a kevésbé elegáns törlési módszer, sokan nem is ajánlják használni, mert “lyukassá” válik a tömbünk, azaz több helyen “undefined” érték lesz, de sajnos vannak olyan helyezetek, amikor kénytelenek vagyunk ezt használni. Ezért lássuk a szintaktikáját:

delete TÖMBNÉV[INDEX];
Code language: JavaScript (javascript)

Megadjuk a “delete” kulcsszót, majd a tömbnevet, melyből törölni szeretnénk és azt, hogy melyik indexére vonatkozik a törlés.

Most pedig következzen a cikkünk utolsó példája:

JavaScript + HTML kód

<!DOCTYPE html>
 <html>
  <body>
   Előtte: <p id="szoveg"> </p>
   Utána: <p id="szoveg"> </p>
   <button onclick="torol0()">Tömb 0. indexű elemének törlése</button>
   <button onclick="torol1()">Tömb 1. indexű elemének törlése</button>
   <button onclick="torol2()">Tömb 2. indexű elemének törlése</button>

   <script>
      var nyelvek = ["HTML", "CSS", "JS"]; 
      document.getElementById("szoveg").innerHTML = nyelvek;

      function torol0() {
         delete nyelvek[0];
         document.getElementById("szoveg").innerHTML = nyelvek;
      }

      function torol1() {
         delete nyelvek[1];
         document.getElementById("szoveg").innerHTML = nyelvek;
      }

      function torol2() {
         delete nyelvek[2];
         document.getElementById("szoveg").innerHTML = nyelvek;
      }
  </script>

 </body>
</html>
Code language: HTML, XML (xml)

Eredmény

Előtte:

Utána:


>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Az undefined érték nem jelenik meg alapból, ha a teljes tömböt kiíratom, de ha konkrétan egy törölt elemet szeretnék kiíratni, akkor megjelenne.

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!