Come usare i loop in JavaScript

Il looping ti consente di scorrere ogni elemento in un array in modo da poter personalizzare ed emettere ciascuno di essi come preferisci. Come con ogni linguaggio di programmazione, i loop sono uno strumento cruciale anche per il rendering di array in JavaScript.

Con l'aiuto di alcuni esempi pratici, approfondiamo i vari modi in cui puoi utilizzare i loop in JavaScript.

Il ciclo incrementale e decrementale per in JavaScript

L'incrementale per loop è la base dell'iterazione in JavaScript.

Presuppone un valore iniziale assegnato a una variabile ed esegue un semplice controllo della lunghezza condizionale. Quindi incrementa o decrementa quel valore usando il ++ o -- operatori.

Ecco come appare la sua sintassi generale:

for (var i = valore iniziale; i < array.lunghezza; io++) {
matrice[i]}

Ora iteriamo attraverso un array usando la sintassi di base sopra:

anArray = [1, 3, 5, 6];
per (lascia i = 0; i < anArray.length; io++) {
console.log (anArray[i])
}
Produzione:
1
3
5
6 

Ora opereremo su ogni elemento nell'array sopra usando JavaScript per ciclo continuo:

anArray = [1, 3, 5, 6];
per (lascia i = 0; i < anArray.length; io++) {
console.log("5", "x", anArray[i], "=", anArray[i] * 5)
}
Produzione:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

Il ciclo itera nell'array in modo incrementale con il ++ operatore, producendo un output ordinato.

Ma usando il negativo (--), è possibile invertire l'output.

Le sintassi sono le stesse, ma la logica è leggermente diversa dal ciclo di incremento precedente.

Ecco come funziona il metodo decrementale:

anArray = [1, 3, 5, 6];
for (let i = anArray.length-1; io > = 0; io--) {
console.log("5", "x", anArray[i], "=", anArray[i]*5)
}
Produzione:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5

La logica dietro il codice sopra non è inverosimile. L'indicizzazione dell'array inizia da zero. quindi chiamando unArray[i] normalmente itera dall'indice zero a tre poiché l'array sopra contiene quattro elementi.

Pertanto, rimuovere uno dalla lunghezza dell'array e impostare la condizione su un valore maggiore o uguale a zero come abbiamo fatto è piuttosto utile, specialmente quando si utilizza l'array come base dell'iterazione.

Mantiene l'indice dell'array a uno in meno della sua lunghezza. La condizione io >= 0 quindi forza l'arresto del conteggio sull'ultimo elemento dell'array.

Imparentato: Metodi di array JavaScript che dovresti padroneggiare oggi

JavaScript per ogni

Anche se non puoi diminuire usando JavaScript per ciascuno, spesso è meno prolisso del raw per ciclo continuo. Funziona selezionando un elemento dopo l'altro senza memorizzare il precedente.

Ecco la sintassi generale di JavaScript per ciascuno:

array.forEach (elemento => {
azione
})

Dai un'occhiata a come funziona in pratica:

let anArray = [1, 3, 5, 6];
anArray.forEach (x => {
console.log (x)
});
Produzione:
1
3
5
6 

Ora usa questo per eseguire una semplice operazione matematica su ciascun elemento come hai fatto nella sezione precedente:

let anArray = [1, 3, 5, 6];
anArray.forEach (x => {
console.log("5", "x", x, "=", x * 5)
});
Produzione:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

Come utilizzare il ciclo for...in di JavaScript

Il per...in loop in JavaScript scorre un array e restituisce il suo indice.

Lo troverai facile da usare per...in se conosci Il ciclo for di Python in quanto sono simili per quanto riguarda semplicità e logica.

Dai un'occhiata alla sua sintassi generale:

for (lascia elemento nell'array){
azione 
}

Così il per...in loop assegna ogni elemento in un array alla variabile (elemento) dichiarata tra parentesi.

Pertanto, la registrazione dell'elemento direttamente all'interno del ciclo restituisce un indice dell'array e non gli elementi stessi:

let anArray = [1, 3, 5, 6];
for (lascia i in un Array){
console.log (i)
}
Produzione:
0
1
2
3 

Per stampare ogni elemento invece:

let anArray = [1, 3, 5, 6];
for (lascia i in un Array){
console.log (anArray[i])
}
Produzione:
1
3
5
6 

Come hai fatto quando hai usato il ciclo decrementale, è anche facile invertire l'output usando per...in:

let anArray = [1, 3, 5, 6];
// Rimuovere uno dalla lunghezza dell'array e assegnarlo a una variabile:
let v = anArray.length - 1; 
// Usa la variabile sopra come base di indice durante l'iterazione dell'array:
for (lascia i in un Array){
console.log (anArray[v])
v-=1;
}
Produzione:
6
5
3
1 

Il codice sopra è logicamente simile a quello che hai fatto durante l'utilizzo del ciclo decrementale. È più leggibile e delineato in modo esplicito, però.

JavaScript per... di Loop

Il per...di il ciclo è simile a per...in ciclo continuo.

Tuttavia, a differenza di per...in, non scorre l'indice dell'array ma gli elementi stessi.

La sua sintassi generale è simile a questa:

for (lascia i di array) {
azione 
}

Usiamo questo metodo di ciclo per scorrere un array in modo incrementale per vedere come funziona:

let anArray = [1, 3, 5, 6];
for (lascia i di unArray) {
console.log (i)
}
Produzione:
1
3
5
6 

È inoltre possibile utilizzare questo metodo per scorrere l'array e invertire l'output. È simile a come lo fai usando per...in:

let anArray = [1, 3, 5, 6];
let v = anArray.length - 1;
for (let x di unArray) {
console.log (anArray[v])
v-=1;
}
Produzione:
6
5
3
1

Per operare all'interno del ciclo:

let anArray = [1, 3, 5, 6];
let v = anArray.length - 1;
for (let x di unArray) {
console.log("5", "x", anArray[v], "=", anArray[v] * 5)
v-=1;
}
Produzione:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5 

Il ciclo While

Il mentre Il ciclo viene eseguito continuamente finché una condizione specificata rimane vera. È spesso usato come un ciclo infinito.

Ad esempio, poiché zero è sempre inferiore a dieci, il codice seguente viene eseguito continuamente:

sia io = 0;
mentre (i < 10) {
console.log (4)
}

Il codice sopra registra "4" all'infinito.

Eseguiamo un'iterazione attraverso un array usando il mentre ciclo continuo:

sia io = 0;
while (i < anArray.length) {
console.log (anArray[i])
io +=1
}
Produzione:
1
3
5
6 

JavaScript fa... durante il ciclo

Il fare mentre loop accetta ed esegue un insieme di azioni esplicitamente all'interno di a fare sintassi. Quindi indica la condizione per questa azione all'interno del mentre ciclo continuo.

Ecco come appare:

fare{
Azioni
}
mentre (
condizione
)

Ora iteriamo attraverso un array usando questo metodo di loop:

fare{
console.log (anArray[i])
io +=1
}
mentre (
i < anArray.length
)
Produzione:
1
3
5
6 

Familiarizzare con i cicli JavaScript

Sebbene qui abbiamo evidenziato i vari metodi di ciclo JavaScript, padroneggiare le basi dell'iterazione nella programmazione ti consente di usarli in modo flessibile e sicuro nei tuoi programmi. Detto questo, la maggior parte di questi cicli JavaScript funziona allo stesso modo, con solo poche differenze nella struttura generale e nella sintassi.

I loop, tuttavia, sono la base della maggior parte del rendering di array lato client. Quindi sentiti libero di modificare questi metodi di loop come preferisci. Usarli con array più complessi, ad esempio, ti dà una migliore comprensione dei loop JavaScript.

Come utilizzare l'istruzione if-else JavaScript

L'istruzione if-else è il primo passo verso la logica di programmazione nelle tue applicazioni.

Leggi Avanti

Circa l'autore