Hur man använder loopar i JavaScript

Looping låter dig iterera genom varje objekt i en array så att du kan anpassa och mata ut var och en av dem som du vill. Som med alla programmeringsspråk är loopar ett viktigt verktyg för att återge arrays i JavaScript också.

Med hjälp av några praktiska exempel, låt oss dyka djupare in på de olika sätten du kan använda loopar i JavaScript.

The Incremental and Decremental for Loop i JavaScript

Det inkrementella för loop är grunden för iteration i JavaScript.

Den antar ett initialvärde som tilldelas en variabel och kör en enkel villkorlig längdkontroll. Sedan ökar eller minskar det värdet med hjälp av ++ eller -- operatörer.

Så här ser dess allmänna syntax ut:

för (var i = initialvärde; i array [i]}

Låt oss nu iterera genom en array med ovanstående syntax:

anArray = [1, 3, 5, 6];
för (låt i = 0; i console.log (anArray [i])
}
Produktion:
1
3
5
6 

Nu kommer vi att arbeta med varje objekt i ovanstående array med hjälp av JavaScript för slinga:

anArray = [1, 3, 5, 6];
för (låt i = 0; i console.log ("5", "x", anArray [i], "=", anArray [i] * 5)





instagram viewer


}
Produktion:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

Slingan itererar genom matrisen stegvis med ++ operatör, som producerar en beställd utmatning.

Men med det negativa (--) -operatören kan du vända utmatningen.

Syntaxerna är desamma, men logiken skiljer sig lite från den ovanstående inkrementeringsslingan.

Så här fungerar den dekrementella metoden:

anArray = [1, 3, 5, 6];
för (låt i = anArray.length-1; i> = 0; jag--) {
console.log ("5", "x", anArray [i], "=", anArray [i]*5)
}
Produktion:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5

Logiken bakom koden ovan är inte långsökt. Arrayindexering börjar från noll. Så ringer anArray [i] normalt upprepas från index noll till tre eftersom ovanstående matris innehåller fyra objekt.

Således är det ganska praktiskt att ta bort en från arraylängden och ställa villkoret till större eller lika med noll som vi gjorde - särskilt när du använder arrayen som grund för din iteration.

Det håller arrayindexet på en mindre än dess längd. Skicket i> = 0 tvingar sedan räkningen att stanna på det sista objektet i matrisen.

Relaterad: JavaScript Array -metoder du bör behärska idag

JavaScript för varje

Även om du inte kan minska med JavaScript för varje, det är ofta mindre ordagrant än det råa för slinga. Det fungerar genom att välja det ena efter det andra utan att memorera det föregående.

Här är den allmänna syntaxen för JavaScript för varje:

array.forEach (element => {
handling
})

Ta en titt på hur det fungerar i praktiken:

låt anArray = [1, 3, 5, 6];
anArray.forEach (x => {
console.log (x)
});
Produktion:
1
3
5
6 

Använd nu detta för att köra en enkel matematisk operation på varje objekt som du gjorde i föregående avsnitt:

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

Hur man använder för... i loop av JavaScript

De för... in loop i JavaScript iterates genom en array och returnerar dess index.

Du hittar den lätt att använda för... in om du känner till Python är för loop eftersom de är lika när det gäller enkelhet och logik.

Ta en titt på dess allmänna syntax:

för (låt element i array) {
handling 
}

Så det för... in loop tilldelar varje objekt i en array till variabeln (element) som deklareras inom parentes.

Således returnerar elementet direkt i slingan ett arrayindex och inte själva artiklarna:

låt anArray = [1, 3, 5, 6];
för (låt mig i en matris) {
console.log (i)
}
Produktion:
0
1
2
3 

För att mata ut varje objekt istället:

låt anArray = [1, 3, 5, 6];
för (låt mig i en matris) {
console.log (anArray [i])
}
Produktion:
1
3
5
6 

Precis som du gjorde när du använde den dekrementella slingan är det också enkelt att vända utmatningen med för... in:

låt anArray = [1, 3, 5, 6];
// Ta bort en från matrisens längd och tilldela denna till en variabel:
låt v = anArray.length - 1; 
// Använd ovanstående variabel som indexunderlag medan du itererar i matrisen:
för (låt mig i en matris) {
console.log (anArray [v])
v -= 1;
}
Produktion:
6
5
3
1 

Ovanstående kod är logiskt lik den du gjorde när du använde den dekrementella slingan. Det är dock mer läsbart och tydligt beskrivet.

JavaScript för... av Loop

De för av slinga liknar för... in slinga.

Men till skillnad från för... in, det upprepas inte genom arrayindexet utan själva objekten.

Dess allmänna syntax ser ut så här:

för (låt mig av array) {
handling 
}

Låt oss använda denna looping -metod för att iterera genom en array stegvis för att se hur det fungerar:

låt anArray = [1, 3, 5, 6];
för (låt mig av anArray) {
console.log (i)
}
Produktion:
1
3
5
6 

Du kan också använda den här metoden för att iterera ner matrisen och vända utmatningen. Det liknar hur du gör det med för... in:

låt anArray = [1, 3, 5, 6];
låt v = anArray.length - 1;
för (låt x av en matris) {
console.log (anArray [v])
v -= 1;
}
Produktion:
6
5
3
1

Så här fungerar du inom slingan:

låt anArray = [1, 3, 5, 6];
låt v = anArray.length - 1;
för (låt x av en matris) {
console.log ("5", "x", anArray [v], "=", anArray [v] * 5)
v -= 1;
}
Produktion:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5 

The While Loop

De medan loop löper kontinuerligt så länge ett specificerat villkor förblir sant. Det används ofta som en oändlig slinga.

Till exempel, eftersom noll alltid är mindre än tio, körs koden nedan kontinuerligt:

låt i = 0;
medan (i <10) {
console.log (4)
}

Ovanstående kod loggar "4" oändligt.

Låt oss iterera genom en array med medan slinga:

låt i = 0;
medan (i console.log (anArray [i])
i += 1
}
Produktion:
1
3
5
6 

JavaScript gör... medan Loop

De göra medan loop accepterar och utför en uppsättning åtgärder uttryckligen i en do syntax. Det anger sedan villkoret för denna åtgärd inuti medan slinga.

Så här ser det ut:

do{
handlingar
}
medan (
konsition
)

Låt oss nu iterera genom en array med denna looping -metod:

do{
console.log (anArray [i])
i += 1
}
medan (
i )
Produktion:
1
3
5
6 

Bekanta dig med JavaScript -loopar

Även om vi har markerat de olika JavaScript -loopingsmetoderna här, kan du använda grunderna för iteration i programmering så att du kan använda dem flexibelt och säkert i dina program. Som sagt, de flesta av dessa JavaScript -loopar fungerar på samma sätt, med bara några få skillnader i deras allmänna kontur och syntaxer.

Loops är dock grunden för de flesta klient-sida-array-renderingar. Så känn dig fri att justera dessa looping -metoder som du vill. Att använda dem med mer komplexa matriser, till exempel, ger dig en bättre förståelse av JavaScript -loopar.

Så här använder du JavaScript if-else-uttalandet

If-else-uttalandet är ditt första steg mot att programmera logik i dina applikationer.

Läs Nästa

Om författaren