Tömbök 24.05.26

ES-ben minden adatszerkezetet referencia szerint kezelünk. Vagyis a változónk tartalma az nem a tényleges adat, hanem egy mutató, ami megmondja, hogy hol van a megfelelő adatunk! Ezért vagyunk képesek konstansként felvenni és mégis módosítani.

Az ES lehetőséget biztosít számunkra, hogy egy rugalmas szerkezetben tárolassunk több elemet is. Azonban ez a hagyományosan (más nyelvekben ismert) tömbtől jelentősen eltér. Ugyanis amit kapunk valójában egy generikus lista lesz, tehát tulajdonképpen egy tömbön belül bármilyen különböző típusú elemet is tárolhatunk, valamint tetszőlegesen tudjuk bővíteni, vagy az elemeit törölni.

Tömbök definiálása

Tömb literál

A legegyszerűbb módszer arra, hogy a már ismert elemeinkkel definiáljuk a tömböt.

const array = ["item1", 2, false]

Objektum vagy konstruktor

A következő esetben, teljesen minegy az ECMAScript számára, hogy a függvény előtt, hogy használjuk-e a new kulcsszót, vagy sem. Azonban a paraméterezése már koránt sem ennyire magától értetődő.

Abban az esetben, ha paraméterként egy darab számot kap a függvényünk, akkor ezt nem a tömb elemének fogja tekinteni, hanem a hosszának, tehát a következő példa eredménye, hogy 10 darab üres elemet fog tartalmazni.

const elements = Array(10)

Viszont abban az esetben, ha több elemet is megadunk, akkor a paraméterek alapján kerül előállításra a tömbünk.

const fruits = new Array("alma", "barack", "szilva") // ["alma", "barack", "szilva"]

Elemek elérése

Elemek módosítása

Hozzáadás

array1.push("elem"); //Vegehez
array1.unshift(10); //Elejehez

Törlése

Az elemek törlése esetén a függvény visszadja nekünk a megfelelő elemet, így azt el tudjuk menteni egy változóba.

const lastElement = array2.pop(); //Utolsot
const firstElement = array2.shift(); //Elsot

Kiválasztása tetszőleges helyről

A függvény csak egy másolatot csinál a kiválasztott elemekről és az eredetit tömbben érintetlenül hagyja.

Amire oda kell figyelni itt, hogy a második paraméterünk mindig az utolsó kiválasztanó elem utánit kell megadni.

const FIRST = 1;
const AFTERLAST = 4;

const items = array3.slice(FIRST, AFTERLAST);

Törlése tetszőleges helyről

Adott mennyiségű elem törlése.

const FIRST = 1;
const QTY = 3;

const items = array4.splice(FIRST, QTY);

Beszúrás tetszőleges helyre

Elemszám lekérdezése

let arraySize = array5.length;

Rendezés

Elemek sorrendjének megfordítása

array6.reverse();

rendezése

array7.sort();

Saját rendező függvény írása

function compareSimple(a, b) {
    if (a > b) {
        return 1;
    } else if (a < b) {
        return -1;
    } else {
        return 0;
    }
}

array8.sort(compareSimple)

function compareOAdvanced(a, b) {
    if (a.prop > b.prop) {
        return 1;
    } else if (a.prop < b.prop) {
        return -1;
    } else {
        return 0;
    }
}

array9.sort(compareOAdvanced)

Új rendezett tömb


const sortedCopy = array10.toSorted()

Spread operátor

ES6 óta lehetőségünk van arra, hogy a tömbünk elemeit "kibonttassuk" a böngészővel. Ez pedig úgy, fog nekünk kinézni, hogy ahol több elemet vár az függvényünk, ott a ... segítségével szépen egyesével fogja a tömb elemeit kipakolni az ES.

const original = [1, 2, 3];

const withoutOperator = [original[0], original[1], original[2]];
const withOperator = [...original];

A második esetben látjuk, hogy egy nagyobb tömbb esetén sokkal egyszerűbb és kényelmesebb megoldás.

Tárolás

Az előző szekcióban láttuk, hogy egy tömb másolása nem a legszebb, de miért így másoljuk le a tömböt?

const copiedArray = original;

Nem elég ez ↑?

Az előző kóddal az lesz a problémánk, hogy amikor létrehozzuk a tömböt, akkor valójában az original nevű változónk nem a tömböt tárolja el, hanem egy mutatót a tömbre. Ezért, ha lemásoljuk ami a változóban van, akkor tulajdonképpen ezt a mutatót másoljuk le, így mindekettő változó ugyanazt a tömböt fogja nézni és változtatni.

Ez nem csak a tömbre de a többi adatszerkezetre és objektumra is igaz!!!

Destrukció tömbök esetén

Lehetőségünk van, arra, hogy index szerint külön változókra, vagy tömbre bontsuk szét az eredeti tömbünket.

Ezt a következő módon tudjuk megtenni:

const [lastName, firstName] = "Papp Zsombor".split(' ');

A fenti esetben a lastName értékel "Papp" és a firstName értéke "Zsombor" lett. Innentől kezdve a firstName és a lastName teljesen önálló változóként használhatóak.

A helyzet akkor érdekes, ha több adatunk is van, de nem szeretnénk, hogy azok elvesszenek, hanem szeretnénk őket összegyűjteni.

const [lastName, firstName, ...rest] = "Papp Zsombor Frontend Developer @ Mozilla".split(' ');

Ekkor az két elemünk esetén változatlan a dolog. Az érdekes a ...rest lesz, ugyanis a ... azt mondja meg, hogy szeretnénk minden maradékot a rest nevű változóban összegyűjteni.

Tehát a rest értéke ez lesz: ["Frontend","Developer","@","Mozilla"].

\pagebreak
Table of Contents