Introduzione
Quando si lavora con gli Array in JavaScript, uno degli aspetti più utili e pratici è la gestione dei duplicati e dei valori unici. In molte applicazioni reali, infatti, i dati arrivano ripetuti: tag selezionati più volte, ID prodotti duplicati, email già presenti in una lista, codici inseriti da un utente con errori di ripetizione.
Questo tutorial si concentra su un sotto-argomento molto concreto: come creare, analizzare e trasformare array per eliminare duplicati e lavorare con valori unici. Non è solo un esercizio teorico: è una tecnica utile per pulire dati, evitare errori nei form, preparare liste per API e migliorare la qualità delle informazioni in memoria.
Vedremo:
- come creare array in modo semplice e leggibile;
- quali metodi usare per controllare e trasformare i dati;
- come iterare sugli elementi per rilevare duplicati;
- come costruire un nuovo array con soli valori unici.
Codice completo
// Lista di prodotti selezionati da un utente, con alcuni duplicati
const prodottiSelezionati = [
"tastiera",
"mouse",
"monitor",
"mouse",
"cuffie",
"monitor",
"webcam"
];
// 1) Creazione di un nuovo array senza duplicati usando Set
const prodottiUnici = [...new Set(prodottiSelezionati)];
console.log("Prodotti originali:", prodottiSelezionati);
console.log("Prodotti unici:", prodottiUnici);
// 2) Contare quante volte compare ogni elemento
const conteggioProdotti = {};
for (const prodotto of prodottiSelezionati) {
if (conteggioProdotti[prodotto]) {
conteggioProdotti[prodotto]++;
} else {
conteggioProdotti[prodotto] = 1;
}
}
console.log("Conteggio prodotti:", conteggioProdotti);
// 3) Trovare i duplicati con l´uso di includes() e un array di supporto
const duplicati = [];
const giaVisti = [];
for (const prodotto of prodottiSelezionati) {
if (giaVisti.includes(prodotto)) {
duplicati.push(prodotto);
} else {
giaVisti.push(prodotto);
}
}
console.log("Duplicati trovati:", duplicati);
// 4) Funzione riutilizzabile per ottenere valori unici mantenendo l´ordine
function estraiUnici(array) {
const risultato = [];
for (const elemento of array) {
if (!risultato.includes(elemento)) {
risultato.push(elemento);
}
}
return risultato;
}
const uniciConFunzione = estraiUnici(prodottiSelezionati);
console.log("Unici con funzione:", uniciConFunzione);
// 5) Caso pratico: normalizzare stringhe prima di eliminare i duplicati
const emailInserite = [
"[email protected]",
"[email protected] ",
" [email protected]",
"[email protected]",
"[email protected]"
];
const emailNormalizzate = emailInserite.map(email => email.trim().toLowerCase());
const emailUniche = [...new Set(emailNormalizzate)];
console.log("Email normalizzate:", emailNormalizzate);
console.log("Email uniche:", emailUniche);Spiegazione
Partiamo dalla struttura base: un array in JavaScript si crea con le parentesi quadre []. Nell’esempio abbiamo un elenco di prodotti selezionati da un utente. Il problema è che alcuni valori si ripetono, quindi dobbiamo pulire i dati.
1. Eliminare i duplicati con Set
La soluzione più immediata è usare Set, una struttura dati che conserva solo valori unici. Convertendo l’array in Set e poi di nuovo in array con lo spread operator [... ], otteniamo una nuova lista senza ripetizioni:
- new Set(array) rimuove i duplicati;
- [...new Set(array)] trasforma il Set in array.
Questo approccio è molto efficiente e leggibile, soprattutto quando ti interessa solo il risultato finale.
2. Contare le occorrenze
In alcuni casi non basta sapere quali elementi sono duplicati: serve anche sapere quante volte appaiono. Per farlo, abbiamo usato un oggetto come mappa di conteggio. Ogni volta che incontriamo un prodotto, incrementiamo il suo valore.
Questa tecnica è utile per statistiche, report e analisi di dati inseriti dall’utente.
3. Trovare i duplicati con iterazione
Nel terzo blocco usiamo un array giaVisti per registrare gli elementi incontrati. Se un valore è già presente, significa che è un duplicato e lo aggiungiamo all’array duplicati.
Qui entra in gioco l’iterazione con for...of, molto comoda quando vuoi scorrere gli elementi dell’array in modo diretto e leggibile.
4. Creare una funzione riutilizzabile
La funzione estraiUnici mostra una soluzione semplice e riutilizzabile. Scorre l’array originale e aggiunge un elemento al risultato solo se non è già presente.
Questo metodo mantiene anche l’ordine originale degli elementi, un dettaglio importante quando l’ordine dei dati ha valore, per esempio in una lista di preferenze o in una timeline.
5. Normalizzare i dati prima del confronto
Un errore comune è confrontare i valori senza prima normalizzarli. Nell’esempio delle email, abbiamo usato:
- trim() per rimuovere spazi iniziali e finali;
- toLowerCase() per rendere il confronto case-insensitive.
Così, [email protected] e [email protected] vengono riconosciuti come lo stesso valore. È una best practice fondamentale quando si lavora con input utente.
Best practice
- Normalizza sempre i dati prima di confrontarli: spazi, maiuscole e minuscole possono generare duplicati “falsi”.
- Usa Set quando ti serve solo l’unicità: è una soluzione pulita, veloce e molto leggibile.
- Usa for...of per iterazioni chiare: è perfetto quando devi analizzare ogni elemento dell’array.
- Se serve riusabilità, incapsula la logica in una funzione: il codice diventa più facile da testare e mantenere.
- Valuta il contesto prima di scegliere includes(): su array molto grandi, controlli ripetuti con includes() possono diventare meno efficienti.
- Conserva l’ordine solo se serve davvero: Set rimuove i duplicati ma mantiene l’ordine di inserimento, quindi è spesso una scelta ottima anche in questo senso.
Riepilogo
In questo tutorial abbiamo visto come usare gli array in JavaScript per gestire un problema molto comune: eliminare duplicati e ottenere valori unici. Abbiamo imparato a:
- creare array con dati ripetuti;
- rimuovere duplicati con Set;
- contare quante volte compare ogni elemento;
- trovare duplicati tramite iterazione;
- normalizzare i dati prima del confronto.
Queste tecniche sono semplici ma estremamente utili in progetti reali, soprattutto quando i dati provengono da input utente, API o file esterni. Saper pulire un array è una competenza base che migliora subito la qualità del tuo codice.
Approfondisci con risorse ufficiali
- MDN Web Docs - Array: documentazione completa sui metodi degli array in JavaScript.
- MDN Web Docs - Set: guida ufficiale alla struttura dati Set e al suo utilizzo per valori unici.
- MDN Web Docs - for...of: riferimento per le iterazioni sugli iterabili.
- MDN Web Docs - Array.prototype.includes(): utile per verificare la presenza di un elemento in un array.
- MDN Web Docs - Array.prototype.map(): ottimo per normalizzare o trasformare i dati prima di elaborarli.