Articolo originale: https://www.freecodecamp.org/news/how-to-compare-arrays-in-javascript/
Quando gestisci della logica con JavaScript, potresti aver bisogno di confrontare due array per vedere se sono uguali oppure no.
In pratica, non dovrebbe essere difficile e potresti pensare di utilizzare sia l'operatore di uguaglianza (doppio uguale, ==) che di uguaglianza stretta (triplo uguale, ===). Ma sfortunatamente non puoi farne uso in questo caso.
let array1 = [11, 22, 33];
let array2 = [11, 22, 33];
console.log(array1 == array2); //false
console.log(array1 === array2); //false
Questo accade perché gli array JavaScript sono di tipo Object (oggetto):
let arrayType = typeof(array1);
console.log(arrayType); //"Object"
Gli oggetti non vengono confrontati in base ai loro valori ma secondo i riferimenti alle variabili:
console.log(array1[0] == array1[0]); //true
console.log(array1[1] === array1[1]); //true
Ma questo non è ciò che desideri. Invece, vuoi essere in grado di confrontare i due array direttamente e restituire un solo valore booleano senza dover verificare ogni elemento uno alla volta.
In questo articolo, imparerai i vari modi con cui puoi confrontare due array in JavaScript per vedere se sono uguali oppure no.
Come confrontare due array convertendoli in stringhe
Un approccio comune e piuttosto diretto che puoi usare per confrontare due array è convertirli in forma di stringa.
Esistono due metodi diversi che puoi usare: puoi decidere di convertire gli array in testo JSON usando il metodo JSON.stringify(), oppure puoi usare il metodo .toString() per restituire gli array come una stringa.
Nota: questi metodi sono diversi, come puoi vedere di seguito:
let array = [11, 22, 33];
console.log(JSON.stringify(array)); //"[11,22,33]"
console.log(array.toString()); //"11,22,33"
Metodo 1: come usare JSON.stringify()
Questo metodo consente di serializzare ogni array convertendolo in una stringa JSON. In seguito, puoi confrontare le due stringhe JSON.
let array1 = [11, 22, 33];
let array2 = [11, 22, 33];
console.log(JSON.stringify(array1) === JSON.stringify(array2)); //true
Possiamo anche decidere di creare una funzione riutilizzabile che ci aiuta a confrontare due array che le passiamo:
const compareArrays = (a, b) => {
return JSON.stringify(a) === JSON.stringify(b);
};
let array1 = [11, 22, 33];
let array2 = [21, 22, 23];
let array3 = [11, 22, 33];
console.log(compareArrays(array1, array2)); //false
console.log(compareArrays(array1, array3)); //true
Metodo 2: come usare .toString()
Simile a JSON.stringify(), questo metodo converte ogni tipo di dato in una stringa e dunque anche gli oggetti in stringhe.
let array1 = [11, 22, 33];
let array2 = [11, 22, 33];
console.log(array1.toString() === array2.toString()); //true
Possiamo anche decidere di creare una funzione riutilizzabile che ci aiuta a confrontare due array che le passiamo:
const compareArrays = (a, b) => {
return a.toString() === b.toString();
};
let array1 = [11, 22, 33];
let array2 = [21, 22, 23];
let array3 = [11, 22, 33];
console.log(compareArrays(array1, array2)); //false
console.log(compareArrays(array1, array3)); //true
Nota: dovresti utilizzare il metodo JSON.stringify(), dato che serializza soltanto l'array JavaScript. L'array mantiene ancora la forma di un array, ma viene elaborato in modo da diventare la versione stringa di un array.
Come confrontare due array iterando sui loro valori
I metodi appena visti falliscono in alcuni casi. Ad esempio, quando un array ha un valore null e un altro ha un valore undefined, e utilizziamo l'uguaglianza stretta, otteniamo false di default – che è corretto:
console.log(null === undefined); //false
Ma quando usiamo i metodi JSON.Strigify() o .toString() otteniamo true, anche se non dovremmo:
let array1 = [11, null, 33];
let array2 = [11, undefined, 33];
console.log(JSON.stringify(array1) === JSON.stringify(array2)); //true
console.log(array1.toString() === array2.toString()); //true
Un approccio migliore potrebbe essere confrontare la lunghezza degli array e poi iterare sui valori e confrontare ogni elemento.
Metodo 1: usare every()
Il metodo every() consente di eseguire una funzione su ogni elemento di un array. Questa funzione viene detta funzione callback. Ha accesso ad alcuni parametri di base come elemento, indice e altro ancora, che possono essere usati al suo interno:
// Sintassi
array.every((valoreCorrente, indice, array)=> { ... })
In questo metodo, testeremo prima se la lunghezza dei due array è comparabile. Poi itereremo su uno degli array usando gli indici per confrontare i suoi elementi con quelli del secondo array:
const compareArrays = (a, b) =>
a.length === b.length &&
a.every((element, index) => element === b[index]);
let array1 = [11, 22, 33];
let array2 = [21, 22, 23];
let array3 = [11, 22, 33];
console.log(compareArrays(array1, array2)); //false
console.log(compareArrays(array1, array3)); //true
E quando abbiamo null e undefined come elementi degli array, sarà possibile individuare che non sono lo stesso valore:
const compareArrays = (a, b) =>
a.length === b.length && a.every((element, index) => element === b[index]);
let array1 = [11, null, 33];
let array2 = [21, 22, 23];
let array3 = [11, undefined, 33];
console.log(compareArrays(array1, array2)); //false
console.log(compareArrays(array1, array3)); //false
Metodo 2: usare un loop for
Il metodo every() ha una sintassi migliore. Tuttavia, un altro modo in cui possiamo implementare questo approccio è usare un altro metodo di iterazione come un loop for, forEach() o map() insieme a delle istruzioni if. Potrebbero risultato più facili da afferrare per un principiante.
const compareArrays = (a, b) => {
if (a.length !== b.length) return false;
else {
// Confrontiamo ogni elemento dell'array
for (var i = 0; i < a.length; i++) {
if (a[i] !== b[i]) {
return false;
}
}
return true;
}
};
let array1 = [21, null, 33];
let array2 = [21, 22, 23];
let array3 = [21, undefined, 33];
let array4 = [21, 22, 23];
console.log(compareArrays(array1, array2)); //false
console.log(compareArrays(array1, array3)); //false
console.log(compareArrays(array2, array4)); //true
In entrambi i metodi precedenti, occorre prima confrontare le lunghezze, visto che se non sono uguali, vuol dire automaticamente che gli array non sono uguali e possiamo restituire false.
Se le lunghezze sono uguali, allora iniziamo a verificare ogni elemento. Viene restituito false non appena due elementi allo stesso indice nei due array sono diversi.
Conclusione
In questo articolo hai imparato a confrontare due array in JavaScript usando due approccio diversi.
Si tratta di convertire gli array in forma di stringa prima di confrontarli oppure di iterare sugli elementi per confrontarne i valori per avere un confronto più dettagliato.
Nota: il doppio uguale verifica se i valori sono uguali, mentre il triplo uguale verifica se i valori e il loro tipo di dato sono uguali. Qui puoi leggere altro sui due tipi di uguaglianza.
Divertiti a programmare!