A JavaScript tömbök egyszerűen az egyik kedvenc adattípusom. Dinamikusak, könnyen használhatóak, és egy csomó beépített módszert kínálnak, amelyeket kihasználhatunk.
Minél több lehetőséged van, annál zavaróbb lehet eldönteni, melyiket válaszd.
Ebben a cikkben néhány elemet szeretnék megvitatni, hogyan lehet egy elemet hozzáadni egy JavaScript tömbhöz.
A Push módszer
Az első és valószínűleg a leggyakoribb JavaScript tömb metódus a push () . A push () metódust egy elem hozzáadásához használják egy tömb végéhez.
Tegyük fel, hogy van egy tömb eleme, mindegyik elem egy karakterlánc, amely egy elvégzendő feladatot képvisel. Ésszerű lenne újabb elemeket hozzáadni a tömb végéhez, hogy előbb befejezhessük korábbi feladatainkat.
Nézzük meg a példát kód formájában:
const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item']Rendben, így a push szép és egyszerű szintaxist adott számunkra ahhoz, hogy egy elemet hozzáadjunk a tömbünk végéhez.
Tegyük fel, hogy egyszerre két vagy három elemet akartunk felvenni a listánkba, akkor mit tennénk? Mint kiderült, a push () több elemet is elfogadhat egyszerre.
const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item', 'Fifth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']Most, hogy felvettünk még néhány feladatot a tömbünkbe, érdemes tudni, hogy hány elem van jelenleg a tömbben annak megállapítására, hogy van-e túl sok a tányérunkon.
Szerencsére a push () visszatérési értékkel rendelkezik a tömb hosszával, miután elemeinket hozzáadtuk.
const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.push('Fourth item', 'Fifth item'); console.log(arrLength); // 5 console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']Az eltolás módja
Nem minden feladat jön létre egyenlően. Találkozhat olyan forgatókönyvvel, amelyben feladatokat ad hozzá a tömbhöz, és hirtelen olyanokkal találkozik, amelyek sürgetőbbek, mint a többi.
Itt az ideje bemutatni az unshift () barátunkat, amely lehetővé teszi számunkra, hogy elemeket adjunk a tömb elejéhez.
const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.unshift('Urgent item 1', 'Urgent item 2'); console.log(arrLength); // 5 console.log(arr); // ['Urgent item 1', 'Urgent item 2', 'First item', 'Second item', 'Third item']A fenti példában észreveheti, hogy a push () módszerhez hasonlóan az unshift () visszaadja az új tömbhosszat , amelyet használhatunk. Ez azt is lehetővé teszi számunkra, hogy egyszerre több elemet is hozzáadjunk.
A Concat módszer
A konkatenát rövidítése (összekapcsolás), a concat () módszer két (vagy több) tömb összekapcsolására szolgál.
Ha fentről emlékszik, az unshift () és a push () metódusok visszaadják az új tömb hosszát. concat () viszontegy teljesen új tömböt ad vissza.
Ez egy nagyon fontos megkülönböztetés, és a concat () rendkivül hasznos, ha olyan tömbökkel foglalkozik, amelyeket nem akar mutálni (például a React állapotban tárolt tömbök).
Így nézhet ki egy meglehetősen egyszerű és egyértelmű eset:
const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = arr1.concat(arr2); console.log(arr3); // ["?", "?", "?", "?"] Tegyük fel, hogy több tömbje van, amelyeket szeretne összekapcsolni. Semmi gond, a concat () megmenti a napot!
const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = ['?', '?']; const arr4 = arr1.concat(arr2,arr3); console.log(arr4); // ["?", "?", "?", "?", "?", "?"] Klónozás Concat-tal
Emlékszel, hogyan mondtam, hogy a concat () hasznos lehet, ha nem akarod módosítani a meglévő tömböt? Vizsgáljuk meg, hogyan használhatjuk fel ezt a koncepciót egy tömb tartalmának új tömbbe másolására.
const arr1 = ["?", "?", "?", "?", "?", "?"]; const arr2 = [].concat(arr1); arr2.push("?"); console.log(arr1) //["?", "?", "?", "?", "?", "?"] console.log(arr2) //["?", "?", "?", "?", "?", "?", "?"]Fantasztikus! Lényegében egy tömböt "klónozhatunk" a concat () használatával .
De van egy kis „gotcha” ebben a klónozási folyamatban. Az új tömb a másolt tömb "sekély másolata". Ez azt jelenti, hogy bármely objektumot hivatkozással másolunk, és nem a tényleges objektumot.
Nézzünk meg egy példát, hogy ezt az elképzelést világosabban elmagyarázzuk.
const arr1 = [{food:"?"}, {food:"?"}, {food:"?"}] const arr2 = [].concat(arr1); //change only arr2 arr2[1].food = "?"; arr2.push({food:"?"}) console.log(arr1) //[ { food: '?' }, { food: '?' }, { food: '?' } ] console.log(arr2) //[ { food: '?' }, { food: '?' }, { food: '?' }, { food: '?' } ]Annak ellenére, hogy közvetlenül nem változtattunk az eredeti tömbön, a tömböt végül befolyásolták a klónozott tömbön végrehajtott változtatások!
A tömb "mély klónjának" megfelelő elvégzésére többféle módszer létezik, de ezt otthoni feladatként meghagyom.
TL; DR
Ha egy elemet szeretne hozzáadni a tömb végéhez, használja a push () billentyűt . Ha hozzá kell adnia egy elemet a tömb elejéhez , próbálkozzon az unshift () paranccsal. És te tudodadjon hozzá tömböket a concat () használatával.
Bizonyosan sok más lehetőség is van az elemek hozzáadásához egy tömbhöz, és arra kérlek benneteket, hogy menjetek el és keressetek még néhány remek tömböt!
Nyugodtan forduljon hozzám a Twitteren, és tudassa velem a kedvenc tömb módszerét az elemek hozzáadásához egy tömbhöz.