Array e metodi fondamentali

Scopri come lavorare con gli array, i metodi principali e le operazioni più comuni.

Cos'è un Array?

Un array è una struttura dati che permette di memorizzare collezioni ordinate di elementi. Invece di avere 10 variabili separate per 10 numeri, puoi usare un singolo array!

Array nella Vita Reale

Pensa a un array come a una lista della spesa: hai una lista con vari elementi (pane, latte, uova), ciascuno in una posizione specifica. Puoi aggiungere elementi, rimuoverli, cercare se un elemento è presente, e molto altro!

✨ Caratteristiche Array JavaScript

• ✅ Dinamici: La dimensione può cambiare
• ✅ Eterogenei: Possono contenere tipi diversi
• ✅ Indicizzati: Accesso per posizione (da 0)
• ✅ Ordinati: Gli elementi mantengono l'ordine

Creazione Array

1. Array Literal (Consigliato)

Il modo più comune e leggibile per creare array.

Creazione con []

// Array di numeri
let numeri = [1, 2, 3, 4, 5];

// Array di stringhe
let frutti = ["mela", "banana", "arancia"];

// Array vuoto
let vuoto = [];

// Array di tipi misti
let misto = [1, "due", true, null];

console.log(numeri);  // [1, 2, 3, 4, 5]
console.log(frutti);  // ["mela", "banana", "arancia"]

2. Costruttore Array()

Meno usato, utile in casi specifici.

Creazione con new Array()

// Array con elementi
let numeri = new Array(1, 2, 3);  // [1, 2, 3]

// Array di lunghezza specifica (vuoto)
let vuoto = new Array(5);  // 5 slot vuoti

// ⚠️ Attenzione: un solo numero crea array vuoto!
let confuso = new Array(5);     // 5 slot vuoti
let chiaro = [5];               // [5] (array con elemento 5)

// Meglio usare [] per chiarezza!

Accesso agli Elementi

Indici degli Array

Gli array JavaScript sono zero-indexed: il primo elemento è all'indice 0, il secondo all'indice 1, e così via.

Accesso per Indice

let frutti = ["mela", "banana", "arancia", "pera", "kiwi"];

// Accesso per indice positivo
console.log(frutti[0]);  // "mela" (primo elemento)
console.log(frutti[1]);  // "banana"
console.log(frutti[2]);  // "arancia"

// Ultimo elemento
let ultimo = frutti[frutti.length - 1];  // "kiwi"

// Penultimo
let penultimo = frutti[frutti.length - 2];  // "pera"

// Indice non esistente
console.log(frutti[10]);  // undefined

Proprietà length

let numeri = [10, 20, 30, 40, 50];

// Lunghezza array
console.log(numeri.length);  // 5

// Modificare length
numeri.length = 3;
console.log(numeri);  // [10, 20, 30] (troncato!)

// Svuotare array
numeri.length = 0;
console.log(numeri);  // [] (array vuoto)

⚠️ Array Sono Mutabili!

Puoi modificare elementi esistenti assegnando un nuovo valore.

let frutti = ["mela", "banana", "arancia"];

// Modifica elemento
frutti[1] = "fragola";
console.log(frutti);  // ["mela", "fragola", "arancia"]

Aggiungere Elementi

1. push() - Aggiunge alla Fine

Metodo più usato. Modifica l'array originale e restituisce la nuova lunghezza.

Metodo push()

let numeri = [1, 2, 3];

// Aggiungi un elemento
numeri.push(4);
console.log(numeri);  // [1, 2, 3, 4]

// Aggiungi più elementi
numeri.push(5, 6, 7);
console.log(numeri);  // [1, 2, 3, 4, 5, 6, 7]

// Restituisce la nuova lunghezza
let lunghezza = numeri.push(8);
console.log(lunghezza);  // 8

2. unshift() - Aggiunge all'Inizio

Inserisce all'inizio spostando tutti gli altri elementi.

Metodo unshift()

let numeri = [3, 4, 5];

// Aggiungi all'inizio
numeri.unshift(2);
console.log(numeri);  // [2, 3, 4, 5]

// Aggiungi più elementi
numeri.unshift(0, 1);
console.log(numeri);  // [0, 1, 2, 3, 4, 5]

📊 Confronto Metodi di Aggiunta

Rimuovere Elementi

1. pop() - Rimuove dalla Fine

Rimuove e restituisce l'ultimo elemento.

Metodo pop()

let numeri = [1, 2, 3, 4, 5];

// Rimuovi ultimo elemento
let ultimo = numeri.pop();
console.log(ultimo);  // 5
console.log(numeri);  // [1, 2, 3, 4]

// Rimuovi ancora
numeri.pop();
console.log(numeri);  // [1, 2, 3]

2. shift() - Rimuove dall'Inizio

Rimuove e restituisce il primo elemento.

Metodo shift()

let numeri = [1, 2, 3, 4, 5];

// Rimuovi primo elemento
let primo = numeri.shift();
console.log(primo);   // 1
console.log(numeri);  // [2, 3, 4, 5]

// Rimuovi ancora
numeri.shift();
console.log(numeri);  // [3, 4, 5]

🗑️ Confronto Metodi di Rimozione

Metodi di Ricerca

Esempi Metodi di Ricerca

let numeri = [10, 20, 30, 20, 40];

// indexOf - prima occorrenza
console.log(numeri.indexOf(20));      // 1
console.log(numeri.indexOf(99));      // -1 (non trovato)

// lastIndexOf - ultima occorrenza
console.log(numeri.lastIndexOf(20));  // 3

// includes - verifica presenza
console.log(numeri.includes(30));     // true
console.log(numeri.includes(99));     // false

Metodi di Trasformazione

slice() - Estrae Porzione (Non Modifica Originale)

let numeri = [1, 2, 3, 4, 5];

// slice(inizio, fine) - fine esclusa
console.log(numeri.slice(1, 3));   // [2, 3]
console.log(numeri.slice(2));      // [3, 4, 5] (da 2 fino alla fine)
console.log(numeri.slice(-2));     // [4, 5] (ultimi 2)

// Array originale invariato
console.log(numeri);  // [1, 2, 3, 4, 5]

concat() - Unisce Array (Non Modifica Originale)

let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = [5, 6];

// Unisci array
let unito = arr1.concat(arr2);
console.log(unito);  // [1, 2, 3, 4]

// Unisci più array
let tuttiUniti = arr1.concat(arr2, arr3);
console.log(tuttiUniti);  // [1, 2, 3, 4, 5, 6]

join() - Converte in Stringa

let frutti = ["mela", "banana", "arancia"];

// join() con separatore
console.log(frutti.join());       // "mela,banana,arancia" (default: virgola)
console.log(frutti.join(" "));    // "mela banana arancia"
console.log(frutti.join(" - "));  // "mela - banana - arancia"
console.log(frutti.join(""));     // "melabananaarancia"

reverse() - Inverte Ordine (Modifica Originale!)

let numeri = [1, 2, 3, 4, 5];

// Inverte l'array
numeri.reverse();
console.log(numeri);  // [5, 4, 3, 2, 1]

// ⚠️ Modifica l'array originale!

⚠️ Metodi che Modificano l'Array Originale

Modificano:

• push(), pop()
• shift(), unshift()
• reverse()

Non Modificano:

• slice()
• concat()
• join()

Iterare sugli Array

Loop for Classico

let frutti = ["mela", "banana", "arancia"];

// for classico
for (let i = 0; i < frutti.length; i++) {
    console.log(i + ": " + frutti[i]);
}
// 0: mela
// 1: banana
// 2: arancia

// Stampa al contrario
for (let i = frutti.length - 1; i >= 0; i--) {
    console.log(frutti[i]);
}
// arancia
// banana
// mela

Esercizi Pratici Interattivi

Esercizio 1: Lista della Spesa

Obiettivo: Gestisci una lista della spesa

Funzionalità:

• Aggiungi prodotti alla lista
• Visualizza tutti i prodotti
• Rimuovi ultimo prodotto
• Cerca se un prodotto esiste

let listaSpesa = ["pane", "latte", "uova"];
let continua = true;

while (continua) {
    let menu = "🛒 LISTA DELLA SPESA\n\n";
    menu += "1. Aggiungi prodotto\n";
    menu += "2. Mostra lista\n";
    menu += "3. Rimuovi ultimo\n";
    menu += "4. Cerca prodotto\n";
    menu += "5. Esci\n\n";
    menu += "Scegli:";

    let scelta = prompt(menu);

    if (scelta === "1") {
        let prodotto = prompt("Inserisci prodotto:");
        if (prodotto) {
            listaSpesa.push(prodotto.toLowerCase());
            alert("✅ " + prodotto + " aggiunto!");
        }
    } else if (scelta === "2") {
        if (listaSpesa.length === 0) {
            alert("📋 Lista vuota!");
        } else {
            let testo = "📋 LISTA:\n\n";
            for (let i = 0; i < listaSpesa.length; i++) {
                testo += (i + 1) + ". " + listaSpesa[i] + "\n";
            }
            alert(testo);
        }
    } else if (scelta === "3") {
        if (listaSpesa.length === 0) {
            alert("❌ Lista vuota!");
        } else {
            let rimosso = listaSpesa.pop();
            alert("✅ " + rimosso + " rimosso!");
        }
    } else if (scelta === "4") {
        let cerca = prompt("Cerca:");
        if (listaSpesa.includes(cerca.toLowerCase())) {
            alert("✅ Trovato!");
        } else {
            alert("❌ Non trovato!");
        }
    } else {
        continua = false;
    }
}

Esercizio 2: Trova Numeri Pari

Obiettivo: Trova tutti i numeri pari in un array

Compiti:

• Chiedi numeri all'utente
• Trova i numeri pari
• Mostra risultati

// Chiedi numeri
let input = prompt("Inserisci numeri separati da virgola:");
let numeriStr = input.split(",");

// Converti in numeri
let numeri = [];
for (let i = 0; i < numeriStr.length; i++) {
    let num = parseInt(numeriStr[i]);
    if (!isNaN(num)) {
        numeri.push(num);
    }
}

// Trova pari
let pari = [];
for (let i = 0; i < numeri.length; i++) {
    if (numeri[i] % 2 === 0) {
        pari.push(numeri[i]);
    }
}

// Mostra risultati
let risultato = "🔢 RISULTATI\n\n";
risultato += "Numeri: " + numeri.join(", ") + "\n\n";
risultato += "Pari: " + pari.join(", ") + "\n";
risultato += "Totale pari: " + pari.length;

alert(risultato);

Esercizio 3: Inverti Array

Obiettivo: Inverti l'ordine di un array SENZA usare reverse()

Compiti:

• Chiedi elementi all'utente
• Invertili manualmente con un loop
• Mostra array originale e invertito

// Chiedi elementi
let input = prompt("Inserisci elementi separati da virgola:");
let originale = input.split(",");

// Pulisci spazi
for (let i = 0; i < originale.length; i++) {
    originale[i] = originale[i].trim();
}

// Inverti MANUALMENTE
let invertito = [];
for (let i = originale.length - 1; i >= 0; i--) {
    invertito.push(originale[i]);
}

// Mostra risultati
let risultato = "🔄 INVERSIONE\n\n";
risultato += "Originale:\n" + originale.join(", ") + "\n\n";
risultato += "Invertito:\n" + invertito.join(", ") + "\n\n";
risultato += "💡 Fatto SENZA reverse()!";

alert(risultato);

🎯 Riepilogo Lezione

Creazione:

• [] literal
• new Array()
• .length proprietà

Aggiunta/Rimozione:

• push() / pop()
• unshift() / shift()
• [indice] = valore

Ricerca:

• indexOf()
• lastIndexOf()
• includes()

Trasformazione:

• slice()
• concat()
• join()
• reverse()