JavaScript-taulukon lisäys - Kuinka lisätä taulukkoon Push-, Unshift- ja Concat-toiminnoilla

JavaScript-taulukot ovat helposti yksi suosikkini tietotyypeistä. Ne ovat dynaamisia, helppokäyttöisiä ja tarjoavat kokonaisen joukon sisäänrakennettuja menetelmiä, joita voimme hyödyntää.

Mitä enemmän vaihtoehtoja sinulla on, sitä hämmentävämpää voi olla päättää, mitä valitset.

Tässä artikkelissa haluaisin keskustella yleisistä tavoista lisätä elementti JavaScript-ryhmään.

Push-menetelmä

Ensimmäinen ja luultavasti yleisin tapaamasi JavaScript-matriisimenetelmä on push () . Push () -menetelmää käytetään lisäämään elementti matriisin loppuun.

Oletetaan, että sinulla on joukko elementtejä, joista jokainen on merkkijono, joka edustaa suoritettavaa tehtävää. Olisi järkevää lisätä uudemmat kohteet taulukon loppuun, jotta voimme suorittaa aikaisemmat tehtävämme ensin.

Katsotaanpa esimerkkiä koodimuodossa:

const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item']

Selvä, joten push on antanut meille mukavan ja yksinkertaisen syntaksin kohteen lisäämiseksi taulukon loppuun.

Oletetaan, että halusimme lisätä luetteloon kaksi tai kolme kohdetta kerrallaan, mitä tekisimme sitten? Kuten käy ilmi, push () voi hyväksyä useita elementtejä kerralla.

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']

Nyt kun olemme lisänneet joitain muita tehtäviä taulukkoon, saatamme haluta tietää, kuinka monta kohdetta ryhmässä on tällä hetkellä sen selvittämiseksi, onko meillä liikaa lautasellamme.

Onneksi push (): lla on paluuarvo matriisin pituudella sen jälkeen, kun elementtimme on lisätty.

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']

Unshift-menetelmä

Kaikkia tehtäviä ei luoda tasa-arvoisesti. Saatat joutua tilanteeseen, jossa lisäät tehtäviä ryhmään ja yhtäkkiä kohtaat kiireellisemmän kuin muut.

On aika esitellä ystäväsi vaihto (), jonka avulla voimme lisätä kohteita taulukon alkuun.

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']

Yllä olevassa esimerkissä saatat huomata, että aivan kuten push () -menetelmä, myös unshift () palauttaa uuden taulukon pituuden, jota voimme käyttää. Se antaa meille myös mahdollisuuden lisätä useita elementtejä kerrallaan.

Concat-menetelmä

Lyhyt sanoista ketjuttaminen (linkittäminen toisiinsa), concat () -menetelmää käytetään kahden (tai useamman) matriisin yhdistämiseen.

Jos muistat ylhäältä, unshift () - ja push () -menetelmät palauttavat uuden taulukon pituuden. concat () , toisaalta,palauttaa täysin uuden taulukon.

Tämä on erittäin tärkeä ero ja tekee concat (): sta erittäin hyödyllisen käsitellessäsi matriiseja, joita et halua mutatoida (kuten React-tilassa tallennetut taulukot).

Tältä näyttää melko yksinkertainen ja yksinkertainen tapaus:

const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = arr1.concat(arr2); console.log(arr3); // ["?", "?", "?", "?"] 

Oletetaan, että sinulla on useita taulukoita, jotka haluat liittää yhteen. Ei hätää, concat () on siellä pelastamaan päivän!

const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = ['?', '?']; const arr4 = arr1.concat(arr2,arr3); console.log(arr4); // ["?", "?", "?", "?", "?", "?"] 

Kloonaus Concatin kanssa

Muistatko, kuinka sanoin, että concat () voi olla hyödyllinen, kun et halua muokata nykyistä taulukkoasi? Katsotaanpa, miten voimme hyödyntää tätä konseptia kopioimalla yhden taulukon sisällön uuteen ryhmään.

const arr1 = ["?", "?", "?", "?", "?", "?"]; const arr2 = [].concat(arr1); arr2.push("?"); console.log(arr1) //["?", "?", "?", "?", "?", "?"] console.log(arr2) //["?", "?", "?", "?", "?", "?", "?"]

Mahtava! Voimme olennaisesti "kloonata" matriisin concat (): lla .

Mutta tässä kloonausprosessissa on pieni "gotcha". Uusi taulukko on kopioidun matriisin "matala kopio". Tämä tarkoittaa, että mikä tahansa objekti kopioidaan viitteenä eikä varsinainen kohde.

Katsotaanpa esimerkkiä, joka selittää tämän idean selkeämmin.

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: '?' } ]

Vaikka emme suoraan tehneet muutoksia alkuperäiseen ryhmäämme, ryhmään vaikuttivat viime kädessä kloonattuun ryhmään tekemämme muutokset!

On useita eri tapoja tehdä oikein "syvä klooni" taulukosta, mutta jätän sen sinulle kotitehtävinä.

TL; DR

Kun haluat lisätä elementin taulukon loppuun, käytä push (). Jos sinun on lisättävä elementti taulukon alkuun, kokeile unshift (). Ja sinä voitlisää taulukot yhteen käyttämällä concat ().

Elementtien lisäämiseen taulukkoon on varmasti monia muita vaihtoehtoja, ja kehotan sinua menemään ulos ja etsimään lisää hienoja taulukotapoja!

Ota rohkeasti yhteyttä minuun Twitterissä ja kerro minulle suosikki matriisimenetelmäsi elementtien lisäämiseksi taulukkoon.