Lezione 7 – JavaScript

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

🎯 Prova Subito gli Array!

Clicca sui pulsanti per vedere gli array in azione!



🎨 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!

🎮 Crea il Tuo Array Personalizzato

Crea un array con i tuoi elementi!

🔍 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"]

🔍 Prova Accesso Elementi

➕ 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]

➕ Aggiungi Elementi Interattivamente

Prova ad aggiungere elementi a un array!

📊 Confronto Metodi di Aggiunta

Metodo Dove Aggiunge Restituisce Performance
push() Fine Nuova lunghezza ⭐⭐⭐ Veloce
unshift() Inizio Nuova lunghezza ⭐ Lento (sposta tutto)

➖ 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]

➖ Rimuovi Elementi Interattivamente

Prova a rimuovere elementi da un array!

🗑️ Confronto Metodi di Rimozione

Metodo Cosa Rimuove Restituisce Quando Usare
pop() Ultimo elemento Elemento rimosso Stack (LIFO)
shift() Primo elemento Elemento rimosso Queue (FIFO)

🔎 Metodi di Ricerca

Metodo Descrizione Ritorna Esempio
indexOf() Trova prima occorrenza Indice o -1 [1,2,3].indexOf(2) → 1
lastIndexOf() Trova ultima occorrenza Indice o -1 [1,2,3,2].lastIndexOf(2) → 3
includes() Verifica presenza true/false [1,2,3].includes(2) → true
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

🔍 Ricerca Interattiva

Cerca un elemento in un array!

🔄 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!

🔄 Trasformazioni Interattive

Prova le trasformazioni su un array!

⚠️ 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

🔁 Prova l’Iterazione

💪 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

📝 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

📝 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

🎯 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()

Lezione 5 del Corso JavaScript Completo

Torna in alto