JavaScript til loop (med eksempler)

I denne vejledning lærer du om sløjferne og om sløjfer i JavaScript ved hjælp af eksempler.

Ved programmering bruges sløjfer til at gentage en blok kode.

Hvis du f.eks. Vil vise en besked 100 gange, kan du bruge en loop. Det er bare et simpelt eksempel; du kan opnå meget mere med sløjfer.

Denne tutorial fokuserer på JavaScript- forloop. Du vil lære om den anden type sløjfer i de kommende selvstudier.

JavaScript til loop

Sløjfens syntaks forer:

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

Her,

  1. Den initialExpression initialiserer og / eller erklærer variabler og udfører kun én gang.
  2. Den tilstand vurderes.
    • Hvis betingelsen er false, forafsluttes sløjfen.
    • hvis betingelsen er true, forudføres kodeblokken inde i sløjfen.
  3. Den updateExpression opdaterer værdien af initialExpression når betingelsen er true.
  4. Den tilstand vurderes igen.Denne proces fortsætter, indtil tilstanden er false.

Hvis du vil lære mere om betingelserne , skal du besøge JavaScript-sammenligning og logiske operatører.

Flowchart of JavaScript for loop

Eksempel 1: Vis en tekst fem gange

 // 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

Jeg elsker JavaScript. Jeg elsker JavaScript. Jeg elsker JavaScript. Jeg elsker JavaScript. Jeg elsker JavaScript.

Sådan fungerer dette program.

Iteration Variabel Betingelse: i <= n Handling
1. i = 1
n = 5		 true Jeg elsker JavaScript. er trykt.
jeg øges til 2 .
2. plads i = 2
n = 5		 true Jeg elsker JavaScript. er trykt.
jeg øges til 3 .
3. i = 3
n = 5		 true Jeg elsker JavaScript. er trykt.
jeg øges til 4 .
4. plads i = 4
n = 5		 true Jeg elsker JavaScript. er trykt.
jeg øges til 5 .
5. plads i = 5
n = 5		 true Jeg elsker JavaScript. er trykt.
jeg øges til 6 .
6. i = 6
n = 5		 false Sløjfen er afsluttet.

Eksempel 2: Vis numre fra 1 til 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ådan fungerer dette program.

Iteration Variabel Betingelse: i <= n Handling
1. i = 1
n = 5		 true 1 er trykt.
jeg øges til 2 .
2. plads i = 2
n = 5		 true 2 er trykt.
jeg øges til 3 .
3. i = 3
n = 5		 true 3 er trykt.
jeg øges til 4 .
4. plads i = 4
n = 5		 true 4 er trykt.
jeg øges til 5 .
5. plads i = 5
n = 5		 true 5 er trykt.
jeg øges til 6 .
6. i = 6
n = 5		 false Sløjfen er afsluttet.

Eksempel 3: Vis sum af n naturlige tal

 // 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

 sum: 5050

Her er værdien af ​​sum oprindeligt 0 . Derefter forgentages en løkke fra i = 1 to 100. I hver iteration tilføjes i summen, og dens værdi øges med 1 .

Når jeg bliver 101 , er testbetingelsen, falseog summen er lig med 0 + 1 + 2 + … + 100.

Ovenstående program for at tilføje summen af ​​naturlige tal kan også skrives 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);

Dette program giver også den samme output som eksempel 3 . Du kan udføre den samme opgave på mange forskellige måder i programmering; programmering handler om logik.

Selvom begge måder er korrekte, skal du prøve at gøre din kode mere læsbar.

JavaScript uendelig til loop

Hvis testtilstanden i en forløkke altid er true, kører den for evigt (indtil hukommelsen er fuld). For eksempel,

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

I ovenstående program er betingelsen altid, truesom derefter kører koden i uendelige tider.

I den næste vejledning lærer du om whileog do… whilesløjfer.

Interessante artikler...