JavaScript for loop (esimerkkejä)

Tässä opetusohjelmassa opit silmukoista ja silmukoista JavaScriptissä esimerkkien avulla.

Ohjelmoinnissa silmukoita käytetään toistamaan koodilohko.

Esimerkiksi, jos haluat näyttää viestin 100 kertaa, voit käyttää silmukkaa. Se on vain yksinkertainen esimerkki; voit saavuttaa paljon enemmän silmukoilla.

Tämä opetusohjelma keskittyy JavaScript- forsilmukkaan. Opit muun tyyppisistä silmukoista tulevissa opetusohjelmissa.

JavaScript silmukalle

forSilmukan syntaksi on:

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

Tässä,

  1. InitialExpression alustaa ja / tai julistaa muuttujat ja suorittaa vain kerran.
  2. Ehto arvioidaan.
    • Jos ehto on false, forsilmukka lopetetaan.
    • jos ehto on true, forsuoritetaan silmukan sisällä oleva koodilohko .
  3. UpdateExpression päivittää arvon initialExpression kun ehto on true.
  4. Ehto arvioidaan uudelleen.Tämä prosessi jatkuu, kunnes tila on false.

Saat lisätietoja olosuhteista käymällä JavaScript-vertailu- ja loogiset operaattorit -sivulla.

Vuokaavio JavaScriptiä silmukasta

Esimerkki 1: Näytä teksti viisi kertaa

 // 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.`); )

Tuotos

Rakastan JavaScriptiä. Rakastan JavaScriptiä. Rakastan JavaScriptiä. Rakastan JavaScriptiä. Rakastan JavaScriptiä.

Näin tämä ohjelma toimii.

Toisto Vaihteleva Ehto: i <= n Toiminta
1 i = 1
n = 5
true Rakastan JavaScriptiä. on painettu.
i korotetaan arvoon 2 .
2. i = 2
n = 5
true Rakastan JavaScriptiä. on painettu.
i korotetaan arvoon 3 .
3. i = 3
n = 5
true Rakastan JavaScriptiä. on painettu.
i korotetaan arvoon 4 .
4. päivä i = 4
n = 5
true Rakastan JavaScriptiä. on painettu.
i korotetaan arvoon 5 .
5. i = 5
n = 5
true Rakastan JavaScriptiä. on painettu.
i korotetaan arvoon 6 .
6. i = 6
n = 5
false Silmukka on päättynyt.

Esimerkki 2: Näytä numerot 1-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 )

Tuotos

 1 2 3 4 5

Näin tämä ohjelma toimii.

Toisto Vaihteleva Ehto: i <= n Toiminta
1 i = 1
n = 5
true 1 on tulostettu.
i korotetaan arvoon 2 .
2. i = 2
n = 5
true 2 on tulostettu.
i korotetaan arvoon 3 .
3. i = 3
n = 5
true 3 on tulostettu.
i korotetaan arvoon 4 .
4. päivä i = 4
n = 5
true 4 on tulostettu.
i korotetaan arvoon 5 .
5. i = 5
n = 5
true 5 on tulostettu.
i korotetaan arvoon 6 .
6. i = 6
n = 5
false Silmukka on päättynyt.

Esimerkki 3: Näyttää n luonnollisen numeron summa

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

Tuotos

 summa: 5050

Tässä summan arvo on aluksi 0 . Sitten forsilmukka toistetaan i = 1 to 100. Jokaisessa iteraatiossa i lisätään summaan ja sen arvoa lisätään yhdellä .

Kun i: stä tulee 101 , testiehto on falseja summa on yhtä suuri kuin 0 + 1 + 2 +… + 100.

Yllä oleva ohjelma luonnollisten lukujen summan lisäämiseksi voidaan kirjoittaa myös muodossa

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

Tämä ohjelma antaa myös saman tuotoksen kuin esimerkki 3 . Voit suorittaa saman tehtävän monella eri tavalla ohjelmoinnissa; ohjelmoinnissa on kyse logiikasta.

Vaikka molemmat tapat ovat oikein, yritä tehdä koodistasi luettavampi.

JavaScript Infinite -silmukka

Jos forsilmukan testiehto on aina true, se kestää ikuisesti (kunnes muisti on täynnä). Esimerkiksi,

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

Yllä olevassa ohjelmassa ehto on aina se, truejoka suorittaa koodin loputtomasti.

Seuraavassa opetusohjelmassa opit whileja do… whilesilmukka.

Mielenkiintoisia artikkeleita...