7.4 KiB
Fondamenti di JavaScript: Array e Cicli
Sketchnote di Tomomi Imura
Quiz Pre-Lezione
Questa lezione copre i fondamenti di JavaScript, il linguaggio che fornisce interattività sul web. In questa lezione imparerai gli array e i cicli, che vengono utilizzati per manipolare i dati.
🎥 Clicca sulle immagini sopra per i video sugli array e i cicli.
Puoi seguire questa lezione su Microsoft Learn!
Array
Lavorare con i dati è un compito comune in qualsiasi linguaggio, ed è molto più semplice quando i dati sono organizzati in un formato strutturato, come gli array. Con gli array, i dati vengono memorizzati in una struttura simile a una lista. Un grande vantaggio degli array è che puoi memorizzare diversi tipi di dati in un unico array.
✅ Gli array sono ovunque intorno a noi! Riesci a pensare a un esempio reale di un array, come un array di pannelli solari?
La sintassi per un array è una coppia di parentesi quadre.
let myArray = [];
Questo è un array vuoto, ma gli array possono essere dichiarati già popolati con dati. I valori multipli in un array sono separati da una virgola.
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
I valori dell'array sono assegnati a un valore unico chiamato indice, un numero intero che viene assegnato in base alla sua distanza dall'inizio dell'array. Nell'esempio sopra, il valore stringa "Chocolate" ha un indice di 0, e l'indice di "Rocky Road" è 4. Usa l'indice con le parentesi quadre per recuperare, modificare o inserire valori nell'array.
✅ 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.
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors[2]; //"Vanilla"
Puoi sfruttare l'indice per modificare un valore, come questo:
iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
E puoi inserire un nuovo valore in un determinato indice come questo:
iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
✅ Un modo più comune per aggiungere valori a un array è utilizzare operatori come array.push()
Per scoprire quanti elementi ci sono in un array, usa la proprietà length.
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors.length; //5
✅ Prova tu stesso! Usa la console del tuo browser per creare e manipolare un array di tua creazione.
Cicli
I cicli ci permettono di eseguire compiti ripetitivi o iterativi, e possono far risparmiare molto tempo e codice. Ogni iterazione può variare nelle variabili, nei valori e nelle condizioni. Esistono diversi tipi di cicli in JavaScript, e tutti hanno piccole differenze, ma essenzialmente fanno la stessa cosa: iterano sui dati.
Ciclo For
Il ciclo for richiede 3 parti per iterare:
counterUna variabile che viene tipicamente inizializzata con un numero che conta il numero di iterazioniconditionEspressione che utilizza operatori di confronto per far terminare il ciclo quando èfalseiteration-expressionViene eseguita alla fine di ogni iterazione, tipicamente utilizzata per modificare il valore del contatore
// Counting up to 10
for (let i = 0; i < 10; i++) {
console.log(i);
}
✅ 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
A differenza della sintassi del ciclo for, i cicli while richiedono solo una condizione che interromperà il ciclo quando la condizione diventa false. Le condizioni nei cicli di solito si basano su altri valori come i contatori, e devono essere gestite durante il ciclo. I valori iniziali per i contatori devono essere creati al di fuori del ciclo, e qualsiasi espressione per soddisfare una condizione, inclusa la modifica del contatore, deve essere mantenuta all'interno del ciclo.
//Counting up to 10
let i = 0;
while (i < 10) {
console.log(i);
i++;
}
✅ Perché sceglieresti un ciclo for rispetto a un ciclo while? 17.000 utenti avevano la stessa domanda su StackOverflow, e alcune delle opinioni potrebbero interessarti.
Cicli e Array
Gli array vengono spesso utilizzati con i cicli perché la maggior parte delle condizioni richiede la lunghezza dell'array per interrompere il ciclo, e l'indice può anche essere il valore del contatore.
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
for (let i = 0; i < iceCreamFlavors.length; i++) {
console.log(iceCreamFlavors[i]);
} //Ends when all flavors are printed
✅ Prova a iterare su un array di tua creazione nella console del browser.
🚀 Sfida
Esistono altri modi per iterare sugli array oltre ai cicli for e while. Ci sono forEach, for-of, e map. Riscrivi il tuo ciclo sull'array utilizzando una di queste tecniche.
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 questi metodi e prova alcuni di essi (come push, pop, slice e splice) su un array di tua creazione.
Compito
Disclaimer:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica 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 eseguita da un traduttore umano. Non siamo responsabili per eventuali fraintendimenti o interpretazioni errate derivanti dall'uso di questa traduzione.