JavaScript för loop (med exempel)

I denna handledning lär du dig om looparna och om loopar i JavaScript med hjälp av exempel.

Vid programmering används slingor för att upprepa ett kodblock.

Om du till exempel vill visa ett meddelande 100 gånger kan du använda en loop. Det är bara ett enkelt exempel; du kan uppnå mycket mer med öglor.

Denna handledning fokuserar på JavaScript- forloop. Du kommer att lära dig om den andra typen av slingor i de kommande självstudierna.

JavaScript för loop

Slingans syntax forär:

  for(initialExpression; condition; updateExpression) ( // for loop body )

Här,

1. Den initialExpression initierar och / eller deklarerar variabler och utför endast en gång.
2. Det villkoret utvärderas.
   • Om villkoret är falsedet forär slingan avslutas.
   • om villkoret är true, forkörs blocket inuti slingan.
3. Den updateExpression uppdaterar värdet på initialExpression när villkoret är true.
4. Det villkoret utvärderas igen.Detta process fortsätter tills tillståndet är false.

För att lära dig mer om villkoren , besök JavaScript-jämförelse och logiska operatörer.

Flödesschema för JavaScript för loop

Exempel 1: Visa en text fem gånger

 // program to display text 10 times const n = 5; // looping from i = 1 to 5 for (let i = 1; i <= n; i++) ( console.log(`I love JavaScript.`); )

Produktion

Jag älskar JavaScript. Jag älskar JavaScript. Jag älskar JavaScript. Jag älskar JavaScript. Jag älskar JavaScript.

Så här fungerar det här programmet.

Iteration	Variabel	Villkor: i <= n	Handling
1: a	i = 1 n = 5	true	Jag älskar JavaScript. är tryckt. i ökas till 2 .
2: a	i = 2 n = 5	true	Jag älskar JavaScript. är tryckt. i ökas till 3 .
3: e	i = 3 n = 5	true	Jag älskar JavaScript. är tryckt. i ökas till 4 .
4: e	i = 4 n = 5	true	Jag älskar JavaScript. är tryckt. i ökas till 5 .
5: e	i = 5 n = 5	true	Jag älskar JavaScript. är tryckt. i ökas till 6 .
6: e	i = 6 n = 5	false	Slingan avslutas.

Exempel 2: Visa nummer från 1 till 5

 // program to display numbers from 1 to 5 const n = 5; // looping from i = 1 to 5 // in each iteration, i is increased by 1 for (let i = 1; i <= n; i++) ( console.log(i); // printing the value of i )

Produktion

 1 2 3 4 5

Så här fungerar det här programmet.

Iteration	Variabel	Villkor: i <= n	Handling
1: a	i = 1 n = 5	true	1 är tryckt. i ökas till 2 .
2: a	i = 2 n = 5	true	2 är tryckt. i ökas till 3 .
3: e	i = 3 n = 5	true	3 är tryckt. i ökas till 4 .
4: e	i = 4 n = 5	true	4 är tryckt. i ökas till 5 .
5: e	i = 5 n = 5	true	5 är tryckt. i ökas till 6 .
6: e	i = 6 n = 5	false	Slingan avslutas.

Exempel 3: Visa summan av n naturliga nummer

 // program to display the sum of natural numbers let sum = 0; const n = 100 // looping from i = 1 to n // in each iteration, i is increased by 1 for (let i = 1; i <= n; i++) ( sum += i; // sum = sum + i ) console.log('sum:', sum);

Produktion

 summa: 5050

Här är summan till en början 0 . Sedan forupprepas en slinga från i = 1 to 100. I varje iteration läggs i till summan och dess värde ökas med 1 .

När jag blir 101 är testvillkoret falseoch summan blir lika med 0 + 1 + 2 + … + 100.

Ovanstående program för att lägga till summan av naturliga tal kan också skrivas som

 // program to display the sum of n natural numbers let sum = 0; const n = 100; // looping from i = n to 1 // in each iteration, i is decreased by 1 for(let i = n; i>= 1; i-- ) ( // adding i to sum in each iteration sum += i; // sum = sum + i ) console.log('sum:',sum);

Detta program ger också samma utdata som exempel 3 . Du kan utföra samma uppgift på många olika sätt i programmering; programmering handlar om logik.

Även om båda sätten är korrekta bör du försöka göra din kod mer läsbar.

JavaScript oändlig för loop

Om testvillkoret i en forslinga alltid är true, körs det för alltid (tills minnet är fullt). Till exempel,

 // infinite for loop for(let i = 1; i> 0; i++) ( // block of code )

I ovanstående program är villkoret alltid truesom kör koden för oändliga tider.

I nästa handledning lär du dig om whileoch do… whileslinga.