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.

Tartalomjegyzék

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 — A kép kattintásra nagyobbodik!

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.)

Szintaktika

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)

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.

Példa

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

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.

Szintaxis

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 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.

Példa

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 három elemet tartalmazhat, nyugodtan írhatunk negyedik, ötödik vagy százhuszonhatodik elemet is.

Szintaxis

Ú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)

Példa

var nyelvek = [];

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

Szintaxis

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)

Példa

var nyelvek = new Array("HTML", "CSS", "JS");
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.

Szintaxis

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.

Példa

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.

Szintaktika

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.

Példa

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.

Szintaktika

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;

Példa

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.

Szintaxis

TÖMBNÉV.push(ÚJ.ÉRTÉK);
Code language: CSS (css)

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.

Szintaktika

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.

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[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.

Szintaxis

Vessünk egy pillantást a szintaxisára, amelyet a lenti példán keresztül még egyértelműbbé teszünk.

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

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

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.

Szintaktika

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.

Példa

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)