Loops gebruiken in JavaScript

Met looping kunt u elk item in een array doorlopen, zodat u elk item naar wens kunt aanpassen en uitvoeren. Zoals bij elke programmeertaal, zijn loops ook een cruciaal hulpmiddel voor het renderen van arrays in JavaScript.

Laten we met behulp van enkele praktische voorbeelden dieper ingaan op de verschillende manieren waarop u loops in JavaScript kunt gebruiken.

De incrementele en decrementele voor lus in JavaScript

de incrementele voor loop is de basis van iteratie in JavaScript.

Het gaat uit van een initiële waarde die is toegewezen aan een variabele en voert een eenvoudige voorwaardelijke lengtecontrole uit. Vervolgens verhoogt of verlaagt het die waarde met behulp van de ++ of -- exploitanten.

Zo ziet de algemene syntaxis eruit:

voor (var i = beginwaarde; ik < matrix.lengte; ik++) {
reeks[i]}

Laten we nu een array doorlopen met behulp van de bovenstaande basissyntaxis:

anArray = [1, 3, 5, 6];
voor (laat ik = 0; i < anArray.length; ik++) {
console.log (anArray[i])
}
Uitgang:
1
3
5
6 

Nu zullen we op elk item in de bovenstaande array werken met behulp van JavaScript voor lus:

anArray = [1, 3, 5, 6];
voor (laat ik = 0; i < anArray.length; ik++) {
console.log("5", "x", anArray[i], "=", anArray[i] * 5)
}
Uitgang:
5x1 = 5
5x3 = 15
5 x 5 = 25
5x6 = 30 

De lus itereert stapsgewijs door de array met de ++ operator, die een geordende output produceert.

Maar met behulp van de negatieve (--) operator, kunt u de uitvoer omkeren.

De syntaxis is hetzelfde, maar de logica is een beetje anders dan de bovenstaande oplopende lus.

Zo werkt de decrementele methode:

anArray = [1, 3, 5, 6];
for (laat i = anArray.length-1; ik > = 0; l--) {
console.log("5", "x", anArray[i], "=", anArray[i]*5)
}
Uitgang:
5x6 = 30
5 x 5 = 25
5x3 = 15
5x1 = 5

De logica achter de bovenstaande code is niet vergezocht. Matrix-indexering begint vanaf nul. Dus bellen anArray[i] itereert normaal gesproken van index nul naar drie, aangezien de bovenstaande array vier items bevat.

Dus het verwijderen van een uit de arraylengte en het instellen van de voorwaarde op groter of gelijk aan nul, zoals we deden, is best handig, vooral wanneer je de array als basis van je iteratie gebruikt.

Het houdt de array-index op één minder dan zijn lengte. De conditie ik >= 0 dwingt vervolgens de telling te stoppen op het laatste item in de array.

Verwant: JavaScript-matrixmethoden die u vandaag moet beheersen

JavaScript voor elk

Hoewel je niet kunt verlagen met JavaScript's voor elk, het is vaak minder uitgebreid dan het ruwe voor lus. Het werkt door het ene item na het andere te kiezen zonder het vorige te onthouden.

Hier is de algemene syntaxis van JavaScript voor elk:

array.forEach (element => {
actie
})

Bekijk hoe het in de praktijk werkt:

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

Gebruik dit nu om een ​​eenvoudige wiskundige bewerking uit te voeren op elk item zoals u deed in de vorige sectie:

laat anArray = [1, 3, 5, 6];
anArray.forEach (x => {
console.log("5", "x", x, "=", x * 5)
});
Uitgang:
5x1 = 5
5x3 = 15
5 x 5 = 25
5x6 = 30 

Hoe gebruik je de for...in lus van JavaScript

De voor in lus in JavaScript itereert door een array en retourneert de index.

Je zult merken dat het gemakkelijk te gebruiken is voor in als je bekend bent met Python's voor lus omdat ze vergelijkbaar zijn met betrekking tot eenvoud en logica.

Bekijk de algemene syntaxis:

for (laat element in array){
actie 
}

Dus de voor in loop wijst elk item in een array toe aan de variabele (element) die tussen haakjes is gedeclareerd.

Door het element rechtstreeks in de lus te loggen, wordt dus een array-index geretourneerd en niet de items zelf:

laat anArray = [1, 3, 5, 6];
for (laat ik in een array){
console.log (i)
}
Uitgang:
0
1
2
3 

Om elk item in plaats daarvan uit te voeren:

laat anArray = [1, 3, 5, 6];
for (laat ik in een array){
console.log (anArray[i])
}
Uitgang:
1
3
5
6 

Net als bij het gebruik van de decrementele lus, is het ook gemakkelijk om de uitvoer om te keren met voor in:

laat anArray = [1, 3, 5, 6];
// Verwijder een uit de lengte van de array en wijs deze toe aan een variabele:
laat v = anArray.length - 1; 
// Gebruik de bovenstaande variabele als indexbasis tijdens het doorlopen van de array:
for (laat ik in een array){
console.log (anArray[v])
v -=1;
}
Uitgang:
6
5
3
1 

De bovenstaande code is logisch vergelijkbaar met wat u deed tijdens het gebruik van de decrementele lus. Het is echter beter leesbaar en expliciet geschetst.

JavaScript voor... van Loop

De voor...van lus is vergelijkbaar met de voor in lus.

Echter, in tegenstelling tot voor in, itereert het niet door de array-index, maar door de items zelf.

De algemene syntaxis ziet er als volgt uit:

for (laat ik van array) {
actie 
}

Laten we deze lusmethode gebruiken om stapsgewijs door een array te lopen om te zien hoe het werkt:

laat anArray = [1, 3, 5, 6];
for (laat ik van een array) {
console.log (i)
}
Uitgang:
1
3
5
6 

U kunt deze methode ook gebruiken om de array naar beneden te herhalen en de uitvoer om te keren. Het is vergelijkbaar met hoe je het doet met voor in:

laat anArray = [1, 3, 5, 6];
laat v = anArray.length - 1;
for (laat x van een array) {
console.log (anArray[v])
v -=1;
}
Uitgang:
6
5
3
1

Om binnen de lus te werken:

laat anArray = [1, 3, 5, 6];
laat v = anArray.length - 1;
for (laat x van een array) {
console.log("5", "x", anArray[v], "=", anArray[v] * 5)
v -=1;
}
Uitgang:
5x6 = 30
5 x 5 = 25
5x3 = 15
5x1 = 5 

De While-lus

De terwijl lus loopt continu zolang een opgegeven voorwaarde waar blijft. Het wordt vaak gebruikt als een oneindige lus.

Omdat nul bijvoorbeeld altijd kleiner is dan tien, wordt de onderstaande code continu uitgevoerd:

laat ik = 0;
terwijl (i < 10) {
console.log (4)
}

De bovenstaande code registreert "4" oneindig.

Laten we een array doorlopen met behulp van de terwijl lus:

laat ik = 0;
terwijl (i < anArray.length) {
console.log (anArray[i])
ik +=1
}
Uitgang:
1
3
5
6 

JavaScript do...terwijl Loop

De doen terwijl loop accepteert en voert een reeks acties expliciet uit binnen a doen syntaxis. Het vermeldt dan de voorwaarde voor deze actie in de terwijl lus.

Hier is hoe het eruit ziet:

doen{
acties
}
terwijl (
voorwaarde
)

Laten we nu een array doorlopen met behulp van deze lusmethode:

doen{
console.log (anArray[i])
ik +=1
}
terwijl (
i < anArray.length
)
Uitgang:
1
3
5
6 

Maak uzelf vertrouwd met JavaScript-loops

Hoewel we de verschillende JavaScript-looping-methoden hier hebben benadrukt, kunt u de basisprincipes van iteratie bij het programmeren beheersen, zodat u ze flexibel en vol vertrouwen in uw programma's kunt gebruiken. Dat gezegd hebbende, werken de meeste van deze JavaScript-loops op dezelfde manier, met slechts een paar verschillen in hun algemene opzet en syntaxis.

Loops vormen echter de basis van de meeste client-side array-rendering. Dus voel je vrij om deze looping-methoden naar wens aan te passen. Als u ze bijvoorbeeld gebruikt met complexere arrays, krijgt u een beter begrip van JavaScript-loops.

Hoe de JavaScript if-else-instructie te gebruiken

Het if-else statement is uw eerste stap naar het programmeren van logica in uw applicaties.

Lees volgende

Over de auteur