17 KiB

Raw Blame History

Fondamenti di JavaScript: Array e Cicli

Sketchnote di Tomomi Imura

Quiz Pre-Lezione

Ti sei mai chiesto come i siti web tengano traccia degli articoli nel carrello o mostrino la lista dei tuoi amici? È qui che entrano in gioco gli array e i cicli. Gli array sono come contenitori digitali che contengono più informazioni, mentre i cicli ti permettono di lavorare con tutti quei dati in modo efficiente senza scrivere codice ripetitivo.

Insieme, questi due concetti formano la base per gestire le informazioni nei tuoi programmi. Imparerai a passare dal scrivere manualmente ogni singolo passaggio al creare codice intelligente ed efficiente che può elaborare centinaia o persino migliaia di elementi rapidamente.

Alla fine di questa lezione, capirai come svolgere compiti complessi con i dati utilizzando solo poche righe di codice. Esploriamo questi concetti fondamentali della programmazione.

🎥 Clicca sulle immagini sopra per i video sugli array e i cicli.

Puoi seguire questa lezione su Microsoft Learn!

Array

Pensa agli array come a un archivio digitale: invece di conservare un documento per cassetto, puoi organizzare più elementi correlati in un unico contenitore strutturato. In termini di programmazione, gli array ti permettono di conservare più informazioni in un unico pacchetto organizzato.

Che tu stia costruendo una galleria fotografica, gestendo una lista di cose da fare o tenendo traccia dei punteggi più alti in un gioco, gli array forniscono la base per l'organizzazione dei dati. Vediamo come funzionano.

✅ Gli array sono ovunque! Riesci a pensare a un esempio reale di un array, come un pannello solare?

Creare Array

Creare un array è molto semplice: basta usare le parentesi quadre!

// Empty array - like an empty shopping cart waiting for items
const myArray = [];

Cosa sta succedendo qui? Hai appena creato un contenitore vuoto usando quelle parentesi quadre []. Pensalo come uno scaffale vuoto in una biblioteca: è pronto a contenere qualsiasi libro tu voglia organizzare lì.

Puoi anche riempire il tuo array con valori iniziali fin dall'inizio:

// Your ice cream shop's flavor menu
const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// A user's profile info (mixing different types of data)
const userData = ["John", 25, true, "developer"];

// Test scores for your favorite class
const scores = [95, 87, 92, 78, 85];

Cose interessanti da notare:

Puoi conservare testo, numeri o persino valori vero/falso nello stesso array
Basta separare ogni elemento con una virgola: facile!
Gli array sono perfetti per mantenere insieme informazioni correlate

Indicizzazione degli Array

Ecco qualcosa che potrebbe sembrare insolito all'inizio: gli array numerano i loro elementi a partire da 0, non da 1. Questo sistema di indicizzazione basato su zero ha le sue radici nel funzionamento della memoria del computer: è una convenzione di programmazione che risale ai primi giorni dei linguaggi di programmazione come C. Ogni posizione nell'array ottiene un numero di indirizzo chiamato indice.

Indice	Valore	Descrizione
0	"Cioccolato"	Primo elemento
1	"Fragola"	Secondo elemento
2	"Vaniglia"	Terzo elemento
3	"Pistacchio"	Quarto elemento
4	"Rocky Road"	Quinto elemento

✅ Ti sorprende che gli array inizino dall'indice zero? In alcuni linguaggi di programmazione, gli indici iniziano da 1. C'è una storia interessante su questo, che puoi leggere su Wikipedia.

Accesso agli Elementi dell'Array:

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// Access individual elements using bracket notation
console.log(iceCreamFlavors[0]); // "Chocolate" - first element
console.log(iceCreamFlavors[2]); // "Vanilla" - third element
console.log(iceCreamFlavors[4]); // "Rocky Road" - last element

Analisi di ciò che accade qui:

Usa la notazione con parentesi quadre e il numero dell'indice per accedere agli elementi
Restituisce il valore conservato in quella posizione specifica dell'array
Inizia a contare da 0, rendendo il primo elemento l'indice 0

Modifica degli Elementi dell'Array:

// Change an existing value
iceCreamFlavors[4] = "Butter Pecan";
console.log(iceCreamFlavors[4]); // "Butter Pecan"

// Add a new element at the end
iceCreamFlavors[5] = "Cookie Dough";
console.log(iceCreamFlavors[5]); // "Cookie Dough"

In questo esempio abbiamo:

Modificato l'elemento all'indice 4 da "Rocky Road" a "Butter Pecan"
Aggiunto un nuovo elemento "Cookie Dough" all'indice 5
Espanso automaticamente la lunghezza dell'array aggiungendo oltre i limiti attuali

Lunghezza dell'Array e Metodi Comuni

Gli array hanno proprietà e metodi integrati che rendono il lavoro con i dati molto più semplice.

Trovare la Lunghezza dell'Array:

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
console.log(iceCreamFlavors.length); // 5

// Length updates automatically as array changes
iceCreamFlavors.push("Mint Chip");
console.log(iceCreamFlavors.length); // 6

Punti chiave da ricordare:

Restituisce il numero totale di elementi nell'array
Si aggiorna automaticamente quando gli elementi vengono aggiunti o rimossi
Fornisce un conteggio dinamico utile per i cicli e la validazione

Metodi Essenziali degli Array:

const fruits = ["apple", "banana", "orange"];

// Add elements
fruits.push("grape");           // Adds to end: ["apple", "banana", "orange", "grape"]
fruits.unshift("strawberry");   // Adds to beginning: ["strawberry", "apple", "banana", "orange", "grape"]

// Remove elements
const lastFruit = fruits.pop();        // Removes and returns "grape"
const firstFruit = fruits.shift();     // Removes and returns "strawberry"

// Find elements
const index = fruits.indexOf("banana"); // Returns 1 (position of "banana")
const hasApple = fruits.includes("apple"); // Returns true

Comprendere questi metodi:

Aggiunge elementi con push() (fine) e unshift() (inizio)
Rimuove elementi con pop() (fine) e shift() (inizio)
Trova elementi con indexOf() e verifica l'esistenza con includes()
Restituisce valori utili come elementi rimossi o indici di posizione

✅ Prova tu stesso! Usa la console del tuo browser per creare e manipolare un array di tua creazione.

Cicli

Pensa alla famosa punizione nei romanzi di Charles Dickens, dove gli studenti dovevano scrivere ripetutamente frasi su una lavagna. Immagina se potessi semplicemente dire a qualcuno "scrivi questa frase 100 volte" e farlo automaticamente. È esattamente ciò che i cicli fanno per il tuo codice.

I cicli sono come avere un assistente instancabile che può ripetere compiti senza errori. Che tu debba controllare ogni articolo in un carrello o mostrare tutte le foto in un album, i cicli gestiscono la ripetizione in modo efficiente.

JavaScript offre diversi tipi di cicli tra cui scegliere. Esaminiamoli e capiamo quando usarli.

Ciclo For

Il ciclo for è come impostare un timer: sai esattamente quante volte vuoi che qualcosa accada. È super organizzato e prevedibile, il che lo rende perfetto quando lavori con gli array o devi contare qualcosa.

Struttura del Ciclo For:

Componente	Scopo	Esempio
Inizializzazione	Imposta il punto di partenza	`let i = 0`
Condizione	Quando continuare	`i < 10`
Incremento	Come aggiornare	`i++`

// Counting from 0 to 9
for (let i = 0; i < 10; i++) {
  console.log(`Count: ${i}`);
}

// More practical example: processing scores
const testScores = [85, 92, 78, 96, 88];
for (let i = 0; i < testScores.length; i++) {
  console.log(`Student ${i + 1}: ${testScores[i]}%`);
}

Passo dopo passo, ecco cosa succede:

Inizializza la variabile contatore i a 0 all'inizio
Controlla la condizione i < 10 prima di ogni iterazione
Esegue il blocco di codice quando la condizione è vera
Incrementa i di 1 dopo ogni iterazione con i++
Si ferma quando la condizione diventa falsa (quando i raggiunge 10)

✅ Esegui questo codice nella console del browser. Cosa succede quando apporti piccole modifiche al contatore, alla condizione o all'espressione di iterazione? Riesci a farlo funzionare al contrario, creando un conto alla rovescia?

Ciclo While

Il ciclo while è come dire "continua a fare questo finché...": potresti non sapere esattamente quante volte verrà eseguito, ma sai quando fermarti. È perfetto per cose come chiedere input a un utente finché non ti dà ciò di cui hai bisogno, o cercare tra i dati finché non trovi ciò che stai cercando.

Caratteristiche del Ciclo While:

Continua a eseguire finché la condizione è vera
Richiede la gestione manuale di eventuali variabili contatore
Controlla la condizione prima di ogni iterazione
Rischia cicli infiniti se la condizione non diventa mai falsa

// Basic counting example
let i = 0;
while (i < 10) {
  console.log(`While count: ${i}`);
  i++; // Don't forget to increment!
}

// More practical example: processing user input
let userInput = "";
let attempts = 0;
const maxAttempts = 3;

while (userInput !== "quit" && attempts < maxAttempts) {
  userInput = prompt(`Enter 'quit' to exit (attempt ${attempts + 1}):`);
  attempts++;
}

if (attempts >= maxAttempts) {
  console.log("Maximum attempts reached!");
}

Comprendere questi esempi:

Gestisce la variabile contatore i manualmente all'interno del corpo del ciclo
Incrementa il contatore per prevenire cicli infiniti
Dimostra casi d'uso pratici con input utente e limitazione dei tentativi
Include meccanismi di sicurezza per prevenire esecuzioni infinite

Alternative Moderne ai Cicli

JavaScript offre una sintassi moderna per i cicli che può rendere il tuo codice più leggibile e meno soggetto a errori.

Ciclo For...of (ES6+):

const colors = ["red", "green", "blue", "yellow"];

// Modern approach - cleaner and safer
for (const color of colors) {
  console.log(`Color: ${color}`);
}

// Compare with traditional for loop
for (let i = 0; i < colors.length; i++) {
  console.log(`Color: ${colors[i]}`);
}

Vantaggi principali del for...of:

Elimina la gestione degli indici e gli errori di conteggio
Fornisce accesso diretto agli elementi dell'array
Migliora la leggibilità del codice e riduce la complessità della sintassi

Metodo forEach:

const prices = [9.99, 15.50, 22.75, 8.25];

// Using forEach for functional programming style
prices.forEach((price, index) => {
  console.log(`Item ${index + 1}: $${price.toFixed(2)}`);
});

// forEach with arrow functions for simple operations
prices.forEach(price => console.log(`Price: $${price}`));

Cosa sapere sul forEach:

Esegue una funzione per ogni elemento dell'array
Fornisce sia il valore dell'elemento che l'indice come parametri
Non può essere interrotto anticipatamente (a differenza dei cicli tradizionali)
Restituisce undefined (non crea un nuovo array)

✅ Perché sceglieresti un ciclo for rispetto a un ciclo while? 17.000 utenti hanno avuto la stessa domanda su StackOverflow, e alcune opinioni potrebbero interessarti.

Cicli e Array

Combinare array con cicli crea potenti capacità di elaborazione dei dati. Questa combinazione è fondamentale per molti compiti di programmazione, dalla visualizzazione di liste al calcolo di statistiche.

Elaborazione Tradizionale degli Array:

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// Classic for loop approach
for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(`Flavor ${i + 1}: ${iceCreamFlavors[i]}`);
}

// Modern for...of approach
for (const flavor of iceCreamFlavors) {
  console.log(`Available flavor: ${flavor}`);
}

Capire ogni approccio:

Usa la proprietà della lunghezza dell'array per determinare il limite del ciclo
Accede agli elementi tramite l'indice nei cicli for tradizionali
Fornisce accesso diretto agli elementi nel ciclo for...of
Elabora ogni elemento dell'array esattamente una volta

Esempio Pratico di Elaborazione dei Dati:

const studentGrades = [85, 92, 78, 96, 88, 73, 89];
let total = 0;
let highestGrade = studentGrades[0];
let lowestGrade = studentGrades[0];

// Process all grades with a single loop
for (let i = 0; i < studentGrades.length; i++) {
  const grade = studentGrades[i];
  total += grade;
  
  if (grade > highestGrade) {
    highestGrade = grade;
  }
  
  if (grade < lowestGrade) {
    lowestGrade = grade;
  }
}

const average = total / studentGrades.length;
console.log(`Average: ${average.toFixed(1)}`);
console.log(`Highest: ${highestGrade}`);
console.log(`Lowest: ${lowestGrade}`);

Ecco come funziona questo codice:

Inizializza variabili di tracciamento per somma e valori estremi
Elabora ogni voto con un unico ciclo efficiente
Accumula il totale per il calcolo della media
Traccia i valori più alti e più bassi durante l'iterazione
Calcola le statistiche finali dopo il completamento del ciclo

✅ Prova a iterare su un array di tua creazione nella console del browser.

Sfida dell'Agente GitHub Copilot 🚀

Usa la modalità Agente per completare la seguente sfida:

Descrizione: Crea una funzione completa per l'elaborazione dei dati che combini array e cicli per analizzare un dataset e generare informazioni significative.

Prompt: Crea una funzione chiamata analyzeGrades che prenda un array di oggetti contenenti i voti degli studenti (ognuno con proprietà nome e punteggio) e restituisca un oggetto con statistiche che includano il punteggio più alto, il punteggio più basso, il punteggio medio, il numero di studenti che hanno superato (punteggio >= 70) e un array di nomi degli studenti che hanno ottenuto un punteggio superiore alla media. Usa almeno due tipi diversi di cicli nella tua soluzione.

Scopri di più sulla modalità agente qui.

🚀 Sfida

JavaScript offre diversi metodi moderni per gli array che possono sostituire i cicli tradizionali per compiti specifici. Esplora forEach, for-of, map, filter, e reduce.

La tua sfida: Refattorizza l'esempio dei voti degli studenti usando almeno tre metodi diversi per gli array. Nota quanto il codice diventa più pulito e leggibile con la sintassi moderna di JavaScript.

Quiz Post-Lezione

Quiz post-lezione

Revisione e Studio Autonomo

Gli array in JavaScript hanno molti metodi associati che sono estremamente utili per la manipolazione dei dati. Leggi di più su questi metodi e prova alcuni di essi (come push, pop, slice e splice) su un array di tua creazione.

Compito

Iterare un Array

Disclaimer:
Questo documento è stato tradotto utilizzando il servizio di traduzione AI Co-op Translator. Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche potrebbero contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si consiglia una traduzione professionale umana. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.

17 KiB Raw Blame History