6.08. Tömbök (Array)

A tömbök a Javascriptben nem teljesen azonosak a más nyelvekben megszokottakkal, ugyanis a tömbök speciális objektumok. Ez két dolgot jelent:

• A tömb elemi különböző típusúak lehetnek (más nyelvekben csak azonos típusú elemekből lehet tömböt készíteni)
• A tömbelemeket több féle módon el lehet érni.
• A tömbök kezelése során az objektumok általános szabályai is alkalmazhatók.

Tömb létrehozása

Az egyszerűbb mód

t = ["Hétfő","Kedd","Szerda","Csütörtök","Péntek","Szombat"]

Bonyolultabb módszer:

var t = { O: 'Hétfő', 1: 'Kedd', 2: 'Szerda', 3: 'Csütörtök', 4: 'Péntek' };

A tömb elemeinek elérése

Tombnev[index]

A tömb index mindig 0-val kezdődik!

document.write(t[0]);

A tömb hossza: tomb.length

A tömb hosszát a length tulajdonság tartalmazza;

Tömb bejárása ciklussal

for (var i = 0; i < 5; i++) {
  document.writeln('A terméklista ' + i + '. eleme: ');
  document.writeln(termeklista[i]);
}

Vagy egy másik módon foreach metódussal:

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value) {
  txt = txt + value + "<br>";
}

A fenti példában a txt változó sorban megkapja a tömbelemek értékét.

Tömb metódusok

toString() - Egy tömb elemeiből stringet készít

var gyumolcs = ["Cseresznye", "Narancs", "Alma"];
document.getElementById("demo").innerHTML = gyumolcs.toString();
//Eredmény: Cseresznye,Narancs,Alma

join(" * ") - egy tömb elemeiből stringet készít, de megadható az elválasztó jel

var gyumolcs = ["Cseresznye", "Narancs", "Alma"];
document.getElementById("demo").innerHTML = gyumolcs.join (" * ");
//Eredmény: Cseresznye * Narancs * Alma

A tömb végéről leveszünk egy elemet és odafűzünk egy elemet

pop() - a tömb utoló elemét kitöröli

push(elem) - a tömb végére hozzáfűz egy elemet

var gyumolcs = ["Cseresznye", "Narancs", "Alma"];
gyumolcs.pop();  //Leveszi az 'Alma'-t.
var x = gyumolcs.pop(); // az x változó értéke 'Narancs' lesz

gyumolcs.push("Banán"); //A tömb végére teszi a Banánt.

//A fenti utasítások eredménye az alábbi lesz: gyumolcs = {Cseresznye, "banán"};

További metódusokról lehet itt olvasni. https://www.w3schools.com/js/js_array_methods.asp

Tömbök rendezése

Sok más programozási nyelvhez hasonlóan van lehetőség a javascrkipt tömbök elemeinek rendezésére is.

• tombnev.sort() - ABC sorrendben rendezi az elemeket
• tombnev.reverse() - ABC fordított sorrendben rendezi az elemeket

A tömbelemek rendezés stringek rendezését jelenti, ezért ha numerikus értékeket akarunk rendezni, akkor kicsit másként kell ezt tenni:

var szamok = [10, 1, 20, 3, 445, -1];

//érték szerinti rendezés növekvő értékek szerint
szamok.sort(function(a, b){return a - b});

//érték szerinti rendezés csökkenő értékek szerint
szamok.sort(function(a, b){return b - a});

A function (a,b){ return a-b} egy összehasonlító függvény

• Ha az eredmény negatív, akkor a kisebb, mint b
• Ha az eredmény pozitív, akkor a nagyobb, mint b
• Ha az eredmény 0, akkor a két érték egyenlő

Objektumokat is lehet rendezni egy tulajdonságuk alapján

var cars = [
  {type:"Volvo", year:2016},
  {type:"Saab", year:2001},
  {type:"BMW", year:2010}
]; 

cars.sort(function(a, b){return a.year - b.year});

A tömbök elemeinek feldolgozásához további metódusok itt találhatók: https://www.w3schools.com/js/js_array_iteration.asp

Tömbelemek törlése

delete (t[10]) - hatására a 10-es indexű elemet kitöröljük a tömbből, de maga a tömbelem helye nem szabadul fel, az index megmarad. A t[i] elem undefined értékű lesz.

t.splice(honnan, hány db) - ez kivágja a megfelelő indexű elemtől a megadott darabszámú tömbelemet. Az indexek nem maradnak meg!

A fenti esetben a tömbök "lyukasak" lesznek. A for ciklussal a bejárásuk hibára fut. Ilyenkor a t.forEach metódust érdemes használni.