Sokszor van arra szükség, hogy valamilyen elemek listáját kezeljük. Egy webshop esetén például:
- termékek listája
- ügyfelek listája
- megrendelések listája
Az ilyen adatsorok kezelésére az összes programozási nyelv biztosít lehetőséget. Ezeket tömböknek (angolul: array), vagy listáknak szokás hívni (a két fogalom között sok nyelv különbséget tesz valamilyen szempont alapján, a JavaScript-ben viszont a kettő között nincs különbség).
A tömbök mint objektumok
A tömbök jól modellezhetők hagyományos JavaScript objektumokkal. Egy terméklistát egy webalkalmazásban kódjában így is megadhatunk:
var termeklista = {
0: 'zöld pengető',
1: 'kék pengető',
2: 'húrok',
3: 'erősítő',
4: 'hangfal'
}
A tömbök nagyon gyakran előjönnek a programozásban, ezért létezik egy kényelmesebben használható rövidített formátum, amivel gyakorlatilag ugyanezt az objektumot lehet megadni (a főbb különbségekről később még lesz szó):
var termeklista = ['zöld pengető', 'kék pengető', 'húrok', 'erősítő'];
Egy tömb egy eleme bármi lehet, amit egy változó tudna tárolni (szám, sztring, objektum, függvény, stb.). A fenti példában a tömb összes eleme sztring.
Hozzáférés a tömb elemeihez
A tömbök olyanok, mint a hagyományos objektumok. Objektumok esetében az tulajdonságokat így szokás elérni: objektum.tulajdonság_neve
. Ez viszont csak akkor működik, ha az tulajdonság neve megfelel bizonyos szabályoknak. Az egyik ilyen szabály, hogy a név ne kezdődjön számmal, emiatt a fent létrehozott objektum tulajdonságait nem fogjuk tudni elérni így: termeklista.0
, termeklista.1
, stb.
Ehelyett az objektumoknál látott másik módszert kell használni: objektum['tulajdonság_neve']
. A szögletes zárójelben sztringet kell megadni, mert a tulajdonság neve mindig sztring. Ebből az is következik, hogy a tömb tulajdonságainak nevei valójában sztring típusúak (pl: '0'
, '1'
, '2'
, nem pedig: 0
, 1
, 2
). Ez azért nem gond, mert ha mégis számot adunk meg a szögletes zárójelben, akkor azt a JavaScript automatikusan sztringgé alakítja át, tehát a következő módszer működni fog: termeklista[0]
, termeklista[1]
, termeklista[2]
, stb. (ugyanennek egy kevésbé kényelmes leírása ez: termeklista['0']
, termeklista['1']
, termeklista['2']
).
Tehát röviden: egy tömb n-edik eleméhez úgy férünk hozzá, hogy a tömb referenciája után szögletes zárójelben megadjuk az n-et. Az n lehet bármilyen kifejezés, aminek a kiértékelése számot eredményez, például:
- egy konkrét szám
- számot tartalmazó változó
- bármilyen matematikai kifejezés, ami számot eredményez (pl.
1 + 2
,3 * a
)
Az előbb létrehozott terméklista néhány elemét például így lehetne kiiratni, illetve megváltoztatni:
document.writeln('A terméklista 3. eleme: ');
document.writeln(termeklista[2]);
document.writeln('A terméklista 5. eleme: ');
document.writeln(termeklista[4]);
// A 4. elem nevét megváltoztatjuk:
termeklista[3] = 'zöld erősítő';
A tömböket mindig 0-tól számozzuk, ezért van az, hogy a 3. elemre a 2-es sorszámmal, az 5. elemre pedig a 4-es sorszámmal hivatkozunk.
Bejárás for
cikussal, és a length
tulajdonság
Ha tudjuk a tömb hosszát, akkor akár for
cikust is használhatunk a tömb bejárására:
for (var i = 0; i < 5; i++) {
document.writeln('A terméklista ' + i + '. eleme: ');
document.writeln(termeklista[i]);
}
A tömbök olyanok, mint a hagyományos objektumok, viszont van néhány plusz tulajdonságuk. A tömb szintaxis használatával valójában mindig a tömb (Array
) osztály egy példánya jön létre. Ennek az osztálynak van néhány hasznos tulajdonsága illetve metódusa (ezeket minden egyes tömb példány megkapja). Az egyik ilyen a length
tulajdonság, ami megadja, hogy hány eleme van a tömbnek. Ez akkor hasznos, ha ezt nem tudjuk előre, például egy adatbázisból kapjuk meg, vagy a felhasználó adja meg a tömböt.
A terméklista kiíratása a lista hosszának megadása nélkül:
for (var i = 0; i < termeklista.length; i++) {
document.writeln('A terméklista ' + i + '. eleme: ');
document.writeln(termeklista[i]);
}
Elemek hozzáadása, törlése
A tömböket termszetesen lehet módosítani a létrehozás után is. Erre használhatóak az objektumok tulajdonságainak állítgatására szolgáló módszerek (pl. új termék felvétele: termeklista[5] = 'tremolo kar';
, az ötödik termék törlése: delete termeklista[4];
). Leggyakrabban a tömb első, illetve utolsó elemén kell műveleteket végezni, erre pedig vannak kényelmesebben használható metódusai is a tömb osztálynak:
tomb.pop()
: törli, és visszaadja a tömb utolsó eleméttomb.push(uj_elem)
: a tömb végére beszúrja a megadott értékettomb.shift()
: törli, és visszaadja a tömb első elemét (a tömb minden eleme 1-el előrébb 'csúszik')tomb.unshift(uj_elem)
: a tömb elejére beszúrja a megadott értéket (a tömb minden eleme 1-el hátrébb 'csúszik')
A következő példában a megjegyzésekben szerepel a tömb aktuális állapota az egyes műveletek után:
var termeklista = ['zöld pengető', 'kék pengető', 'húrok', 'erősítő'];
// ['zöld pengető', 'kék pengető', 'húrok', 'erősítő']
var utolso_elem = termeklista.pop();
document.write(utolso_elem); // kiírja, hogy 'erősítő'
// ['zöld pengető', 'kék pengető', 'húrok']
termeklista.push('pick-up');
// ['zöld pengető', 'kék pengető', 'húrok', 'pick-up']
var elso_elem = termeklista.shift();
document.write(utolso_elem); // kiírja, hogy 'zöld pengető'
// ['kék pengető', 'húrok', 'pick-up']
termeklista.unshift('hangoló');
// ['hangoló', 'kék pengető', 'húrok', 'pick-up']
Egyéb metódusok
A tömb osztálynak sok hasznos metódusa van, amiket itt nincs hely bemutatni: