A JavaScript tömbök kezelése – CloudSavvy IT

A JavaScript tömbök olyan adatstruktúrák, amelyek lehetővé teszik több érték tárolását egyetlen változónév alatt. A tömbök egyfajta objektumok. Számos segédprogramot kínálnak, amelyek segítségével manipulálhatják adataikat.

A JavaScript-tömbök nagyon lazán korlátozzák a bennük elhelyezhető területeket. Sem rögzített hosszúsággal, sem meghatározott típussal nem rendelkeznek. Inkább úgy viselkednek, mint egy értéklista, mint az erősen tipizált nyelvek klasszikus tömbjei.

Tömb deklarálása

A JavaScript tömbök szögletes zárójeleket használnak. Inicializálhatja őket üresen, vagy hozzáadhat egy sor alapértelmezett értéket. Az értékeket vessző választja el. Bármely érvényes JavaScript-értéket használhat, például karaktersorozatot, egész számot, objektumot vagy más tömböt.

let emptyArray = [];
 
let filledArray = ["hello", 123, {foo: "bar"}, ["x", "y"]];

Tömbértékek elérése

Értéket kap egy tömbből az elérni kívánt index megadásával. A tömbindexek számozása: 0. A szögletes zárójeles szintaxissal határozhatja meg a visszakeresendő tömbindexet.

let myArray = ["foo", "bar", "example"];
 
// logs "bar"
console.log(myArray[1]);

A tömbindexek mindig egész számok a JavaScript-ben. Nem használhat karakterláncokat indexként – használjon egy tárgy ehelyett ha ezt kell tennie.

A tömbindex értékét közvetlenül állítva módosíthatja:

myArray A fenti ábra most tartalmazná az értékeket foo, test, example.

Elemek hozzáadása a tömbökhöz

Új elemeket adhat a tömbökhöz a push() módszer:

["car", "truck"].push("bus");
// car, truck, bus

Ez hozzáadja az elemet a tömb végéhez. Ha azt szeretné, hogy az új elem beillesztésre kerüljön a Rajt a tömbből használja a unshift() módszer helyett.

["car", "truck"].unshift("bus");
// bus, car, truck

Néha előfordulhat, hogy egy tömb közepén be kell illesztenie egy elemet. Használhatja a splice() módszer egy elem hozzáadásához egy adott indexhez:

["car", "truck"].splice(1, 0, "bus");
// car, bus, truck

Az első érv a splice() a beillesztendő index. Ezután jön a törlendő elemek száma a tömb elejétől. Új elem hozzáadásakor ennek kell lennie 0 hogy a meglévő elemek megmaradjanak. Az utolsó érv a hozzáadandó elem.

Elemek eltávolítása tömbökből

Egy tömbelem eltávolításához használja a pop() módszer. Ez „kitolja” a tömb utolsó elemét:

["car", "truck", "bus"].pop();
// car, truck

A első tömb elem, használja a shift() módszer helyett:

["car", "truck", "bus"].shift();
// truck, bus

Ha egy adott elemet el akar távolítani, akkor a elemet kell használnia splice() módszerrel. Először ismernie kell az eltávolítani kívánt indexet. Ha a tömb egyik értékéből dolgozik, először hívjon indexOf() hogy megkapja az indexét. Ezt aztán átadhatja splice(), a második érvet beállítva 1 hogy töröljön egy elemet az adott indexből.

const arr = ["car", "truck", "bus"];
arr.splice(arr.indexOf("truck"), 1);
// car, bus

Iterálva a tömbök felett

Számos módon lehet iterálni egy tömbön. A hagyományos megközelítés az a for hurok:

const arr = ["car", "truck", "bus"];
for (let i = 0; i < arr.length; i++) {
    console.log(`Vehicle at position ${i} is ${arr[i]}`);
}

Rövidebb alternatíva a tömbök használata forEach() módszer. Ennek meg kell adni egy funkciót. A függvény a tömb minden eleméhez egyszer meghívásra kerül. Minden elem értékét és indexét kapja meg paramétereként.

["car", "truck", "bus"].forEach((vehicle, i) => {
    console.log(`Vehicle at position ${i} is ${vehicle}`);
});

forEach() gyakran könnyebb vele dolgozni, mint a for hurok. Vigyázni kell azonban az értékek visszaadásakor. Visszatérés az átadott funkcióról forEach() nem törli a ciklust:

const arr = ["car", "truck", "bus"];
 
// logs "car"
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
    if (arr[i] === "truck") return;
}
 
// logs "car", "truck", "bus"
arr.forEach((vehicle, i) => {
    console.log(vehicle);
    if (vehicle === "truck") return;
});

Val vel forEach(), a return utasítás az anonim függvényből tér vissza. A ciklust a külső hatókör hozza létre, így továbbra is újból meghívja a függvényt a tömb többi elemére.

Tömbök leképezése

map() a JavaScript egyik legerősebb tömbmódszere. Elfogad egy függvényt, amelyet a tömb minden eleméhez meghívnak. Ezután egy új tömb visszaküldik az egyes függvényhívások eredményeit.

const arr = [2, 4, 8, 16];
const mapped = arr.map(v => (v * v));
// mapped contains 4, 16, 64, 256

A visszahívási függvénye valójában három argumentumot kap – az aktuális pozíció értékét, az aktuális pozíció indexét és ezt a tömböt map() hívják.

[1, 2, 3].map((value, index, arr) => (value * value));

A leképezés akkor hasznos, ha egy tömbön kell iterálnia, hozzáférnie kell az egyes értékekhez, majd ebből az iterációból új értékeket kell levezetnie. A technika akkor is hasznos, ha olyan felhasználói felület-keretrendszerekkel dolgozik, mint például a React, ahol az adatokat leképezve átalakíthatja azokat DOM-csomópontokká:

const MyComponent = users => (
    users.map(user => (
        <div>
            <p>{user.Name}</p>
            <p>{user.Email}</p>
        </div>
    ))
);

Fontolja meg a használatát map() amikor valamilyen műveletet kell végrehajtania egy tömb minden elemén, akkor is, ha nem érdekli a visszahívás visszatérési értéke.

Szűrő tömbök

Egy másik gyakori feladat egy tömb szűrése bizonyos elemek kizárása érdekében. Lehet, hogy hajlandó létrehozni egy új üres tömböt, és használni a for hurok az elemek teszteléséhez az eredetiben. Egyszerűbb megközelítés a JavaScript beépített használata filter() módszer.

Tetszik map(), filter() visszahívási funkciót vesz fel, amely minden iterációra meghívásra kerül. Az aktuális értéket, indexet és tömböt a visszahíváshoz adjuk át paraméterként. A visszahívásnak is vissza kell térnie true vagy false annak jelzése, hogy az aktuális értéket bele kell-e venni az új szűrt tömbbe.

const filtered = [1, 2, 3].filter(v => (v % 2 === 0));
// filtered is [2]

Használata filter() gyors és tömör lesz a szűrés. Nem kell a for hurok és állítsa be maga az új tömböt. A metódus mindig új tömböt ad vissza, és nem fogja mutálni az eredetit.

Segédprogram módszerek

Íme néhány további módszer, amelyeket hasznosnak találhat.

• Két tömb összekapcsolása: Használja a concat() módszer két tömb összekapcsolására. Visszaadja a új tömb, argumentumával együtt a tömbhöz csatolva. ["a, "b", "c"].concat(["x", "y", "z"]) visszatér ["a", "b", "c", "x", "y", "z"].
• Tömb átalakítása karaktersorozattá: Használja a join() metódus egy tömb értékeinek egyetlen karaktersorozatba egyesítésére. Megadhatja az elválasztót a függvény első paramétereként. ["a", "b", "c"].join(" - ") vissza fog térni a - b - c.
• Értékindexek beszerzése: Ha tudod, hogy egy tömbben van érték, akkor a numerikus indexét a indexOf(). Ha az érték többször létezik a tömbben, akkor az első előfordulás indexe kerül visszaadásra. Megkaphatja a utolsó előfordulás felhasználásával lastIndexOf().
• Annak meghatározása, hogy létezik-e érték egy tömbben: A includes() A metódus elfogad egy értéket, és lehetővé teszi annak ellenőrzését, hogy létezik-e egy tömbben. Logikai értéket ad vissza, jelezve, hogy az értéket megtalálták-e. ["a", "b", "c"].includes("a") visszatérne true.
• Előre meghatározott hosszúságú üres tömb létrehozása: Használhatja a Array konstruktor egy adott hosszúságú üres tömb inicializálására. const myArr = new Array(10) tömböt hoz létre 10 indexből (0-9), mindegyikből undefined mint az értéke.
• Annak tesztelése, hogy a tömb összes eleme megfelel-e egy feltételnek: Néha érdemes ellenőrizni, hogy egy tömb minden eleme megfelel-e egy feltételnek. A every() módszer lehetővé teszi ezt. Elfogad egy visszahívást, amely hasonlóan működik, mint a filter() módszer. A módszer csak visszatér true ha a visszahívás minden meghívása visszatér true. Ha tudni akarja, hogy csak néhány a tömb elemek egyeznek, használja a some() módszer helyett.

Következtetés

A JavaScript tömbök sokoldalú adatstruktúra, hasznos beépített módszerekkel. Más nyelvekhez képest a JavaScript tömbjeivel való munka egyszerű és tömör. Az inline használatával gyorsan iterálhat, feltérképezhet és szűrhet értékeket nyíl funkciók amelyek tisztán és olvashatóan tartják a kódot.