Articolo originale: https://www.freecodecamp.org/news/javascript-array-insert-how-to-add-to-an-array-with-the-push-unshift-and-concat-functions/
Gli array JavaScript sono senza dubbio uno dei miei tipi di dato preferiti. Sono dinamici, facili da usare e offrono un sacco di metodi integrati che possiamo sfruttare.
Tuttavia, più opzioni ci sono e più difficile può essere decidere quale si dovrebbe 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 per array in JavaScript che incontrerai è push(). Il metodo push() viene usato per aggiungere un elemento alla fine di un array.
Diciamo che tu hai un array di elementi, ciascuno dei quali è una stringa che rappresenta un'attività che devi svolgere. Avrebbe senso aggiungere gli elementi più recenti alla fine dell'array, in modo che tu possa svolgere prima le attività più datate.
Diamo un'occhiata a un esempio 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']Bene, push() ci fornisce una sintassi piacevole e semplice per aggiungere un elemento alla fine del nostro array.
Diciamo di volere aggiungere due o tre attività alla volta alla nostra lista, come dovremmo fare? Come stiamo per scoprire, 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 contiene attualmente per determinare se abbiamo troppe cose da fare.
Per fortuna, push() ha come valore di ritorno la lunghezza dell'array dopo l'aggiunta di uno o più elementi.
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à hanno uguale importanza. Potresti trovarti nella situazione in cui stai aggiungendo attività all'array e improvvisamente ne trovi una che è più urgente delle altre.
È giunto il momento 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']Potrai notare nell'esempio sopra che, proprio come il metodo push(), unshift() restituisce la nuova lunghezza dell'array. Ci dà anche la possibilità di aggiungere più di un elemento alla volta.
Il Metodo Concat
Abbreviazione del verbo inglese concatenate (legare insieme), il metodo concat() viene usato per unire assieme due (o più) array.
Se ricordi da quanto esposto in precedenza, i metodi unshift() e push() restituiscono la lunghezza del nuovo array; concat(), d'altro canto, restituisce un array completamente nuovo.
È una distinzione molto importante, che rende concat() estremamente utile quando si ha a che fare con array che non si vogliono modificare (come gli array conservati in uno stato in React).
Ecco come potrebbe apparire un caso abbastanza semplice e diretto:
const arr1 = ['?', '?'];
const arr2 = ['?', '?'];
const arr3 = arr1.concat(arr2);
console.log(arr3); // ["?", "?", "?", "?"]
Supponiamo tu abbia più array da unire insieme. Nessun problema, concat() ti salverà!
const arr1 = ['?', '?'];
const arr2 = ['?', '?'];
const arr3 = ['?', '?'];
const arr4 = arr1.concat(arr2,arr3);
console.log(arr4); // ["?", "?", "?", "?", "?", "?"]
Clonare con Concat
Ricordi che avevo detto che concat() può essere utile quando non vogliamo modificare array già esistenti? 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) //["?", "?", "?", "?", "?", "?", "?"]Stupendo! Possiamo essenzialmente "clonare" un array usando concat().
Ma c'è un piccolo problema in questo processo di clonazione. Il nuovo array è una "copia superficiale" dell'array copiato. Ciò significa che qualsiasi oggetto all'interno dell'array originale viene copiato per riferimento e non l'oggetto reale, quindi la modifica di un elemento nell'array clonato che proviene dall'array originale si ripercuote anche in quest'ultimo.
Diamo un'occhiata a un esempio per spiegare questa idea più chiaramente.
const arr1 = [{food:"?"}, {food:"?"}, {food:"?"}]
const arr2 = [].concat(arr1);
// Questa modifica si applica anche ad arr1
arr2[1].food = "!";
// Questa modifica è solo su arr2
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 (arr1), l'array riporta comunque le modifiche che abbiamo effettuato sul secondo elemento dell'array clonato (arr2[1])!
Esistono diversi modi per fare correttamente una "clonazione profonda" di un array, ma te lo lascerò scoprire come compito a casa.
Un Video Che Spiega Come Aggiungere Elementi a Un Array Con i metodi Push, Unshift e Concat
TL;DR
Quando vuoi aggiungere un elemento alla fine di un array, usa push(). Se hai bisogno di aggiungere un elemento all'inizio di un array, prova unshift(); inoltre puoi unire più array insieme usando concat().
Ci sono certamente molte altre opzioni per aggiungere elementi a un array, e ti invito a cercarle!
Puoi contattarmi su Twitter per farmi sapere qual è il tuo metodo preferito per aggiungere elementi a un array.