I cicli "for" in JavaScript

In questo video parleremo dei cicli (o loop) disponibili in JavaScript, in particolare del ciclo "for" e delle sue varianti.
Con questi cicli si possono effettuare più iterazioni di uno stesso blocco di codice, cioè possiamo eseguire lo stesso codice diverse volte finchè una specifica condizione rimane vera.
Inoltre i cicli "for" sono molto utili per estrarre i valori degli elementi di un array o valori delle proprietà di un oggetto.
Parleremo: del ciclo for, del ciclo for..in e del nuovo ciclo for..of (introdotto con l'ECMAScript 6).
Ricordo che per "ciclare" un array può essere usato anche il metodo forEach che abbiamo già visto nel video dedicato agli array.
Infine, ci sarà anche un semplice esercizio/sfida da completare, per cercare di fissare i concetti appena imparati (vedremo anche come risolverlo).

Trascrizione: (click per espandere)
salve a tutti in questo video vi parlerò
dei cicli for di javascript dico cicli
for perché in javascript esistono
esistono tre tipi di ciclo for a
differenza di tanti altri linguaggi di
programmazione dove ne esiste uno al
massimo due
andiamo a vedere come si crea un ciclo
for allora si dice ciclo si può dire
anche loop ognuno lo chiamò in maniera
diversa comunque andiamo a vedere allora
si mette la keyword for si aprono le
parentesi tonde si inizializza non
avalla una variabile che normalmente
viene chiamata i che sta per indice l si
assegna un valore che normalmente 0 ma
può essere anche un altro valore
poi si mette il punto virgola poi si
mette e la l'espressione che deve
ritornare vero o falso
e in questo caso si mette i che può
essere minore di diciamo 10 quindi
finché i e minore di 10 esegui questo
questo questo loop poi il punto di
virgole poi si fa incrementare la mia
variabile di normalmente la si fa
incrementare di una unità ma a seconda
delle esigenze si può incrementare
incrementare di un altro di un altro
valore
come si fa a incrementale abbiamo già
visto diversi in modo i metodi allora i
più uno
oppure si può usare concatenazione 1
oppure si può usare questa qui questa
qui è la forma più sintetica da fare
io uso questa poi si aprono le parentesi
graffe e dentro si mette il blocco di
codici ad esempio io voglio andare a
visualizzare il valore e
valore di i facciamo così e metto i
allora cosa vuol dire che finché i è
minore di 10
questo blocco di codice mi viene
eseguito quando i sarà uguale a 10
questo blocco di codice verrà ignorato e
javascript continuerà con il
con il resto del codice sono sottostante
andiamo a vedere
eccolo qui valore di 0 1
come vedete quando arriva a 9 mi viene
eseguito il blocco di codice
l'iterazione successiva ogni esecuzione
del del ciclo si chiama iterazione
l'iterazione successiva i diventa 10 e
quindi javascript dice ok questo ritorno
a falso allora esci dal mio ciclo for
come vedete io posso utilizzare il ciclo
for e per fare cose così il ciclo for
viene molto bene viene usato molto
spesso per estrarre i valori di un aray
perché io posso passare come indice
dell'array degli elementi dell'aray
la variabile i ed estrarre suo valore
andiamo a vedere un esempio ad esempio
allora io ho un array lo chiamo arr e ci
metto
primo poi secondo poi terzo
ecco qui a questo piccolo array qui e lo
voglio voglio estrarre i suoi valori
non voglio stare lì a scrivere per ogni
1 ogni valore perché passare
personalmente metterci dentro l'indice
dentro le parentesi quadra te voglio
eseguire un loop e in maniera che con
una sola riga di codice mi estraggo tutti i
valori automaticamente allora io creo for
allora let i uguale a zero punto e
virgola i minore è minore di della
lunghezza dell'array se ricordate la
proprietà length mi ritorna in numero di
elementi di una rai quindi qui è come se
avessi scritto tre i più più adesso io
voglio andare a vedere solo allora il
valore di arr qui metto al parentesi
quadrate
allora adesso io facendo così vado a
vedere il valore di tutti gli elementi
del mio array allora commento questo è
salvo la pagina e come vedete il valore
del primo elemento è primo secondo terzo
ecco qui semplicissimo quindi se io ho un
array con 100 elementi con queste tre righe
riesco a vedere tutti i suoi elementi si
possono usare cicli for innestati dentro
ad altri cicli for ad esempio un caso
molto comune quando si vuole creare una
tabella html diciamo che io ho la variabile
chiamo tabella e comincia a
scriverci direttamente codice html
dentro a questa stringa table proprietà
border
faccio momento è questa questo attributo
così si vede viene visualizzata la
tabella ciclo for allora facciamo let
la chiamo x stavolta uguale a zero
diciamo che voglio creare una tabella 4
x 5 allora x minore di 4 x più più
allora tabella simbolo di concatenazione
dentro ci vado a mettere dentro se vi
ricordate le tabelle html sono racchiuse
da lei dai tag table però per ogni riga
e ogni riga è racchiusa dal tag tr che
sta per table row quindi poi io
qui ci metto metto dentro l'apertura
del tag tr e il ci metto dentro un altro
ciclo for e stavolta chiamo y
uguale a zero y minore di 5 e y più e se
vi ricordate ogni cella ogni cella della
tabella simbolo di concatenazione era
identificata dal dal tag td quindi io
metto td e qua ci metto cella
qua ci metto concatenazione y
concatenazione chiudo il td eccolo qui
poi fuori dal for chiudo il tag tr e
fuori dall ultimo for chiudo il tag
table eccolo qui se adesso voglio andare
a visualizzare documenti
get element by di display inner html
tabelle
vediamo cosa succede eccola qui ecco qua
in sette righe di codice ho creato la
mia tabella 4 x 5 semplicissimo come
vedete il for esterno mi crea le righe
e il for interno mi crea le celle
adesso ho creato una tabella 4 x 5 ma
immaginate se io dovevo creare una
tabella 50 x 50
basta solo qui mettere 50 e 50 e la mia
tabella è già presto è fatta
semplicissimo ok andiamo adesso dentro
un ciclo for io posso usare le mie due
keyword particolari che si chiamano
brake che abbiamo visto nel video
presidente e continue perché dovrei
usare queste due keyword allora posso
usare brake quando voglio uscire dal dal
mio ciclo prima del suo
completamento ad esempio se io for anzi
vado a prendermi for let i uguale a zero
insomma uguale a zero e minore di 10
i più più
allora diciamo che io voglio uscire dal
mio ciclo for prima per una determinata
per un determinato motivo posso mettere
if i è uguale a 7 brake altrimenti esegue
in questo codice nel momento in cui
javascript trova brake lui esce non
guarda più il codice sottostante
allora iterazione e qui mettiamo il
numero dell'interazione ecco lui come
vedete javascript comincia a fare
letterario ni del mio ciclo for e
quando arriva a 7 if viene eseguito
javascript trova la parola la keyword
brake esce dal mio ciclo e non ci
rientra più e interrompe il ciclo può
essere usato ad esempio se io qui stavo
andando a controllare gli elementi del
mio array ad esempio questo array qui e
dico a il mio voglio vedere se c'è
dentro il mio array l'elemento secondo
come posso fare posso fare in questa
maniera
nel momento in cui io dico ok ho trovato
il mio elemento possa eseguire
questo codice qui ad esempio
semplicissimo allora diciamo che
vogliono ho un array e so che
dentro c'è un elemento oppure non lo so
voglio solo controllare che dentro ci
sia quell'elemento se trovo
quell'elemento eseguì un determinato
tipo di codice e poi esci dal
ciclo perché non mi interessa più
gli altri elementi allora devo vedere
ecco qua come vedete alla seconda
iterazione ho trovato l'elemento secondo
esegue questo blocco di codice e poi
brake perché non mi interessa più
quali altri elementi conte sono
contenuti dentro al mio array
in questa maniera io faccia risparmiare
del tempo a javascript che altrimenti mi
avrebbe ciclato tutto l'array se io
avessi avuto avessi voluto usare la
keyword continue viene
usata quando si vuole far saltare
quell'iterazione al mio ciclo
però voglio che gli altri iterazioni
vengono eseguite lo stesso ad esempio io
adesso faccio così e così mettiamo 6
e qui metto continue scritto continue
ecco qui praticamente io quando
all'iterazione quando la i sarà uguale a
6
vado a dire continua quindi non
eseguimii questa questo blocco di codice
esci dal mio loop però poi rientra con
l'iterazione successiva
andiamo a vedere ecco qui come vedete
l'interazione 6 è stata saltata
allora e nel video dove vi ho fatto
vedere vi ho spiegato gli array e vi ho
fatto vedere
la un nuovo metodo per ciclare un array
che era il metodo for each la differenza
tra usare il metodo for each e il il
ciclo for è che nel ciclo for potete
usare le keyword brake e continue perché
è un ciclo il metodo for each non potete
usare brake continue perché è una
funzione quindi a seconda di quello che
dovete fare voi potete scegliere se
usate se usare
il ciclo for il metodo for each se voi
volete ciclare le proprietà di un
oggetto anziché di un array si usa il
ciclo for in allora intanto vi faccio vi
presento un nuovo operatore che
l'operatore in anzi ad esempio io ho un
oggetto lo chiamo let obj allora che ha
la proprietà a mettiamo un numero 6 si
mette il comma poi ha la proprietà b e
metto una stringa stringa 1 e poi metto
che la proprietà c metto un valore
booleano ecco io ho questo mio oggetto
qui e voglio dire è dentro a questo
oggetto esiste la proprietà b allora
metto b in è una keyword object e
l'operatore in mi ritorna uno booleano
vero falso quindi se la proprietà b
esiste in object in object nel mio
oggetto che object ritorna vero se non
esiste ritorna falso andiamo a vedere
vero se avessi messo dentro così falso
perché io non ho questa proprietà nel
mio oggetto allora il ciclo for in
fatto in questa maniera allora let
prop che amiamo questa proprietà è
questa variabile prop in object il ciclo
for praticamente mi passi e rassegna
tutte le proprietà del mio oggetto
è con esse posso andare a
eseguire determinate operazioni ad
esempio io voglio visualizzare questa
questa stringa allora prop la chiamiamo
prop facciamo così proprietà back
slash prop concatenazione e valore
object se vi ricordate per andare ad
ad estrarre il valore di una
proprietà di un oggetto si può usare il
nome del della variabile oggetto punto
nome della proprietà oppure parentesi
quadrate e nome della proprietà e quindi
in questo caso metto prop
se adesso vado a vedere il suo output
ecco qua proprietà a e valore 6
proprietà b e valore stringa 1 proprietà
c è un valore giu ecco qui semplicissimo
è facile il ciclo for e il ciclo for in
e bene o male sono sempre esistiti in
javascript
poi nel con l'ecmascript 5 è stato
introdotto il metodo for each e per
ciclare gli array col l'ecmascript 6 è
stato introdotto un nuovo ciclo for che
si chiama for of e può essere usato sia
per ciclare array e sia per ciclare
oggetti andiamo a vedere il ciclo for il
ciclo for of
allora se io voglio ciclare un
un array anzi uso l'array di prima
dove l'ho messo eccolo qui no io ho il
mio array qui questo lo commento
e voglio ciclare il suo i suoi elementi
diciamo allora for variabile la chiamo
element l elemento of art
ecco qui molto sintetico console log
elemento andiamo a vedere eccolo qua
elemento primo secondo e terzo
semplicissimo se io voglio oltre ad
estrarre il valore dell'elemento della
array voglio lavorare anche con l'indice
dell'elemento devo fare in questa
maniera qui allora si usa array punto entries
questo metodo
questo metodo mi ritorna un una coppia
che sarebbe indice/valore quindi io
qui posso andare direttamente ad
estrarre il
il mio indice e il mio valore in questa
maniera qui index lo chiamo e element
allora questo è il metodo entries
ritorna una coppia sotto forma di array
indice valore quindi io qui vado ha
scritto ok quindi io vado ad
estrarre da questa coppia che è sotto
forma di array indice valore l'indice e
il valore dell'elemento quindi adesso io
posso concatenare e metto e index
ecco qui come vedete io posso andare ad
estrarre sia all'indice che il valore
dell'elemento la stessa cosa posso fare
per un oggetto allora se adesso io vado
a prendermi il mio oggetto di prima
eccolo qui de commento e vado a usare il
ciclo for per estrarlo allora il ciclo
for of scusate allora let
come prima index element of e in
questo caso devo usare sempre la il
metodo il metodo e entries però
dell'oggetto usando anche l'oggetto
object entries e dentro come
argomento ci passò il nome della mia
variabile ecco qui e adesso io posso
andare a vedere il suo valore nella
stessa maniera
commento questo ecco qua semplicissimo
elemento 6 indice a elemento stringa 1 e
indice b elemento true e indice c quindi
come vedete tutto sta a voi potete usare
qualsiasi tipo il tipo di for allora
per ciclare un array potete usare il
for
potete usare for each a meno che non
dobbiate usare le keyword brake o
continue e potete usare for of per
ciclare un oggetto potete usare for in o
il ciclo for of
sta a voi decidete quella che vi
funziona meglio adesso l'esercizio per
voi allora commento questo e li presento
l'esercizio visualizzare su una pagina
il countdown che vuol dire conto alla
rovescia da dieci a zero quindi qui io
voglio che mi visualizzate il countdown
tipo valore 10 poi la seconda riga
valore 9 valore 8 valore 7 e nella
console conteggio da zero a 10 qui voglio
che mi visualizzate valore zero valore 1
valore 2 valore 3 voglio che fate che
eseguite questi due visualizzazioni di
output usando un solo ciclo quindi con
lo stesso ciclo nel nella mia web page
voglio che mi visualizzate il conto alla
rovescia e con lo stesso ciclo nella
console
dovete visualizzarli il conto da 0 a 10
conto fino a 3 poi mettete in pausa e
poi quando siete pronti e rimettete in
play 1 2 3
eccoci quindi andiamo a vedere come si
può fare questo esercizio allora let
chiamiamo display questa è la stringa
che andrò a visualizzare nella pagina
web
al momento ci mette una stringa vuota
poi uso il ciclo for let i uguale a
zero poi i minore di anzi facciamo
minore uguale di dieci punto virgola
i simbolo di operatore di incrementazione
e allora qui come si può fare allora
display
concatenazioni back tic e dentro qui ci
metto 10 meno
e poi qui ci metto il br simbolo e il
tag html per metterci il valore uguale e
nella seconda riga metto console log
valore i andiamo a vedere quali scusate eh
devo andare a far visualizzare le output
document.getelementbyid e qua metto il
display è uguale con un solo ciclo un ciclo
for nella mia pagina web
il conto alla rovescia e nella mia
console il conto da 0 a 10
con questo è tutto ci sentiamo alla
prossima
File del video: