JavaScript Array Insert - Come aggiungere a un array con le funzioni Push, Unshift e Concat

Gli array JavaScript sono facilmente uno dei miei tipi di dati preferiti. Sono dinamici, facili da usare e offrono un sacco di metodi integrati di cui possiamo trarre vantaggio.

Tuttavia, più opzioni hai, più confuso può essere decidere quale usare.

In questo articolo, vorrei discutere alcuni modi comuni per aggiungere un elemento a un array JavaScript.

Il metodo push

Il primo e probabilmente il più comune metodo di array JavaScript che incontrerai è push () . Il metodo push () viene utilizzato per aggiungere un elemento alla fine di un array.

Supponiamo che tu abbia un array di elementi, ogni elemento è una stringa che rappresenta un'attività che devi svolgere. Avrebbe senso aggiungere elementi più recenti alla fine dell'array in modo da poter terminare prima le nostre attività precedenti.

Diamo un'occhiata all'esempio in forma di codice:

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

Va bene, quindi push ci ha fornito una sintassi piacevole e semplice per aggiungere un elemento alla fine del nostro array.

Diciamo che volevamo aggiungere due o tre elementi alla volta alla nostra lista, cosa faremmo allora? A quanto pare, push () può accettare più elementi da aggiungere contemporaneamente.

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

Ora che abbiamo aggiunto altre attività al nostro array, potremmo voler sapere quanti elementi sono attualmente nel nostro array per determinare se abbiamo troppe cose nel nostro piatto.

Fortunatamente, push () ha un valore di ritorno con la lunghezza dell'array dopo che i nostri elementi sono stati aggiunti.

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

Il metodo Unshift

Non tutte le attività sono uguali. Potresti imbatterti in uno scenario in cui stai aggiungendo attività al tuo array e all'improvviso ne incontri uno più urgente degli altri.

È ora di presentare il nostro amico unshift () che ci consente di aggiungere elementi all'inizio del nostro 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']

Potresti notare nell'esempio sopra che, proprio come il metodo push () , unshift () restituisce la nuova lunghezza dell'array da usare. Ci dà anche la possibilità di aggiungere più di un elemento alla volta.

Il metodo Concat

Abbreviazione di concatenate (per collegare insieme), il metodo concat () viene utilizzato per unire due (o più) array.

Se ricordi dall'alto, i metodi unshift () e push () restituiscono la lunghezza del nuovo array. concat () , d'altra parte,restituirà un array completamente nuovo.

Questa è una distinzione molto importante e rende concat () estremamente utile quando hai a che fare con array che non vuoi mutare (come gli array immagazzinati nello stato React).

Ecco come potrebbe apparire un caso abbastanza semplice e diretto:

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

Supponiamo che tu abbia più array che vorresti unire insieme. Nessun problema, concat () è lì per salvare la giornata!

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

Clonazione con Concat

Ricordi come ho detto che concat () può essere utile quando non vuoi modificare l'array esistente? Diamo un'occhiata a come possiamo sfruttare questo concetto per copiare il contenuto di un array in un nuovo array.

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

Eccezionale! Possiamo essenzialmente "clonare" un array usando concat () .

Ma c'è un piccolo "trucco" in questo processo di clonazione. Il nuovo array è una "copia superficiale" dell'array copiato. Ciò significa che qualsiasi oggetto viene copiato per riferimento e non l'oggetto reale.

Diamo un'occhiata a un esempio per spiegare più chiaramente questa idea.

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

Anche se non abbiamo apportato direttamente alcuna modifica al nostro array originale, l'array è stato alla fine influenzato dalle modifiche che abbiamo apportato al nostro array clonato!

Esistono molti modi diversi per eseguire correttamente un "clone profondo" di un array, ma lo lascerò come compito a casa.

TL; DR

Quando vuoi aggiungere un elemento alla fine del tuo array, usa push (). Se devi aggiungere un elemento all'inizio del tuo array, prova unshift (). E tu puoiaggiungere array insieme usando concat ().

Ci sono sicuramente molte altre opzioni per aggiungere elementi a un array, e ti invito a uscire e trovare altri fantastici metodi di array!

Sentiti libero di contattarmi su Twitter e fammi sapere il tuo metodo di array preferito per aggiungere elementi a un array.