JavaScript
HTML
CSS
PHP
Coming Soon
Generatori
Varie & Old

Array e metodi degli array

Array e metodi degli array in JavaScript

Un array è una collezione ordinata di elementi, identificati da un indice numerico. In JavaScript gli array possono contenere valori di qualsiasi tipo e mettono a disposizione numerosi metodi per la gestione e la trasformazione dei dati.

Dichiarazione e accesso agli elementi

Gli array si dichiarano usando parentesi quadre [] o il costruttore Array(). Gli elementi sono indicizzati a partire da 0.

Codice Esempio: Creazione e accesso

CODE: JavaScriptpreleva codice
  1. let frutti = ["Mela", "Banana", "Arancia"];
  2. console.log(frutti[0]); // "Mela"
  3. console.log(frutti.length); // 3

Tabella dei metodi principali

Gli array dispongono di metodi che si dividono in due categorie principali:

Metodo Descrizione Mutabile
push()Aggiunge alla fine
pop()Rimuove l’ultimo
unshift()Aggiunge all’inizio
shift()Rimuove il primo
splice()Inserisce/rimuove da indice
sort()Ordina in-place
reverse()Inverte in-place
fill()Riempie intervallo
copyWithin()Copia porzione su altra posizione
slice()Copia porzioneNo
concat()Unisce array/valoriNo
map()Trasforma ogni elementoNo
filter()Seleziona per condizioneNo
reduce()Accumula in un valoreNo
forEach()Esegue callback per elementoNo
find() / findIndex()Primo elemento/indice che soddisfa testNo
indexOf() / lastIndexOf()Indice prima/ultima occorrenzaNo
includes()Presenza di un valoreNo
join()Concatena in stringaNo
flat() / flatMap()Appiattisce / mappa+appiattisceNo
toSorted()Copia ordinataNo
toReversed()Copia invertitaNo
toSpliced()Copia con inserzioni/rimozioniNo
with()Copia con elemento sostituitoNo

Esempi fondamentali

Aggiunta/rimozione

CODE: JavaScript preleva codice
  1. let a = ["mela", "banana"]; // a = ["mela", "banana"]
  2. a.push("kiwi");    // aggiunge "kiwi" alla fine -> a = ["mela", "banana", "kiwi"]
  3. a.pop();           // rimuove l'ultimo elemento -> a = ["mela", "banana"]
  4. a.unshift("pera"); // aggiunge "pera" all'inizio -> a = ["pera", "mela", "banana"]
  5. a.shift();         // rimuove il primo elemento -> a = ["mela", "banana"]
  6. console.log(a);    // stampa ["mela", "banana"]
  7.  

slice (copia) vs splice (modifica)

CODE: JavaScript preleva codice
  1. let b = ["a", "b", "c", "d"];
  2.  
  3. let copia = b.slice(1, 3);   
  4. // Prende gli elementi da indice 1 a 2 (3 escluso) → ["b", "c"], array originale invariato
  5.  
  6. b.splice(1, 2, "X");         
  7. // Da indice 1, elimina 2 elementi ("b","c") e inserisce "X" → ["a", "X", "d"]
  8.  
  9. console.log(copia, b);
  10. // Output:
  11. // ["b", "c"] ["a", "X", "d"]
  12.  

Ricerca e verifica

CODE: JavaScript preleva codice
  1. let nums = [3, 7, 9, 12, 7];
  2.  
  3. console.log(nums.includes(7));          
  4. // Verifica se 7 è presente → true
  5.  
  6. console.log(nums.indexOf(7));            
  7. // Primo indice di 7 → 1
  8.  
  9. console.log(nums.lastIndexOf(7));        
  10. // Ultimo indice di 7 → 4
  11.  
  12. console.log(nums.find(x => x % 3 === 0));   
  13. // Primo elemento divisibile per 3 → 3
  14.  
  15. console.log(nums.findIndex(x => x > 10));    
  16. // Indice del primo elemento > 10 → 3
  17.  
  18. console.log(nums.some(x => x < 0));         
  19. // Verifica se esiste un elemento < 0 → false
  20.  
  21. console.log(nums.every(x => x > 0));         
  22. // Verifica se tutti gli elementi > 0 → true

Ordinamento corretto

CODE: JavaScript preleva codice
  1. let num = [10, 2, 5];
  2.  
  3. num.sort((x, y) => x - y);  
  4. // Ordina l'array crescente (modifica originale) → [2, 5, 10]
  5.  
  6. let ordCopia = num.toSorted((x, y) => y - x);  
  7. // Ordina decrescente senza modificare 'num' → [10, 5, 2]
  8.  
  9. let nomi = ["Luca", "anna", "Álvaro"];
  10.  
  11. let ordIt = nomi.toSorted((x, y) => 
  12.   x.localeCompare(y, "it", { sensitivity: "base" })
  13. );
  14. // Ordina in ordine alfabetico italiano ignorando maiuscole/minuscole → ["anna", "Álvaro", "Luca"]
  15.  
  16. console.log(num, ordCopia, ordIt);
  17. // Output:
  18. // [2, 5, 10] [10, 5, 2] ["anna", "Álvaro", "Luca"]

Trasformazioni e riduzioni

CODE: JavaScript preleva codice
  1. let v = [1, 2, 3, 4];              // Array iniziale: [1, 2, 3, 4]
  2.  
  3. let doppi = v.map(n => n * 2);     // Moltiplica ogni numero per 2 → [2, 4, 6, 8]
  4. let pari = v.filter(n => n % 2 === 0); // Tieni solo i numeri pari → [2, 4]
  5. let somma = v.reduce((acc, n) => acc + n, 0); // Somma tutti i numeri → 10
  6.  
  7. v.forEach(n => console.log(n));    // Stampa ogni numero su una riga:
  8. // 1
  9. // 2
  10. // 3
  11. // 4
  12.  
  13. console.log(doppi, pari, somma);   // Stampa i risultati finali:
  14. // [2, 4, 6, 8] [2, 4] 10

flat e flatMap

CODE: JavaScript preleva codice
  1. let nested = [1, [2, [3]]]; // Array con numeri e array dentro array (annidato)
  2. console.log(nested.flat(2)); // Appiattisce fino a 2 livelli → [1, 2, 3]
  3.  
  4. let parole = ["cane", "gatto"];
  5. let chars = parole.flatMap(p => p.split("")); // Divide ogni parola in lettere e unisce tutto in un solo array
  6. console.log(chars); // ["c", "a", "n", "e", "g", "a", "t", "t", "o"]

Operazioni immutabili moderne

CODE: JavaScript preleva codice
  1. let c = [1, 2, 3];
  2.  
  3. let r = c.toReversed();    // Inverte l'array senza modificarlo → [3, 2, 1]
  4. let s = c.toSpliced(1, 1, 9); // Sostituisce 1 elemento da indice 1 con 9 → [1, 9, 3]
  5. let w = c.with(0, 7);      // Sostituisce l'elemento in posizione 0 con 7 → [7, 2, 3]
  6.  
  7. console.log(r, s, w, c);
  8. // Output:
  9. // [3, 2, 1] [1, 9, 3] [7, 2, 3] [1, 2, 3]
  10. // Nota: 'c' rimane invariato

concat, join, fill, copyWithin

CODE: JavaScript preleva codice
  1. let d = [1, 2].concat([3, 4]);  // Unisce due array → [1, 2, 3, 4]
  2.  
  3. console.log(["a", "b", "c"].join("-")); // Concatena elementi con "-" → "a-b-c"
  4.  
  5. let e = new Array(5).fill(0); // Crea array di 5 zeri → [0, 0, 0, 0, 0]
  6.  
  7. e.copyWithin(1, 0, 2); // Copia gli elementi da indici 0..1 su posizioni a partire da 1. Ma gli elementi copiati sono già 0, quindi l’array resta → [0, 0, 0, 0, 0]
  8.  
  9. console.log(d, e);
  10. // Output:
  11. // [1, 2, 3, 4] [0, 0, 0, 0, 0]
  12.  

Esempio pratico con più metodi

Codice Esempio: Utilizzo di metodi vari

CODE: JavaScriptpreleva codice
  1. let numeri = [1, 2, 3, 4];
  2. numeri.push(5); // [1, 2, 3, 4, 5]
  3. numeri.shift(); // [2, 3, 4, 5]
  4. let doppi = numeri.map(x => x * 2); // [4, 6, 8, 10]
  5. let filtrati = doppi.filter(x => x > 5); // [6, 8, 10]
  6. let somma = filtrati.reduce((acc, val) => acc + val, 0); // 24
  7. console.log(somma);

Considerazioni

Comprendere la differenza tra metodi mutabili e non mutabili è fondamentale per evitare comportamenti inattesi nel codice.

Mutabili: Metodi come sort(), reverse(), splice(), fill(), copyWithin() modificano l’array originale.
Immutabili: Se serve immutabilità, preferisci slice(), concat(), map(), filter(), reduce() oppure le versioni moderne toSorted(), toReversed(), toSpliced(), with().


I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies