JavaScript Array Insert - Sådan tilføjes en array med push-, unshift- og concat-funktionerne

JavaScript-arrays er let en af ​​mine foretrukne datatyper. De er dynamiske, nemme at bruge og tilbyder en hel række indbyggede metoder, vi kan drage fordel af.

Jo flere muligheder du har, desto mere forvirrende kan det være at beslutte, hvilken du skal bruge.

I denne artikel vil jeg gerne diskutere nogle almindelige måder at føje et element til et JavaScript-array.

Push-metoden

Den første og sandsynligvis den mest almindelige JavaScript-array-metode, du vil støde på, er push () . Push () -metoden bruges til at tilføje et element til slutningen af ​​et array.

Lad os sige, at du har en række elementer, hvor hvert element er en streng, der repræsenterer en opgave, du skal udføre. Det ville være fornuftigt at tilføje nyere elementer til slutningen af ​​arrayet, så vi først kunne afslutte vores tidligere opgaver.

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

Okay, så push har givet os en fin og enkel syntaks til at tilføje et element i slutningen af ​​vores array.

Lad os sige, at vi ønskede at tilføje to eller tre emner ad gangen til vores liste. Hvad ville vi så gøre? Som det viser sig, kan push () acceptere flere elementer, der skal tilføjes på én gang.

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

Nu hvor vi har tilføjet nogle flere opgaver til vores array, vil vi måske vide, hvor mange elementer der i øjeblikket er i vores array for at afgøre, om vi har for meget på vores plade.

Heldigvis har push () en returværdi med længden af ​​arrayet, efter at vores element (er) er blevet tilføjet.

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

Uskiftningsmetoden

Ikke alle opgaver oprettes ens. Du kan komme ind i et scenarie, hvor du føjer opgaver til dit array, og pludselig støder du på et, der er mere presserende end de andre.

Det er tid til at introducere vores ven unshift (), der giver os mulighed for at tilføje varer til begyndelsen af ​​vores array.

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 bemærker muligvis i eksemplet ovenfor, at ligesom push () -metoden, returnerer unshift () den nye array-længde, som vi kan bruge. Det giver os også muligheden for at tilføje mere end et element ad gangen.

Concat-metoden

Forkortelse for sammenkædning (for at linke sammen), er metoden concat () brugt til at forbinde to (eller flere) arrays.

Hvis du husker ovenfra, returnerer metoden unshift () og push () længden af ​​det nye array. concat () på den anden sidereturnerer et helt nyt array.

Dette er en meget vigtig skelnen og gør concat () ekstremt nyttig, når du har at gøre med arrays, som du ikke vil mutere (som arrays gemt i React-tilstand).

Her er hvordan en ret grundlæggende og ligetil sag kan se ud:

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

Lad os sige, at du har flere arrays, som du gerne vil sammenføje. Ingen bekymringer, concat () er der for at redde dagen!

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

Kloning med Concat

Husk, hvordan jeg sagde, at concat () kan være nyttigt, når du ikke vil mutere dit eksisterende array? Lad os se på, hvordan vi kan udnytte dette koncept til at kopiere indholdet af et array til et nyt array.

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

Fantastisk! Vi kan i det væsentlige "klone" en matrix ved hjælp af concat () .

Men der er en lille 'gotcha' i denne kloningsproces. Den nye matrix er en "lav kopi" af den kopierede matrix. Dette betyder, at ethvert objekt kopieres ved henvisning og ikke det egentlige objekt.

Lad os se på et eksempel for at forklare denne idé mere tydeligt.

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

Selvom vi ikke direkte foretog ændringer i vores oprindelige array, blev arrayet i sidste ende påvirket af de ændringer, vi foretog på vores klonede array!

Der er flere forskellige måder til korrekt at lave en "dyb klon" af en matrix, men det vil jeg lade være som lektier.

TL; DR

Når du vil tilføje et element i slutningen af ​​dit array, skal du bruge push (). Hvis du har brug for at tilføje et element til begyndelsen af ​​dit array, skal du prøve at fjerne skiftet (). Og det kan dutilføj arrays sammen ved hjælp af concat ().

Der er bestemt mange andre muligheder for at tilføje elementer til en matrix, og jeg inviterer dig til at gå ud og finde nogle flere fantastiske matrixmetoder!

Du er velkommen til at kontakte mig på Twitter og fortælle mig om din foretrukne array-metode til at føje elementer til en array.