Ecco 2 modi per combinare i tuoi array e ottenere un NUOVO array. A me piace usare l’operatore spread. Ma se devi supportare browser più datati, meglio ripiegare su concat.
// 2 modi per unire gli array
const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];
// Metodo 1: Concat
const combined1 = [].concat(fruits, legumes);
// Metodo 2: Spread
const combined2 = [...fruits, ...legumes];
// Risultato
// [ 'pomme', 'poire', 'carotte', 'salade' ]Una sintassi alternativa per concat
La sintassi di concat si può scrivere anche così:
const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];
const combined = fruits.concat(legumes);
// [ 'pomme', 'poire', 'carotte', 'salade' ]
console.log(fruits); // ['pomme ', 'poire'];
console.log(legumes); // ['carotte ', 'salade'];
Come vedi, questo modo di scriverla non tocca e non modifica l’array esistente.
Quale scegliere?
Mettiamo le due versioni una accanto all’altra, così puoi confrontarle.
// Versione A:
const combinedA = [].concat(fruits, legumes);
// Versione B:
const combinedB = fruits.concat(legumes);
La domanda ora è quale scegliere. Io preferisco la versione A, perché trovo l’intenzione molto più chiara. Basta guardarla per capire che sto creando un nuovo array e che non tocco quello esistente. Con la versione B, invece, sembra che stia aggiungendo legumes all’array fruits, e non mi è affatto ovvio che l’array fruits possa finire sostituito dai legumes.
La differenza tra spread e concat
Preferisco spread perché lo trovo più conciso e più comodo da scrivere. MA ci sono ancora casi in cui concat resta vantaggioso.
Lo spread è perfetto quando sai in anticipo di avere a che fare con degli array. Ma cosa succede se la sorgente è altro, per esempio una stringa, e vuoi aggiungerla all’array? Prendiamo un esempio.
Esempio
Diciamo che il risultato che vogliamo è questo:
[1, 2, 3, 'random'];
A. Con spread
Se seguiamo lo schema usato finora e ricorriamo all’operatore spread, ecco cosa succede:
function combineArray(array1, array2) {
return [...array1, ...array2];
}
const isArray = [1, 2, 3];
const notArray = 'random';
combineArray(isArray, notArray);
// [ 1, 2, 3, 'r', 'a', 'n', 'd', 'o', 'm' ]
Fare lo spread di una stringa la spezza nelle singole lettere. Quindi non otteniamo il risultato che cercavamo.
B. Con concat
MA se seguiamo lo schema con concat, ecco cosa succede:
function combineArray(array1, array2) {
return [].concat(array1, array2);
}
const isArray = [1, 2, 3];
const notArray = 'random';
combineArray(isArray, notArray);
// [ 1, 2, 3, 'random' ]
Ecco fatto. È esattamente il risultato che volevamo.
Lo so, qualcuno di voi starà pensando «e dai». Scrivo una condizione per assicurarmi che quello che passo sia un array e agisco di conseguenza. Certo, funziona anche così. Oppure scrivi meno codice e usi concat.
Verdetto
La regola veloce è questa. Se sai di avere a che fare con degli array, usa spread. Ma se c’è la possibilità che ti arrivi qualcosa che non è un array, allora usa concat per fondere un array
In ogni caso, volevo solo segnalarlo, così puoi scegliere il metodo più adatto al problema che stai cercando di risolvere.
Unire due array con push
Qualcuno di voi si starà chiedendo se non si possa usare anche push per unire un array. E sì, si può! Ma push tocca e modifica l’array esistente: NON ne crea uno nuovo. Dipende quindi da quello che vuoi ottenere. Tienilo bene a mente.
const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];
const combined = fruits.push(...legumes);
console.log(combined); // 4
// quando usi push, restituisce la LUNGHEZZA dell'array combinato
console.log(fruits); // [ 'pomme', 'poire', 'carotte', 'salade' ]
console.log(legumes); // ['carotte', 'salade']
Inoltre, quando provi a fare il push di un array dentro un altro array, devi passarlo con lo spread, altrimenti ti ritrovi con un array annidato. A meno che, ovviamente, non fosse proprio quello che volevi
const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];
cars.push(legumes);
// fruits: [ 'pomme ', 'poire', ['carotte ', 'salade'] ]
cars.push(...legumes);
// fruits: [ 'pomme ', 'poire', 'carotte ', 'salade' ]
Supporto dei browser
Lo spread è arrivato con ES6, quindi tutti i browser moderni lo supportano. Altrimenti usa concat al suo posto, oppure passa da un compilatore come Babel.
