JavaScript Array Insert - Slik legger du til en matrise med funksjonene Push, Uhift og Concat

JavaScript-matriser er lett en av favorittdatatypene mine. De er dynamiske, enkle å bruke, og tilbyr en hel mengde innebygde metoder vi kan dra nytte av.

Jo flere alternativer du har, desto mer forvirrende kan det være å bestemme hvilken du skal bruke.

I denne artikkelen vil jeg diskutere noen vanlige måter å legge til et element i en JavaScript-matrise.

Push-metoden

Den første og sannsynligvis den vanligste JavaScript-array-metoden du møter er push () . Push () -metoden brukes til å legge til et element i slutten av en matrise.

La oss si at du har en rekke elementer, hvor hvert element er en streng som representerer en oppgave du trenger å utføre. Det ville være fornuftig å legge til nyere elementer på slutten av matrisen, slik at vi først kunne fullføre våre tidligere oppgaver.

La oss se på eksemplet i kodeform:

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

OK, så push har gitt oss en fin og enkel syntaks for å legge til et element på slutten av vårt utvalg.

La oss si at vi ønsket å legge til to eller tre elementer om gangen til listen vår, hva ville vi gjort da? Som det viser seg kan push () godta at flere elementer legges til samtidig.

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

Nå som vi har lagt til noen flere oppgaver i matrisen vår, vil vi kanskje vite hvor mange gjenstander det er i matrisen for å avgjøre om vi har for mye på tallerkenen.

Heldigvis har push () en returverdi med lengden på arrayet etter at elementene våre er lagt til.

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

Utskiftningsmetoden

Ikke alle oppgaver er skapt like. Du kan komme inn i et scenario der du legger til oppgaver i matrisen din, og plutselig møter du en som haster mer enn de andre.

Det er på tide å introdusere vennen vår unshift () som lar oss legge til elementer i begynnelsen av matrisen.

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

Du kan legge merke til i eksemplet ovenfor at, akkurat som push () -metoden, returnerer unshift () den nye matriselengden vi kan bruke. Det gir oss også muligheten til å legge til mer enn ett element om gangen.

Concat-metoden

Forkortelse for sammenkobling (for å koble sammen), brukes metoden concat () for å koble sammen to (eller flere) matriser.

Hvis du husker ovenfra, returnerer metoden unshift () og push () lengden på den nye matrisen. concat () , derimot,vil returnere et helt nytt utvalg.

Dette er et veldig viktig skille og gjør concat () ekstremt nyttig når du har å gjøre med arrays du ikke vil mutere (som arrays lagret i React-tilstand).

Slik ser en ganske grunnleggende og grei sak ut:

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

La oss si at du har flere matriser du ønsker å bli sammen. Ingen bekymringer, concat () er der for å redde dagen!

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

Kloning med Concat

Husk hvordan jeg sa at concat () kan være nyttig når du ikke vil mutere din eksisterende matrise? La oss se på hvordan vi kan utnytte dette konseptet til å kopiere over innholdet i en matrise til en ny matrise.

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

Rått! Vi kan i hovedsak "klone" en matrise ved hjelp av concat () .

Men det er en liten 'gotcha' i denne kloningsprosessen. Den nye matrisen er en "grunne kopi" av den kopierte matrisen. Dette betyr at ethvert objekt kopieres ved referanse og ikke det faktiske objektet.

La oss se på et eksempel for å forklare denne ideen tydeligere.

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

Selv om vi ikke direkte gjorde noen endringer i vår opprinnelige matrise, ble matrisen til slutt påvirket av endringene vi gjorde på vårt klonede utvalg!

Det er flere forskjellige måter å ordentlig gjøre en "dyp klon" av en matrise, men jeg vil legge igjen det for deg som lekser.

TL; DR

Når du vil legge til et element på slutten av matrisen, bruker du push (). Hvis du trenger å legge til et element i begynnelsen av matrisen, kan du prøve å fjerne skiftet (). Og du kanlegg til arrays sammen ved hjelp av concat ().

Det er absolutt mange andre alternativer for å legge til elementer i en matrise, og jeg inviterer deg til å gå ut og finne noen flere flotte matrismetoder!

Ta gjerne kontakt med meg på Twitter og gi meg beskjed om din favoritt arraymetode for å legge til elementer i en array.