Tömbök ebben a kurzusban:

A(z) Tömbök fogalomról

JavaScriptben a tömb egy listaszerű szerkezet, amelynek nincs rögzített hossza, és bármilyen primitívet vagy objektumot tárolhat, akár vegyes típusokat is. Tartalmazza a length tulajdonságot, valamint rengeteg hasznos metódust a tömb bejárásához és módosításához.

Tömb létrehozásához írd az elemeket szögletes zárójel ([]) közé. A tömb elemeinek kiolvasásához tedd az indexet szögletes zárójel ([]) közé az azonosító után. A tömb indexei nullától kezdődnek.

Például:

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names[1];
// => Laura

Tömböt a konstruktor szintaxissal is létrehozhatsz, de a legtöbb esetben a tömbliterál szintaxis használata ajánlott.

const names = new Array();
names.push('Jack', 'Laura', 'Paul', 'Megan');

names[1];
// => Laura

A tömbök nem használhatnak strings-et elemindexként, hanem egész számokat (number) kell használniuk. Ha nem egész számokkal állítasz be vagy olvasol ki értéket zárójeles (vagy pontos) jelöléssel, azzal nem a tömb listájából állítasz be vagy kérsz le elemet, hanem a tömb objektumtulajdonság-gyűjteményéhez kapcsolódó változót állítasz be vagy érsz el. A tömb objektumtulajdonságai és a tömbelemek listája elkülönül egymástól, és a tömb bejárási és módosítási műveletei nem alkalmazhatók ezekre a névvel ellátott tulajdonságokra.

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.length;
// => 4

// Properties can be set on arrays using bracket ['property'] or
// dot .property notation, and this will affect the length, as
// shown below.

names.magician = 'Elyse';
names.length;
// => 4

// The property shows up when logging the array, making it seem
// that the property is somehow incorporated in the array.

names;
// => ["Jack", "Laura", "Paul", "Megan", magician: "Elyse"]

// However, be aware. Properties added via non-numeric keys are
// NOT part of the array's internal list, and are not traversed
// or mutated when using one of the traversal or mutation
// operations.

names.forEach((name) => console.log(name));
// => Jack
// => Laura
// => Paul
// => Megan

Elemek törlése egy tömbből

A JavaScriptben a tömbök is közönséges objects típusúak, és az elemeket a delete kulcsszóval törölheted. Ez azonban nem változtatja meg a tömb hosszát, és egy empty lyukat hagy maga után. Más programozási nyelvekben ez a ritka tömbhöz hasonlít. A bejárási és módosítási műveletek kihagyják az empty lyukakat.

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
delete names[1];

names;
// =>  ["Jack", empty, "Paul", "Megan"]

names.length;
// => 4

names.forEach((name) => console.log(name));
// => Jack
// => Paul
// => Megan

Ha nem szeretnéd, hogy lyukak legyenek, és azt szeretnéd, hogy a length tükrözze a bejárt vagy módosított elemek számát, akkor használd helyette a splice metódust.

A splice() metódus úgy változtatja meg egy tömb tartalmát, hogy eltávolítja vagy lecseréli a meglévő elemeket, illetve a helyükön új elemeket szúr be.¹

Például:

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.splice(1, 1);

names;
// =>  ["Jack", "Paul", "Megan"]

names.length;
// => 3

names.forEach((name) => console.log(name));
// => Jack
// => Paul
// => Megan

A tömb hossza módosítható

A tömb length tulajdonsága összefügg a tömb által tárolt elemek listájával. Módosítható. Ha megnöveled a hosszt, empty lyukak keletkeznek, amelyeket a tömb bejárásakor vagy módosításakor nem veszünk figyelembe. Ha lecsökkented a hosszt, az eltávolítja a tömb végén lévő elemeket.

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.length = 6;

names;
// => ["Jack", "Laura", "Paul", "Megan", empty × 2]

names.length = 2;
// =>  ["Jack", "Laura"]

Annak ellenőrzése, hogy valami tömb-e

Mivel a tömbök objects, a typeof names eredménye "object". Ha ellenőrizni akarod, hogy valami tömb-e, használd az Array.isArray metódust:

const names = ['Jack', 'Laura', 'Paul', 'Megan'];

typeof names;
// => "object"

Array.isArray(names);
// => true

const object = {};
Array.isArray(object);
// => false

Lehet, hogy kísértést érzel, hogy a names instanceof Array kifejezést használd; ez működhet, de nem minden körülmények között. További információért olvasd el ezt a cikket.

Tömbmetódusok

A minden tömbobjektumon elérhető metódusok közül néhányat használhatsz elemek hozzáadására vagy eltávolítására. Íme néhány közülük:

push

A push() metódus egy vagy több elemet fűz a tömb végéhez, és visszaadja a tömb új hosszát.²

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.push('Jill'); // => 5
names;
// => ['Jack', 'Laura', 'Paul', 'Megan', 'Jill']

pop

A pop() metódus eltávolítja a tömb utolsó elemét, és visszaadja azt. A metódus megváltoztatja a tömb hosszát.³

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.pop(); // => 'Megan'
names;
// => ['Jack', 'Laura', 'Paul']

shift

A shift() metódus eltávolítja a tömb első elemét, és visszaadja az eltávolított elemet. A metódus megváltoztatja a tömb hosszát.⁴

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.shift(); // => 'Jack'
names;
// => ['Laura', 'Paul', 'Megan']

unshift

Az unshift() metódus egy vagy több elemet szúr be a tömb elejére, és visszaadja a tömb új hosszát.⁵

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.unshift('Jill'); // => 5
names;
// => ['Jill', 'Jack', 'Laura', 'Paul', 'Megan']

splice

A splice() metódus úgy változtatja meg egy tömb tartalmát, hogy eltávolítja vagy lecseréli a meglévő elemeket, illetve a helyükön új elemeket szúr be. A metódus visszaad egy tömböt, amely a törölt elemeket tartalmazza.¹

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.splice(2, 1, 'Jill'); // => ['Paul']
names;
// => ['Jack', 'Laura', 'Jill', 'Megan']

---

1. splice, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice (megtekintve: 2021. szeptember 29.) ↩

2. push, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push (megtekintve: 2021. szeptember 29.) ↩

3. pop, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop (megtekintve: 2021. szeptember 29.) ↩

4. shift, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift (megtekintve: 2021. szeptember 29.) ↩

5. unshift, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift (megtekintve: 2021. szeptember 29.) ↩